png_resize = function() {
	this.init();
}

png_resize.prototype = {
	init: function() {
		this.layout = $('#layout');
		this.page_body = $('#page_body');
		this.drawings = $('#drawings');
		this.drawings_top = parseInt(this.drawings.css('margin-top'));
		this.layout_max_width = isNaN(parseInt(this.page_body.css('max-width'))) ? 1300 : parseInt(this.page_body.css('max-width'));
		this.layout_min_width = parseInt(this.layout.css('min-width'));
		this.elements_array = $('.ball');
		this.hovers_array = $('.ball_hover');
		this.links = this.drawings.find('.drawings li a');
		
		this.images_loaded = 0;
		
		this.elements_left = parseInt(this.elements_array.eq(0).css('left'));
		
		this.layout_middle_width = (this.layout_max_width - this.layout_min_width) / 2;
		
		this.ball_max_width = 400;
		this.ball_max_height = 363.6;
		this.ball_min_width = 337.5;
		this.ball_min_height = 306.9;
		
		this.hover_zone = this.links.find('span');
		this.hover_zone_min_width = 210;
		this.hover_zone_min_height = 200;
		this.hover_zone_max_width = 250;
		this.hover_zone_max_height = 215;
		
		this.corrector = (this.ball_max_width - this.ball_min_width) / (this.layout_max_width - this.layout_min_width);
		this.corrector_height = this.ball_max_height / this.ball_max_width;

		this.corrector_zone = (this.hover_zone_max_width - this.hover_zone_min_width) / (this.layout_max_width - this.layout_min_width);
		this.corrector_zone_height = this.hover_zone_max_height / this.hover_zone_max_width;
		
		var that = this;
		
		this.resize_ball();
		
		$(window).resize(function(){
			that.resize_ball();
		});
	},
	
	resize_ball: function() {
		var
			new_layout_width = this.layout[0].offsetWidth,
			new_element_width,
			new_element_height,
			new_hover_zone_width,
			that = this;
			
		if( new_layout_width < this.layout_max_width && new_layout_width > this.layout_min_width ){
			new_element_width = (new_layout_width - this.layout_min_width) * this.corrector;
			new_hover_zone_width = (new_layout_width - this.layout_min_width) * this.corrector_zone;
		}
		else if( new_layout_width >= this.layout_max_width ){
			new_element_width = this.ball_max_width - this.ball_min_width;
			new_hover_zone_width = this.hover_zone_max_width - this.hover_zone_min_width;
		}
		else if( new_layout_width <= this.layout_min_width ){
			new_element_width = 0;
			new_hover_zone_width = 0;
		}
		
		var
			new_width = that.ball_min_width + new_element_width,
			new_height = new_width * that.corrector_height,
			new_hover_zone_width = new_hover_zone_width + that.hover_zone_min_width,
			new_hover_zone_height = new_hover_zone_width * that.corrector_zone_height;

		if($.browser.opera){
			this.elements_array.each(function(i){
				var
					maybe_canvas = $('#canvas' + i),
					maybe_canvas_hover = $('#canvas_hover' + i),
					canvas,
					canvas_element,
					ctx,
					canvas_hover,
					canvas_element_hover,
					ctx_hover,
					is_images_hidden;

				if(maybe_canvas.size()) {
					canvas = maybe_canvas;
					canvas_element = canvas[0];
					canvas_element.getContext('2d').clearRect(0, 0, 1000, 1000);

					canvas_hover = maybe_canvas_hover.addClass('ball_hover');
					canvas_element_hover = canvas_hover[0];
					canvas_element_hover.getContext('2d').clearRect(0, 0, 1000, 1000);
				} else {
					canvas = $('<canvas/>');
					canvas_element = canvas[0];
					canvas.insertAfter(that.elements_array.eq(i));

					canvas_hover = $('<canvas/>').addClass('ball_hover');
					canvas_element_hover = canvas_hover[0];
					canvas_hover.insertAfter(that.hovers_array.eq(i));
				}
				ctx = canvas_element.getContext('2d');
				ctx_hover = canvas_element_hover.getContext('2d');
				
				canvas_element.id = 'canvas' + i;
				canvas_element.width = new_width;
				canvas_element.height = new_height;
				
				canvas_element_hover.id = 'canvas_hover' + i;
				canvas_element_hover.width = new_width;
				canvas_element_hover.height = new_height;
				
				canvas.css({
					left: that.elements_left - new_element_width / 3,
					top: -new_element_width * that.corrector_height / 5
				});
				canvas_hover.css({
					left: that.elements_left - new_element_width / 3,
					top: -new_element_width * that.corrector_height / 5
				});
				
				if(that.images_loaded < that.elements_array.size()){
					var image = new Image();
					
					image.onload = function(){
						that.images_loaded++;
						ctx.drawImage(that.elements_array[i],0,0, new_width, new_height);
						ctx_hover.drawImage(that.hovers_array[i],0,0, new_width, new_height);

						that.elements_array.eq(i).css({
							left: '-10000px'
						});
						that.hovers_array.eq(i).css({
							left: '-10000px'
						});
					}
					
					image.src = that.elements_array[i].src;
				} else {
					ctx.drawImage(that.elements_array[i],0,0, new_width, new_height);
					ctx_hover.drawImage(that.hovers_array[i],0,0, new_width, new_height);
				}
				
			});
		} else {
			that.elements_array.css({
				width: new_width,
				height: new_height,
				left: that.elements_left - new_element_width / 3,
				top: -new_element_width * that.corrector_height / 5
			});
			
			that.hovers_array.css({
				width: new_width,
				height: new_height,
				left: that.elements_left - new_element_width / 3,
				top: -new_element_width * that.corrector_height / 5
			});
			
			that.hover_zone.css({
				width: new_hover_zone_width,
				height: new_hover_zone_height,
				left: that.elements_left - new_element_width / 2,
				marginBottom: (that.hover_zone_max_height - new_hover_zone_height) / 1.5
			});
		}
	}
}

$(function() {
	new png_resize();
});