/*
 * This file will contain all methods regards to the control of the main images.
 */
dojo.require("dojox.fx");
var mainImages = {
	init : function(){
		mainImages.images  = dojo.query(".main_images_item");
		mainImages.main_imgs_table = dojo.byId("main_images");
		mainImages.content = dojo.byId("content");
		mainImages.clickedLink = null;
		
		// register each image with an onclick & on mouseover & on mouseout method.
		dojo.forEach(
				mainImages.images,
				function(img){
					//dojo.connect(img, "onclick", mainImages.onImgClicked);
					dojo.connect(img, "onmouseover", mainImages.onImgHover);
					dojo.connect(img, "onmouseout", mainImages.onImgMouseOut);
					mainImages.onImgHover(img);
					mainImages.onImgMouseOut(img);
				});
		},
	
	onImgClicked : function(e){
		e.preventDefault();
		var linkQuery = dojo.query('a',e.currentTarget);
		mainImages.clickedLink = linkQuery[0]; 
		
		// Get the Content add content to the block
		// if success assign the new content to the bodyBlockHTML;
		// the call show active to replace the content
		var url = mainImages.clickedLink.href.replace('index','xhr');
		application.makeXHR(
				"get", //method type
				url,	   // url
				null,  // data args
				null,  // handle as
				function(data,obj){
					yvonne.bodyBlockHTML = data;
					mainImages.showActive();
				} // call back when success;
		);
	},
	
	
	moveTextDown : function(node){
		var nodeInfo = dojo.coords(node);
		var imgNode = dojo.byId('main_'+node.id+'_txt');
		var imgNodeInfo = dojo.coords(imgNode);
		var left = imgNodeInfo.x;
		var top  = nodeInfo.y;
		dojo.style(imgNode,{'opacity':'.6'});
		dojo.fx.slideTo({node:imgNode, left: left, top: top, duration: 200}).play();		
	},
	
	onImgHover: function(e){
		var el=e.currentTarget;
		if(el==undefined){
			el=e;
		}
		var imgNode = dojo.byId('main_'+el.id+'_txt');
		dojo.style(imgNode,{'opacity':'.6'});
		mainImages.moveTextDown(el);
	},
	
	onImgMouseOut: function(e){
		var el = e.currentTarget;
		if(el==undefined){
			el=e;
		}
		var nodeInfo = dojo.coords(el);
		var imgNode = dojo.byId('main_'+el.id+'_txt');
		dojo.style(imgNode,{'opacity':'0','top':nodeInfo.y - 50 + 'px'});
	},
	
	showActive : function(){
		//Fadeout all images first. 
		// once done replace the content then fade in the new content.
		dojo.fadeOut({
			node  : mainImages.main_imgs_table,
			onEnd : function(){
					// find the css;
					var app = application.getInstance();
					application.addJsCss(yvonne.bodyBlockHTML);
					// replace the content
					yvonne.replaceBodyBlock();
					// first hide the body block;
					dojo.style(yvonne.bodyBlock,{"display":"none"});
					// set css both the main image and the content.
					dojo.style(yvonne.bodyBlock,{"display":"block","opacity":"0"});
					// fade in
					dojo.fadeIn({node:yvonne.bodyBlock,duration:500}).play();
			},
			duration:500
			}).play();
	}
};

//call init whenever we're ready.
dojo.addOnLoad(function(){
	/* main Images */
	yvonne.mainImages = mainImages;
	yvonne.mainImages.init();
});