/**
 * @author Sergey Chikuyonok (gonarch@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 */

var About = {
	init: function(){
		this.root = $('#projects .buildings');

		this.tw = null;

		//find all items
		this.items = this.root.find('.item');
		this.images = this.items.find('.image');

		//remember each item's position and size
		var item_dims = [], image_dims = [];
		this.items.each(function(){
			item_dims.push({
				width: this.offsetWidth,
				height: this.offsetHeight,
				left: this.offsetLeft,
				top: this.offsetTop
			});

			var img = $(this).find('.image')[0];
			image_dims.push({
				width: img.offsetWidth,
				height: img.offsetHeight,
				left: img.offsetLeft,
				top: img.offsetTop
			});
		});

		this.item_dims = item_dims;
		this.image_dims = image_dims;

		this.current_item = this.items.filter('.selected');

		//create temporary mover
		var ix = this.items.index(this.current_item[0]);
		
		this.mover_dim = {
			left: item_dims[ix].left + image_dims[ix].left,
			top: item_dims[ix].top + image_dims[ix].top,
			width: image_dims[ix].width,
			height: image_dims[ix].height
		}
		

//		this.mover = $('<div>').addClass('mover').css(this.mover_dim);
//		this.root.append(this.mover);

		this.attachEvents();
	},

	attachEvents: function(){
		var me = this;
		var f = function(evt){ return me.dispatchEvent(evt); };
		this.items.find('.pseudo-href').click(f);

		$(window).bind('resize', f);
	},

	dispatchEvent: function(evt){
		switch(evt.type){
			case 'click':
				this.onClick(evt);
				break;
			case 'resize':
				this.onResize(evt);
				break;
		}
	},

	onClick: function(evt){
		this.moveToItem($(evt.target).parents('.item:first'));
	},

	onResize: function(){
		var me = this;
		this.items.each(function(i){
			me.item_dims[i].left = this.offsetLeft;
		});

		this.mover_dim.left = this.current_item[0].offsetLeft + this.current_item.find('.image')[0].offsetLeft;
//		this.mover.css('left', this.mover_dim.left);
	},

	moveToItem: function(item){
		//find item's position in list
		var ix = this.items.index(item[0]);

		if(ix == -1)
			return;

		//bring current and target item to front
		item.css({zIndex: 11});
		this.current_item.css({zIndex: 10});

		var target_dim = {
			width: this.image_dims[ix].width,
			height: this.image_dims[ix].height,
			left: this.item_dims[ix].left + this.image_dims[ix].left,
			top: this.item_dims[ix].top + this.image_dims[ix].top
		};

		var start_dim = {
			left: this.mover_dim.left,
			top: this.mover_dim.top,
			width: this.mover_dim.width,
			height: this.mover_dim.height
		};
		var _worked = false;

		if(this.tw)
			this.tw.stop();

		this.tw = new Tween(this, '', EEQ.Cubic.easeInOut, 0, 1, Math.round( Math.abs(target_dim.left - start_dim.left) / 8 ));
		this.tw.onMotionChanged = function(obj){
			obj.mover_dim = {
				width: start_dim.width + (target_dim.width - start_dim.width) * this.position,
				height: start_dim.height + (target_dim.height - start_dim.height) * this.position,
				left: start_dim.left + (target_dim.left - start_dim.left) * this.position,
				top: start_dim.top + (target_dim.top - start_dim.top) * this.position
			};

//			obj.mover.css(obj.mover_dim);
			obj.drawMask(obj.mover_dim);

			if(!_worked){
				_worked = true;
				obj.current_item.removeClass('selected');
			}
		};

		this.tw.onMotionFinished = function(obj){
			obj.resetMask(item);
		};

	},

	drawMask: function(mover_dim){
		var me = this;
		this.items.each(function(i){
			var coords = me.item_dims[i];
			var img_coords = me.image_dims[i];

			var x1 = coords.left + img_coords.left;
			var x2 = x1 + img_coords.width;
			var y1 = coords.top + img_coords.top;
			var y2 = y1 + img_coords.height;

			//item intersects with mover?
			var minx1 = Math.min(x1, mover_dim.left), maxx1 = Math.max(x1, mover_dim.left);
			var minx2 = Math.min(x2, mover_dim.left + mover_dim.width), maxx2 = Math.max(x2, mover_dim.left + mover_dim.width);

			if(
				(maxx1 >= minx1 && maxx1 <= minx2) ||
				(maxx2 >= minx1 && maxx2 <= minx1)
			){
				var dx = coords.left + img_coords.left;
				var dy = coords.top + img_coords.top;
				//find clipping coordinates
				var clip = {
					x1: Math.max(x1, mover_dim.left) - dx,
					x2: Math.min(x2, mover_dim.left + mover_dim.width) - dx,
					y1: Math.max(y1, mover_dim.top) - dy,
					y2: Math.min(y2, mover_dim.top + mover_dim.height) - dy
				}

				$(me.images[i]).css({
					clip: 'rect('+clip.y1+'px '+clip.x2+'px '+clip.y2+'px '+clip.x1+'px)',
					visibility: 'visible'
				});
			}
			else{
				$(me.images[i]).css({clip: 'rect(auto auto auto auto)', visibility: ''});
			}
		});
	},

	resetMask: function(cur_item){
		this.images.css({clip: 'rect(auto auto auto auto)', visibility: ''});
		this.items.css({zIndex: ''});
		if(cur_item)
			this.current_item = cur_item.addClass('selected');
	}
};

$(function(){
	About.init();
})