/*
 * Version: 1.0.0 (06/11/2010)
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.4+
 * By: S.S.Niranga Rajapaksha
 *	nirangamail@gmail.com
*/
// JavaScript Document
$(document).ready(function(){
	var titles 		= [];
	var captions 	= [];
	var urls 		= [];
	var images 		= [];
	var thumbs 		= [];
	var discription		= [];
	
	var leftValue = 0;
	var thumbWidth = 120;
	var thumbHeight = 64;
	var noOfThumbs = 9;
	var largeImageWidth;
	var noOfImages;
	var currentImageNo;
	var current;
	var nextImg;
	var BIG_current;
	var BIG_nextImg = 0;
	var BIG_nextImgPath;
	var BIG_thumbImg;
	
	var $largeDiv		= $('#largeProductImage');
	var $BIG_largeDiv	= $('#BIG_ProductImage');
	var $thumbsDiv		= $('#thumbProductImages');
	var $BIG_thumbsDiv	= $('#BIG_thumbProductImages');
	
	$.loadXML("xml/ScrollerImage.xml", xmlCallback);
	function xmlCallback(xml)
	{
		if(xml instanceof jQuery)
		{
			
		}else
		{
			xml = $(xml);
		}
		noOfImages = xml.find('TemporaryTable').length;

		if(noOfImages < 5){
			$('.arrowButtons').animate({
				opacity: 0.2
			}, 1000, function() {
				//$(this).hide();
			});
			
			
			
		}
		
		xml.find('TemporaryTable').each(function(){
				titles.push($(this).find('Title').text());
				//captions.push($(this).find('Caption').text());
				urls.push($(this).find('URL').text());
				discription.push($(this).find('Discription').text());
				//images.push($(this).find('Image').text());
				thumbs.push($(this).find('Thumbnail').text());
				
				var image = new Image();
				image.src = $(this).find('Image').text();
				
				var GotoUrl = $(this).find('URL').text();
								var title = $(this).find('Title').text();

				var DiscriptionText = $(this).find('Discription').text();
			
				var smallImage = new Image();
				smallImage.src = $(this).find('Thumbnail').text();
				
			//	var thumbImage = "<li class='thumbImage'> <a href='http://www."+ GotoUrl +"' class='loadToolTip' rel='"+ image.src +"' target='_blank'> <img src='"+ smallImage.src + "' border = '0' width='85' height='62'/> </a></br><div class='UrlCont'> <a href='http://www."+ GotoUrl +"' class='GotoUrlLink' target='_blank'>"+ title +" </a></div><div class='ToolTip'>"+DiscriptionText+"</div></li>";			
								var thumbImage = "<li class='thumbImage'> <a href='http://www."+ GotoUrl +"' class='tip' rel='"+ image.src +"' target='_blank' title='"+DiscriptionText+"'> <img src='"+ smallImage.src + "' border = '0' width='85' height='62'/> </a></br><div class='UrlCont'> <a href='http://www."+ GotoUrl +"' class='GotoUrlLink' target='_blank'  title='"+DiscriptionText+"' >"+ title +" </a></div></li>";			

	
				var BIG_thumbImage = "<li class='BIG_thumbImage'><a href='javascript:void(0);' class='BIG_loadLargeImage' rel='"+ image.src +"'> what is this<img src='"+ smallImage.src + "' border = '0' width='80' height='80'/> </a></li>";
				
				
				$thumbsDiv.append(thumbImage);
				$BIG_thumbsDiv.append(BIG_thumbImage);
				//$largeDiv.append(DiscriptionText);
			});
		
		var image = new Array();
		image.src = images[0];
		
		var largeImage 		= "<img src='"+ image.src+"' class='cuirrent'>";
			//alert(largeImage)
	
		$largeDiv.append(largeImage);
		
		var thumbHolderWidth = noOfThumbs * thumbWidth;
		var fullWidth = noOfImages * thumbWidth;
		
		$('ul#thumbProductImages').css({width:fullWidth});
		
		
		
		$('div.ToolTip').animate({
				opacity: 0
			  },0);

	
		/********************************************************************/
		//Small thumbs
		$('img.back').click(function() {
			
			//condition to stop at the end
			if(leftValue < 0){
				leftValue += thumbWidth;
				$('ul#thumbProductImages').animate({
					left: leftValue
				}, 500, function() {
					// Animation complete.
				});
			}
		});
		
		$('img.forward').click(function() {
			
			if(leftValue >= -(fullWidth - (noOfThumbs*thumbWidth))){
				
				leftValue -= thumbWidth;
				$('ul#thumbProductImages').animate({
					left: leftValue
				}, 500, function() {
					// Animation complete.
				});
			}
		});
		
		/********************************************************************/
		//Code to load the large Image
		$('a.loadLargeImage').click(function() {
			
			current = $('#largeProductImage img.current');
			nextImg = $(this).attr('rel');
			
			BIG_nextImg = $(this).parent().index();

			
			var img = new Image();
			$(img).load(function(){
				/*$(this).hide();
				$(this).fadeIn(500);*/
			})
			.attr('src', nextImg)
			.addClass('current')
			.prependTo('#largeProductImage');
			
			current
			.fadeOut(500, function(){
				$(this).remove();
			});
			
		});
		
		$('.loadToolTip').hover(function() {
			//console.log($(this).parent().children('div.ToolTip'));
			

			$(this).parent().children('div.ToolTip').animate({
				opacity: 1/*,
				left: '+=50'*/
				//height: 'toggle'
			  }, 50, function() {
				// Animation complete.
			  });


			},function () {
	
			$('div.ToolTip').animate({
					opacity: 0
				  },50);
		});
		

		
		
		
		/********************************************************************/
		//Code to BIG load the large Image
		$('a.BIG_loadLargeImage').click(function() {
			
			var BIG_current = $('#BIG_ProductImage img.BIG_current');
			var BIG_nextImgPath = $(this).attr('rel');
			
			//BIG_nextImg = $(this).parent().index();

			
			var img = new Image();
			$(img).load(function(){
				/*$(this).hide();
				$(this).fadeIn(500);*/
			})
			.attr('src', BIG_nextImgPath)
			.addClass('BIG_current')
			.prependTo('#BIG_ProductImage');
			
			BIG_current
			.fadeOut(500, function(){
				$(this).remove();
				
			});
			
			BIG_nextImg = $(this).parent().index();
			
			BIG_thumbImg = $('#BIG_thumbProductImages li:nth-child('+(BIG_nextImg + 1)+')');
			$('#BIG_thumbProductImages').children().css("border","2px solid #fff");
			BIG_thumbImg.css("border","2px solid #ccc");
			
		});
		
	
	}
	
	//$("#popUpBigGallery").colorbox({width:"680", height:"600" , inline:true, href:"#jqueryBigGallery"});
});