/*
jQuery Image Showcase by JAY[http://www.gekimoe.cn] and Kael[http://yottaworks.cn]

Main function by JAY,  Ideas and Flavored by Kael
Appreciate JAY for isolating data to XML file

Copyright (c) 2008 JAY(http://blog.gekimoe.cn), Kael(Yottaworks.cn)

Date: 2008-08-16 20:18:23 (Sat, 16 Aug 2008)
*/

var $Q = jQuery;	// To avoid naming conflict
var slideXmlURL = 'http://www.jemcon.org/js/showcase.xml'

$Q(document).ready(function(){
	
	var ssObj = new Object();
	
	// Init logic data	
	ssObj.fadeTime 			= 2000;	
	ssObj.slideTime 		= 5000;
	ssObj.slideTimer 		= 0;
	ssObj.autoSlide 		= true;
	
	ssObj.thumbNum 			= 9;	
	ssObj.thumbSize 		= 0;
	ssObj.thumbIndex 		= 0;
	ssObj.thumbChangeTime 		= 500;
	ssObj.thumbIsChanging 		= false;
	ssObj.imageChanged		= true;	
	
	ssObj.dom = $Q('#slideShow');
	// Init dom components
	ssObj.dom.area       		= $Q('#slideShow');
	ssObj.dom.imageBuff     	= $Q('<img/>');    //image buffer
	ssObj.dom.desc			= $Q('.ssDesc');
	ssObj.dom.naviBg		= $Q('.ssCtrlBg');
	ssObj.dom.navigator    	 	= $Q('.ssNavigator');
	ssObj.dom.leftArrow    		= $Q('.ssPre');
	ssObj.dom.rightArrow   	 	= $Q('.ssNext');
	ssObj.dom.thumbsWrapper 	= $Q('.ssThumbsWrapper');
	ssObj.dom.thumbs        	= $Q('.ssThumbs');
	ssObj.thumbSize 		= 62;
	
	
	// Init dom propertises
	
	ssObj.dom.naviBg.hide();
	ssObj.dom.navigator.hide();
	ssObj.dom.leftArrow.fadeTo('fast', 0.5);


	//Initial
	ssObj.loadXML = function(xmlURL)
	{		
		$Q.ajax(
			{
				url: xmlURL, type: 'GET', cache: false, dataType: 'xml',
				success: function(xmlDoc){ssObj.postLoadXML(xmlDoc);}
			}
		);
	}
	
	ssObj.postLoadXML = function(xmlDoc)
	{
		var xmlItems = xmlDoc.getElementsByTagName('item');
		ssObj.items = new Array();
		for (var i = 0; i < xmlItems.length; i++)
		{
			ssObj.items.push(
				{
					link:  xmlItems[i].getElementsByTagName('link')[0].firstChild.nodeValue,
					image: xmlItems[i].getElementsByTagName('image')[0].firstChild.nodeValue,
					thumb: xmlItems[i].getElementsByTagName('thumb')[0].firstChild.nodeValue,
					desc:  xmlItems[i].getElementsByTagName('desc')[0].firstChild.nodeValue
				}
			);
		}
		
		ssObj.curIndex = Math.floor( Math.random() * ssObj.items.length );	
		
		
		for(var i = 0; i < ssObj.items.length; i++)
		{
			var thumbItem = $Q('<img/>').attr('src', ssObj.items[i].thumb).attr('slideIndex', i).fadeTo('fast', 0.5);
			thumbItem.hover(
				function()
				{
					$Q(this).fadeTo(1, 1);
				},
				function()
				{
					$Q(this).fadeTo(1, 0.5);
				}
			).click(
				function()
				{
					if(ssObj.imageChanged)
					{
						ssObj.imageChanged = false;
						ssObj.dom.desc.html('Loading image...');
						ssObj.fadeTime = 1000;
						ssObj.preSlide($Q(this).attr('slideIndex'));
					}
				}
				
			);
			ssObj.dom.thumbs.append(thumbItem);
			
		}
		

		//start Loop	
		ssObj.preSlide(ssObj.curIndex);
	}
	
	
	// Callback function register
	
	ssObj.dom.area.mouseover(
			function()
			{
				ssObj.dom.naviBg.show();
				ssObj.dom.navigator.show();
				ssObj.autoSlide = false;
				ssObj.stopSlide();
			}
		).mouseout(
			function()
			{
				ssObj.dom.naviBg.hide();
				ssObj.dom.navigator.hide();
				ssObj.autoSlide = true;
				ssObj.startSlide();
			}
		);	
	
	ssObj.dom.leftArrow.click(
		function()
		{
			if (ssObj.thumbIndex > 0 && !ssObj.thumbIsChanging)
			{
				ssObj.dom.thumbs.animate({'left' : '+=' + ssObj.thumbSize + 'px'}, ssObj.thumbChangeTime, '',
					function() { ssObj.thumbIsChanging = false;}
				);
				ssObj.thumbIndex--;
				ssObj.thumbIsChanging = true;
			}
			if (ssObj.thumbIndex == 0)
				ssObj.dom.leftArrow.fadeTo('fast', 0.5);
			else ssObj.dom.rightArrow.fadeTo('fast', 1.0);
		}
	);
	
	ssObj.dom.rightArrow.click(
		function()
		{
			if (ssObj.thumbIndex + ssObj.thumbNum < ssObj.items.length && !ssObj.thumbIsChanging)
			{
				ssObj.dom.thumbs.animate({'left' : '-=' + ssObj.thumbSize + 'px'}, ssObj.thumbChangeTime, '', 
					function() { ssObj.thumbIsChanging = false;}
				);
				ssObj.thumbIndex++;
				ssObj.thumbIsChanging = true;	
			}
			if (ssObj.thumbIndex + ssObj.thumbNum == ssObj.items.length)
				ssObj.dom.rightArrow.fadeTo('fast', 0.5);
			else ssObj.dom.leftArrow.fadeTo('fast', 1.0);
		}
	);
	
	// Logic function register
	
	ssObj.preSlide = function(index)
	{
		ssObj.curIndex = index;

		ssObj.onSlide();

	}
	
	ssObj.onSlide = function()
	{
		$Q('.slideBuff a').attr('href', ssObj.items[ssObj.curIndex].link); 
		ssObj.dom.imageBuff.attr('src', ssObj.items[ssObj.curIndex].image);
		
	}
	
	ssObj.dom.imageBuff.load(
		function()
		{
			ssObj.postSlide();
		}
	);
	
	ssObj.postSlide = function()
	{
		$Q('.slideBuff img').attr('src', ssObj.items[ssObj.curIndex].image);
		$Q('.zUpper').fadeOut(ssObj.fadeTime,
			function()
			{
				ssObj.dom.desc.html(ssObj.items[ssObj.curIndex].desc);
				$Q('.slideChange').toggleClass('zUpper').toggleClass('slideBuff');
				$Q('.slideBuff').fadeIn(1);
				ssObj.imageChanged = true;
				ssObj.fadeTime = 2000;
				if (ssObj.autoSlide)
				{
					ssObj.startSlide();
				}
			}
		);
	}
	
	ssObj.next = function()
	{
		var index = ssObj.curIndex + 1;
		if (index >= ssObj.items.length)
		{
			index = 0;
		}
		ssObj.preSlide(index);
	}
	
	ssObj.prev = function()
	{
		var index = ssObj.curIndex - 1;
		if (index < 0)
		{
			index = ssObj.items.length - 1;
		}
		ssObj.preSlide(index);
	}
	
	ssObj.startSlide = function()
	{		
		ssObj.slideTimer = setTimeout(ssObj.next, ssObj.slideTime);
	}
	
	ssObj.stopSlide = function()
	{
		clearTimeout(ssObj.slideTimer);
	}
	

	//start!
	ssObj.loadXML(slideXmlURL);
	
	
});