// JScript File
var currImage;
var clickAvail= true;

$(document).ready(function() {
		
	$(".creation-pager-navarrow").bind("click",clickHandler);
	
	function clickHandler(e,ui) {
		if (clickAvail) { 
			clickAvail = false; // prevent double click
			
			e.preventDefault(); // don't know if this is necessary
			
			//display next pics using ajax
			if ($(this).hasClass("creation-pager-navarrow-previous")) { // previous arrow was clicked
				enableNext(); //re-enable next arrow
					
				//check if has any image before it
				var prevId = $(".previous").prev().attr("id");
				if ( prevId == null){ // hit db to get more images
					//to retrieve id
					var currId = $(".previous").attr("id");
					var idLoc = currId.indexOf("nails-") + 6;
					currId = currId.substring(idLoc);
	
					currImage = "imgprev";
					otherImage ="imgnext";
					//will be exchanged with PageMethod PageMethods.GetImage(currId, "prev", movePrevious);
					
					GetImage(currId, "prev");
				} else { // image already loaded. just move over.
					$("#creation-pager-thumbnails").children().removeClass("next");
					$(".previous").removeClass("previous").addClass("next");
					$("#" + prevId).addClass("previous");
					
					$("#creation-pager-thumbnails")
						.animate({
							height:"60px",
							left: parseInt($("#creation-pager-thumbnails").css("left")) + parseInt("70px")},clearClick);
							
				    if ($("#" + prevId).hasClass('first')) { // check if 'prev' is the first image
				        disablePrev();
				    }
				}
			} else {
				//re-enable previous arrow
                enablePrev();

				var nextId = $(".next").next().attr("id");
				if (nextId == null){
			        //get image id using prev/next class
					var currId = $(".next").attr("id");
					var idLoc = currId.indexOf("nails-") + 6;
					currId = currId.substring(idLoc);
					
					currImage = "imgnext";	
					otherImage ="imgprev";
					
					GetImage(currId, "next");
				} else {
					//just move over
					$("#creation-pager-thumbnails").children().removeClass("previous");
					$(".next").removeClass("next").addClass("previous");
					$("#" + nextId).addClass("next");
					
					$("#creation-pager-thumbnails")
						.animate({
							height:"60px",
							left: parseInt($("#creation-pager-thumbnails").css("left")) - parseInt("70px")
						},clearClick);
				    
				    if ($("#" + nextId).hasClass('last')) { // check if 'next' is the last image
				        disableNext();
				    }
				}
			}
		}//end if clickAvail
	}
	
	function GetImage(currId, direction)
	{
	    $.AviaryAjaxShow();
	    //GetImage_onSuccess(null);
	    PageMethods.GetPrevNext(window._ownerid, currId, direction, GetImage_onSuccess, GetImage_onFailed);
	}
	function GetImage_onFailed(retval) { $.AviaryAjaxHide(); }
	
	function GetImage_onSuccess(retval) {
	
	    $.AviaryAjaxHide();
	/*
	    if (retval != '') {
		    jsonObject = eval('(' + retval + ')');
		}
		else {
            jsonObject = eval('(' + "{'id' : '0','name' : '','src' : 'images/layout/blank.gif','link' : '','more' : false}" + ')');		    
		}
    */
	    if (retval != '') {
		    var jsonObject = eval('(' + retval + ')');
		    //var jsonObject = eval('(' + "{'id' : '440204','name' : 'dunno.jpg','src' : 'http://rookery1.viary.com/storagev12/529500/529601_eb8f_550x900.jpg','link' : 'creation.aspx?fguid=0c50bc93-73fc-102b-bb94-dcd8a4ae7956','last' : 'true'}" + ')');
    		
		    var image_id = parseInt(jsonObject.id);

		    var imagename = jsonObject.name;
		    var imagesrc = jsonObject.src;
		    var imagelink = jsonObject.link;
		    var isMore = jsonObject.more;

		    if (currImage == "imgprev") {
		        movePrev(image_id, imagename, imagesrc, imagelink, true, isMore);

		    } else {
			    moveNext(image_id, imagename, imagesrc, imagelink, true, isMore);
		    }	
		}
	}
	function shiftNext()
	{
	
	}
	function shiftPrev()
	{
	
	}
	
    function moveNext(image_id,imagename,imagesrc,imagelink,isPrev,isMore)
    {
    	$("#creation-pager-thumbnails").children().removeClass("previous");
		$(".next").removeClass("next").addClass("previous");
		
        appendThumb(image_id,imagename,imagesrc,imagelink,isPrev,isMore);
    
	    $("#creation-pager-thumbnails")
		    .animate({
			    height:"60px",
			    width: parseInt($("#creation-pager-thumbnails").css("width")) + parseInt("70px"),
			    left: parseInt($("#creation-pager-thumbnails").css("left")) - parseInt("70px")},clearClick);
			    
	    if (!isMore)
	        disableNext();
    }
    function movePrev(image_id,imagename,imagesrc,imagelink,isPrev,isMore)
    {
    	$("#creation-pager-thumbnails").children().removeClass("next");
		$(".previous").removeClass("previous").addClass("next"); // make 'previous' -> 'next'
		
		prependThumb(image_id,imagename,imagesrc,imagelink,isPrev,isMore);
		
	    $("#creation-pager-thumbnails")
		    .animate({
			    height:"60px",
			    width: parseInt($("#creation-pager-thumbnails").css("width")) + parseInt("70px"),
			    left: parseInt($("#creation-pager-thumbnails").css("left")) + parseInt("70px")},clearClick);
			    
	    if (!isMore)
            disablePrev();
    }

    function enableNext()
    {
	    $(".creation-pager-navarrow-next").bind("click",clickHandler);
	    $(".creation-pager-navarrow-next").addClass("creation-pager-navarrow").removeClass("creation-pager-navarrow-disabled");
	    $(".creation-pager-navarrow-next img").attr("src","images/icons/next_12.png");
    }
    function enablePrev()
    {
	    $(".creation-pager-navarrow-previous").bind("click",clickHandler);	
	    $(".creation-pager-navarrow-previous").addClass("creation-pager-navarrow").removeClass("creation-pager-navarrow-disabled");
	    //really should just be setting a class to mute/unmute it
	    $(".creation-pager-navarrow-previous img").attr("src","images/icons/previous_12.png");
    }


    function appendThumb(image_id,imagename,imagesrc,imagelink,isNext,isMore)
    {
        if (imagelink != "") {
	        $("#creation-pager-thumbnails")
	            .append("<a id='creation-pager-thumbnails-" + image_id + "' class='" + (isNext?"next":"") + (isMore?"":" last") + "' style='width:60px;' href='" + imagelink + "' >" + 
				        "<img class='thumbnail avatar' height='54' width='54' alt='" + imagename + "' src='" + imagesrc + "'/>    " +
				        "</a>");
		} else {
			$("#creation-pager-thumbnails")
	            .append("<span id='creation-pager-thumbnails-" + image_id + "' class='" + (isNext?"next":"") + (isMore?"":" last") + "' style='width:60px;'>" + 
				        "<img class='thumbnail avatar' height='54' width='54' alt='" + imagename + "' src='" + imagesrc + "'/>    " +
				        "</span>");
		}
    }
    function prependThumb(image_id,imagename,imagesrc,imagelink,isPrev,isMore)
    {
        if (imagelink != "") {
	        $("#creation-pager-thumbnails")
		        .prepend("<a id='creation-pager-thumbnails-" + image_id + "' class='" + (isPrev?"previous":"") + (isMore?"":" first") + "' style='width:60px;' href='" + imagelink + "' >" + 
				        "<img class='thumbnail avatar' height='54' width='54' alt='" + imagename + "' src='" + imagesrc + "'/>    " + 
				        "</a>")
		        .css("left",parseInt($("#creation-pager-thumbnails").css("left")) - parseInt("70px"));
		} else {
		    $("#creation-pager-thumbnails")
		        .prepend("<span id='creation-pager-thumbnails-" + image_id + "' class='" + (isPrev?"previous":"") + (isMore?"":" first") + "' style='width:60px;'>" + 
				        "<img class='thumbnail avatar' height='54' width='54' alt='" + imagename + "' src='" + imagesrc + "'/>    " + 
				        "</span>")
		        .css("left",parseInt($("#creation-pager-thumbnails").css("left")) - parseInt("70px"));
		}
    }	
	
	function clearClick() {
		clickAvail = true;
	}
});

function disablePrev()
{
    $(".creation-pager-navarrow-previous").unbind("click");
    $(".creation-pager-navarrow-previous").toggleClass("creation-pager-navarrow").toggleClass("creation-pager-navarrow-disabled");
    $(".creation-pager-navarrow-previous img").attr("src","images/icons/previous_12_muted.png");
}
function disableNext()
{
    $(".creation-pager-navarrow-next").unbind("click");		
    $(".creation-pager-navarrow-next").toggleClass("creation-pager-navarrow").toggleClass("creation-pager-navarrow-disabled");
    $(".creation-pager-navarrow-next img").attr("src","images/icons/next_12_muted.png");
}