$(function(){
	
	var $galWrap = $('#GalleryContent');
	var $imgWrap = $('#ImageContainer');
	var $ul_wrapper = $('#galleryNav');
	var $ul = $('#galleryNav ul');
	var forSet = 7;
	var currentSlot = 0;
	var currentItem = 0;
	var totalSlot = 0;
	var noOfItems = 0;
	var left_slot = 0;
	var w = 65; var h = 40;
	var li_width = 79;
	var doAnimate = true;
	
	$.loadXML('',xmlOnComp,pageId);
	
	var delay = 4000;
	var timer = null;
	
	
	function xmlOnComp($xml)
	{
		
		if(!($xml instanceof jQuery)) $xml = $($xml);
	
		if($xml.find('TemporaryTable').length=0)
		{
			$galWrap.hide(); return;
		
		}
		
		noOfItems = $xml.find('TemporaryTable').length;
		
		if(noOfItems>forSet)
		{
			var $left = $('<a />',{
				href:"#",
				id:"leftArrow"
				}).addClass("galleryArrow");
			
			var $right = $('<a />',{
				href:"#",
				id:"rightArrow"
				}).addClass("galleryArrow");	
				
				
			
		}else
		{
			//$ul fix
			/*$ul_wrapper.css({
				float:'none',
				margin: '15px auto 0'
			});	*/
		}
		
		$ul.css('width',li_width*noOfItems+'px');
		
		$ul_wrapper.before($left);	
		
		
		$xml.find('TemporaryTable').each(function(id){ 
			
			href = $(this).find('LargeFileName').text();
			src = $(this).find('SmallFileName').text();
			title = $(this).find('Title').text();
			
			var $a = $('<a />',{
				title: title,
				href: href
				}).addClass('thumb_link');
				
			var $li = $('<li />');
			
			var $img = $('<img />',{
				src: src,
				alt: title,
				width: 65,
				height: 37
				
				});
				
			if(id==0)
			{
				$a.addClass('selected');
				
				var img = new Image();
				$imgWrap.addClass('loading');
				$(img).addClass('big_image').hide().load(function(){
					$(this).fadeIn();
					$imgWrap.removeClass('loading');
					
					
					}).attr({
						
						src: href,
						alt: title	
							
					}).prependTo($imgWrap);
			}
				
			$img.appendTo($a);
			$a.appendTo($li);
			
			$li.appendTo($ul);
			
		
		});
		
		totalSlot = Math.ceil($ul.find('> li').length/5);
		
		$ul_wrapper.after($right);
		
		
		$('#rightArrow').addClass('active');
	
	$('#leftArrow').click(function(e){
		e.preventDefault();
		clearTimeout(timer);
		if($ul.is(":animated") || $(this).is(':not(".active")')) return;
		currentSlot--;
		
		animateSlot(false);
		
		
		});
	
	$('#rightArrow').click(function(e){
		e.preventDefault();
		clearTimeout(timer);
		if($ul.is(":animated") || $(this).is(':not(".active")')) return;
		currentSlot++;
		
		animateSlot(true);
		
		
		});
		
	$('.thumb_link').click(function(e){
		e.preventDefault();
		
		if($imgWrap.find('img:animated').length>0) return;
		
		clearTimeout(timer);
		
		changeImage(this);
		
		
		});	
		
	
		
		
	
		//timer
		timer = window.setInterval(function(){onTimer()},delay);
	}
	
	
	function changeImage(_this)
	{
		$('.thumb_link').removeClass('selected');
		$(_this).addClass('selected');
		
		currentItem = $(_this).parent().prevAll().length;
		
		var image = $(_this).attr('href');
		var title = $(_this).attr('title');
		
		$imgWrap.find('.big_image').fadeOut(function(){
			$imgWrap.html('');
			var img = new Image();
			$(img).addClass('big_image').hide().load(function(){
				$(this).fadeIn();
				
				}).attr({
					src: image,
					alt: title
					
				}).prependTo($imgWrap);
			
			});
	}
	
	
	function animateSlot(next)
	{
		var k = (next) ? -1 : 1; 
		var _left = Number($ul.css('left').split('px')[0])+(k*78);
		left_slot = Math.ceil(Math.abs($ul.css('left').split('px')[0])/78);
		//console.log(k*currentItem*78);
		//console.log(left_slot);
		//console.log(_left);
		//console.log($ul.css('left').split('px')[0]>(-1*(noOfItems*78)));
		//console.log(_left<=(-1*((noOfItems-forSet)*78)));
		
		
		$ul.animate({
			left: _left+'px'
			
			}, function(){
				
				
					if(next)
					{
						left_slot--;
					}else
					{
						left_slot++;
					}
					if(_left>=0 )
					{
						$('#leftArrow').removeClass('active');
						$('#rightArrow').addClass('active');
					}else if(_left<=(-1*((noOfItems-1)*78)) )
					{
						$('#rightArrow').removeClass('active');
						$('#leftArrow').addClass('active');
					}else
					{
						$('#rightArrow').addClass('active');
						$('#leftArrow').addClass('active');
					}
				
				});	
	}
	
	function onTimer()
	{
		if(currentItem<(noOfItems-1))
		{
			currentItem++;
		}else
		{
			currentItem = 0;
		}	
		
		var itm = $('.thumb_link:eq('+currentItem+')');
		
		changeImage(itm);
		
		if(doAnimate)
		{
			$ul.animate({
			left:-1*(78*currentItem)+'px'	
			},{
			duration:1000,
			easing:"easeInOutCubic",
			complete:function(){
				
				if(currentItem==0 )
					{
						$('#leftArrow').removeClass('active');
						$('#rightArrow').addClass('active');
					}else if(currentItem==(noOfItems-1) )
					{
						$('#rightArrow').removeClass('active');
						$('#leftArrow').addClass('active');
					}else
					{
						$('#rightArrow').addClass('active');
						$('#leftArrow').addClass('active');
					}
				
				}
			});
		}
		
		
	}
	
	function galleryNavFunc()
	{
		if(currentItem>noOfItems)
		{
			currentItem = 0;
		}	
		
		var itm = $('.thumb_link:eq('+currentItem+')');
		changeImage(itm);
	}
	
	
	

	
	
	
})