$(document).ready(function()
{ 
	// SLIDER =====================================================
	
	var curSlideNum;
	var curSlideNumLeft;
	var curSlideNumRight;
	var maxSlideNum;
	var slideReferencesLeft;
	var slideReferencesRight;
	var curSlide;
	var curSlideLeft;
	var curSlideRight;
	var prevSlideLeft;
	var prevSlideRight;
	var slide_container;
	var fadeTime = 2000;
	var delayTime = 5000;
	
	
	
	
	function startSlideShow()
	{
		$("#spinner").hide();
		
		curSlideNum = 0;
		curSlideNumLeft = 0;
		curSlideNumRight = 0;
		
		maxSlideNum = imageArray.length;
		
		slideReferencesLeft = new Array();
		slideReferencesRight = new Array();
		
		prevSlideLeft = null;
		prevSlideRight = null;
		
		slide_container = "#gallery_canvas_left";
		
		loadImages();
		
		if(maxSlideNum > 2)
		{
			startTimer();
		}
		
	}
	
	
	
	
	
	function loadImages()
	{
		var showOnStart;
		
		for(i=0; i < maxSlideNum; i++)
		{
			showOnStart = (i < 2) ? true : false;
			createSlide(showOnStart);
			curSlideNum++;
		}
		
		
	}
	
	
	
	
	
	
	function createSlide(showOnStart)
	{
		
		
		// lets create a new slide and hide it
		if(showOnStart)
		{
			var s = $("<div/>",{"class": "gallery_slide"}).appendTo(slide_container).show();
		}
		else
		{
			var s = $("<div/>",{"class": "gallery_slide"}).appendTo(slide_container).hide();
		}
		
		var canvas = $("#gallery_canvas_left");
		s.css("width", 348);
		s.css("height", 261);
		s.css("position", "absolute");
		s.css("top", 0);
		s.css("overflow", "hidden");
		if(slide_container == "#gallery_canvas_left")
		{
			s.css("left", 0);
		}
		else
		{
			s.css("right", 0);
		}
		
		var slideImage = $("<img/>").appendTo(s);
		slideImage.attr('src', imageArray[curSlideNum].url);
		
		curSlide = s;
		
		if(slide_container == "#gallery_canvas_left")
		{
			slideReferencesLeft.push(s);
		}
		else
		{
			slideReferencesRight.push(s);
		}
		
		slide_container = (slide_container == "#gallery_canvas_left") ? "#gallery_canvas_right" : "#gallery_canvas_left";
		
		createDescription();
	}
	
	
	
	

	function createDescription()
	{
		// lets create an label
		var label = $("<div/>",{"class": "gallery_label"}).appendTo(curSlide);
		
		var header = $("<div/>").appendTo(label);
		
		var title = $("<span/>",{"class": "title", text: imageArray[curSlideNum].title}).appendTo(header);
		var description = $("<div/>",{"class": "description", text: imageArray[curSlideNum].description}).appendTo(label);
		
		//var label = $("<div/>",{"class": "gallery_label"}).appendTo(curSlide);
		//var title = $("<span/>",{"class": "title_desc", text: imageArray[curSlideNum].title + " - "}).appendTo(label);
		//var description = $("<span/>",{"class": "description", text: imageArray[curSlideNum].description}).appendTo(label);

	}
	
	
	
		
	
	function startTimer()
	{
		
		setTimeout(nextSlide, (fadeTime + delayTime));
	}
	
	
	
	
					
	function nextSlide()
	{
	
	
		if(curSlideNumLeft < (slideReferencesLeft.length - 1))
		{
			curSlideNumLeft++;
		}
		else
		{
			curSlideNumLeft = 0;
		}
		
		if(prevSlideLeft != null)
		{
			prevSlideLeft.fadeOut(2000);
		}
		
		curSlideLeft = slideReferencesLeft[curSlideNumLeft];					
		curSlideLeft.fadeIn(2000);
		prevSlideLeft = curSlideLeft;
		
		
		
		if(maxSlideNum > 3)
		{
			if(curSlideNumRight < (slideReferencesRight.length - 1))
			{
				curSlideNumRight++;
			}
			else
			{
				curSlideNumRight = 0;
			}
			
			if(prevSlideRight != null)
			{
				prevSlideRight.fadeOut(2000);
			}
			
			curSlideRight = slideReferencesRight[curSlideNumRight];					
			curSlideRight.fadeIn(2000);
			prevSlideRight = curSlideRight;
		}


		
		startTimer();	
	}
	
	startSlideShow();

   
});