//add next/previous buttons on the image
//add loading gif animation.


$(function()
{
	var firstthumb = 0;
	var thumbsinline = 6;	
	var currentIndex = 0;
	// pseudo-code:
	//
	// init thumbs - exclude LI tags with thumbs images
	// find LI with traversing buttons
	// exclude from thumbs "thumbsinline"-times of thumbs
	// for the first time open first image in visible thumb - to accomplish this exclude first thumb from the visible ones
	// add function for .click event to traversing buttons
	
	
	var imageThumbs = $("#imageOptions li img").filter(".thumb"); //this excludes thumbed img tags from list
	
	var leftArrow = $("#imageOptions li img").filter(".arrowleft");
	var rightArrow = $("#imageOptions li img").filter(".arrowright");
	
	var leftButton = $("#prevLink");
	var rightButton = $("#nextLink");
	
	//imageThumbs.toggle();
	excludeThumbs(imageThumbs, firstthumb, thumbsinline); //---------init
	leftArrow.css('opacity', '0.4'); //---------init
	
	//section to show first image from the visible thumbs
	var image = imageThumbs.filter(":visible:first");
	image.addClass('current'); //mark for the first time  ---------init
	$("#loader").addClass("loading"); //set class in which animated gif background is defined
	showImage(image);
	$("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length); /////////
	
	//add click event handler to image thumbs
    imageThumbs.parent("a").click(function()
        {
		image.removeClass('current'); //remove from the last 
		image = $(this).children("img"); //get image tag from anchor element
		image.addClass('current');
        $("#loader").addClass("loading"); //set class in which animated gif background is defined
          showImage(image);
		  $("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length); /////////
          return false;
        });
	
	//add function to on-image buttons
	//should show next image and scroll gallery if needed
	rightButton.click(function()
	{
		currentIndex = imageThumbs.index(imageThumbs.filter(".current"));	//find index of current thumb
		imageThumbs.filter(".current").removeClass('current');				//remove current status form it
		if (currentIndex+1 < imageThumbs.length) currentIndex += 1;			//if end of thumb-list is not reached increament currentIndex
		image = imageThumbs.eq(currentIndex);								//get thumb with given currntIndex
		image.addClass('current');											//add current status
		$("#loader").addClass("loading"); //set class in which animated gif background is defined
		showImage(image);													//show image
		$("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length);	//change text in location bar
		
		if (currentIndex >= firstthumb+thumbsinline)				//if end of displayed thumbs reached scroll thumb list
		{
			firstthumb += 1;
			excludeThumbs(imageThumbs, firstthumb, thumbsinline);				
		}
		return false;		
	});
	
	//add function to on-image buttons
	//should show previous image and scroll gallery if needed
	leftButton.click(function()
	{
		currentIndex = imageThumbs.index(imageThumbs.filter(".current"));	//find index of current thumb
		imageThumbs.filter(".current").removeClass('current');				//remove current status form it
		if (currentIndex > 0) currentIndex -= 1;			//if end of thumb-list is not reached increament currentIndex
		image = imageThumbs.eq(currentIndex);								//get thumb with given currntIndex
		image.addClass('current');											//add current status
		$("#loader").addClass("loading"); //set class in which animated gif background is defined
		showImage(image);													//show image
		$("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length);	//change text in location bar
		
		if (currentIndex < firstthumb)				//if end of displayed thumbs reached scroll thumb list
		{
			firstthumb -= 1;
			excludeThumbs(imageThumbs, firstthumb, thumbsinline);				
		}
		return false;		
	});
	
	//click function to gallery-scrolling buttons
	rightArrow.click(function()
	{
		leftArrow.css('opacity', '1'); //make arrow darker if end of imagelist reached
		if (firstthumb < (imageThumbs.length - thumbsinline)) {
			$(this).css('opacity', '1');
			firstthumb += 1;
			excludeThumbs(imageThumbs, firstthumb, thumbsinline);
			if (firstthumb == (imageThumbs.length - thumbsinline))
				$(this).css('opacity', '0.4');
		}
	
		//add shifting of the 'current' thumb
		currentIndex = imageThumbs.index(imageThumbs.filter(".current"));
		if ( firstthumb > currentIndex )
		{
			imageThumbs.filter(".current").removeClass('current');
			image = imageThumbs.filter(":visible:first");
			image.addClass('current');
			$("#loader").addClass("loading"); //set class in which animated gif background is defined
			showImage(image);
			$("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length); /////////
		}
	return false;
	});
	
	//click function to gallery-scrolling buttons
	leftArrow.click(function()
	{
		rightArrow.css('opacity', '1');
		if (firstthumb > 0) {
			$(this).css('opacity', '1');
			firstthumb -= 1;
			excludeThumbs(imageThumbs, firstthumb, thumbsinline);
			if (firstthumb == 0)
				$(this).css('opacity', '0.4');
		}
		
		currentIndex = imageThumbs.index(imageThumbs.filter(".current"));
		if ( currentIndex >= (firstthumb+thumbsinline))
		{
			imageThumbs.filter(".current").removeClass('current');
			image = imageThumbs.filter(":visible:last");
			image.addClass('current');
			$("#loader").addClass("loading"); //set class in which animated gif background is defined
			showImage(image);
			$("#location").text( "image " + (imageThumbs.index(imageThumbs.filter(".current")) + 1) + " of " + imageThumbs.length); /////////
		}
	return false;
	});
});

//make slice of thumbs in thumbs array visible
function excludeThumbs(thumbsList, firstThumb, thumbNumber)
{
	thumbsList.hide();
	thumbsList.slice(firstThumb, firstThumb+thumbNumber).show();
}

function showImage(imgTag) //try to pass IMG tag to this function
{

var src = imgTag.attr("src");//get scr attribute from image element
var description = imgTag.parent("a").parent("li").find("span").html(); //get description html markup from li element

var topOffset = 10;

$("#loader img").fadeOut("fast")
                .remove();
var largeImage = new Image();

$("#description").html(description); // set description html markup
$(largeImage).attr("src", src.replace('thumbs/', ''))
			 .addClass("bigimage")
			 .load(function()
             	{
                $(largeImage).hide();
                $("#loader").removeClass("loading")
                            .append(largeImage);
                $(largeImage).fadeIn("normal");                   
                });
				//alert(largeImage.height);
//$(largeImage).css("top", "" + (550 - largeImage.height)/2 + "px");
}