/* fish eye footer*/
var FEfooter = Class.create();
FEfooter.prototype = 
{
	initialize: function(elmId, JSONurl)
	{
		// init parameters
		this.container = $(elmId);
		this.JSONurl = JSONurl;
		this.init = true;
		this.inProcess = false;
		this.smallImgWidth = 116;
		this.bigImgWidth = 139;
		this.smallImgHeight = 67;
		this.bigImgHeight = 80;
		this.smallDivWidth = 145;
		this.bigDivWidth = 167;
		
		this.waitMouseOver = 10;
		this.timeoutObj = null;
		
		this.delay = 0.3;
		
		this.elms = [];
		
		// Get JSON data feed
		this.getData();
	},

	getData: function()
	{
		var oAJAX = new Ajax.Request(this.JSONurl, 
		{
			onSuccess: this.processData.bind(this),
			onFailure: function()
			{
			},
			method: 'get'
		});
			
	},
		
	processData: function(xhr)
	{
		var template = '';
		var data = xhr.responseText.evalJSON();
		if(data.items.length!=5) return;		
			
		// Get the HTML template
		var templateLoc = this.container.select('ul li.JSONize')[0];
		var JSONtemplate = templateLoc.innerHTML;
		templateLoc.remove();
		var content= null;
		var $target = this.container.select('ul')[0];
		// merge content with structure
		
		var item;
		
		for(i=0;(item=data.items[i]);i++)
		{
			content = JSONtemplate.interpolate(
				{
					title:item.title, 
					link_title:item.title, 
					link_href:'href="'+item.link+'"',
					img_alt:item.img.alt, 
					img_src: 'src="'+item.img.src+'"'					
				}
			);
			
			var newLI = new Element('li').update(content);
			
			if(i==0) newLI.addClassName('first');

			$target.insert(newLI);			
		}
				
		this.items = $target.select('li');
		
		this.items.each(
		
			function($item, index)
			{
				$item.observe('mouseenter', function()
				{
					if(!$item.hasClassName('big'))
					{
						this.collapse(index);
					}									
				}.bind(this));
				
				
				//$item.setStyle({position: 'relative'});
				var $img = $item.select('img')[0];
				var $Anchor = $item.select('a')[0];
				
				$img.observe('click', function(){ location.href = $Anchor.href});
				
			}.bind(this)
		);
			
		// enlarge main image 
		this.collapse(2);
	},
	
	collapse: function(index)
	{
		if(this.inProcess) return;
		//get the right elements
		// enlarge main image
		this.elms[0] = [this.items[index]];
		this.resize(0);
		
		var lIndex = index+1;
		var rIndex = index-1;
		
		var rItem=this.items[rIndex];
		var lItem=this.items[lIndex];		
								
		for(var depth=0;(rItem || lItem);)
		{
			this.elms[++depth] = [];
			if (rItem) 
			{				
				this.elms[depth].push(rItem);
			}
			if(lItem)
			{	
				this.elms[depth].push(lItem);
			}	
						
			if(this.elms[depth].length > 0) this.resize(depth);
			rItem=this.items[--rIndex];
			lItem=this.items[++lIndex];			
		}
		
		

		
		this.init = false;				
	},
	
	resize: function(_depth)
	{		
		var _elms = this.elms[_depth];

		var $img = [];
		var resizeImgW = [];
		var resizeImgH = [];		
		
		var resizeItem = [];
		var posItem = [];
		
		var pResize = new Parallel();
				
		for(var j=0;_elms[j];j++)
		{	
			var $elm = _elms[j]; 
			$elm.setStyle({zIndex:5-_depth});	
			
			// if resize needed
				
			var oldIMGwidth, newIMGwidth, oldDivWidth, newDivWidth;
			$img[j] = $elm.select('img')[0];
			
			oldIMGwidth = parseInt($img[j].getStyle('width'))*1;
			oldIMGheight = parseInt($img[j].getStyle('height'))*1;

			if (_depth == 0) 
			{
				newIMGwidth = this.bigImgWidth;
				//oldIMGheight = this.smallImgHeight;
				newIMGheight = this.bigImgHeight;
				//oldDivWidth = this.smallDivWidth;
				newDivWidth = this.bigDivWidth;
			}
			else 
			{
				newIMGwidth = this.smallImgWidth;
				//oldIMGheight = this.bigImgHeight;
				newIMGheight = this.smallImgHeight;
				newDivWidth = this.smallDivWidth;
			}
				
			$img[j] = $elm.select('img')[0];

			if(Brsr=='IE')
			{
				oldDivWidth = parseInt($elm.getStyle('width'))*1;
				resizeItem[j] = new Tween($elm.style, 'width', Tween.regularEaseOut, oldDivWidth, newDivWidth, this.delay, 'px');
				pResize.addChild(resizeItem[j]);	
			}
			
			resizeImgW[j] = new Tween($img[j].style, 'width', Tween.None, oldIMGwidth, newIMGwidth, this.delay, 'px');

			resizeImgH[j] = new Tween($img[j].style, 'height', Tween.None, oldIMGheight, newIMGheight, this.delay, 'px');
			
			
			if(_depth==0)
			{		
				resizeImgW[j].onMotionFinished = function()			
				{
					this.addClassName('big');	
				}.bind($elm);
			}
			else
			{
				resizeImgW[j].onMotionStarted = function()			
				{
					this.removeClassName('big');
				}.bind($elm);								
			}
			pResize.addChild(resizeImgW[j]);
			pResize.addChild(resizeImgH[j]);
			
			var curPos = parseInt($elm.getStyle('margin-top')) * 1;
			var marginOffset = (_depth > 0) ? (10 + _depth) : 0;
			posItem[j] = new Tween($elm.style, 'marginTop', Tween.regularEaseOut,curPos,marginOffset, this.delay, 'px');
			
			pResize.addChild(posItem[j]);
			
			pResize.onMotionStarted = function()			
			{
				this.inProcess = true;
			}.bind(this);			
			
			pResize.onMotionFinished = function()			
			{
				this.inProcess = false;
			}.bind(this);				
		}		

		pResize.start();
	}
}