﻿$(document).ready(function() {
    var imageCount = 0;
    var images = [];
    var imageTitles = [];
    var galDivShown = false;
    var currentImg = 0;
    var loaded = false;
    $("#galleryTable img").hover(function() {
        $("#galleryTableDescription").text($(this).attr("alt"));
    }, function() {
        $("#galleryTableDescription").text("Click on an image to enlarge.");
    });
    $(window).bind('load',
	function() {
	    //alert('ready');
		createImgArray();
		
		origHeight = $('#content_main').height();
		origWidth = $('#content_main').width();
		//alert(origHeight);
		curHeight = origHeight;
		curWidth = origWidth;
	});

    createImgArray = function()
    {
	
	    imageCount = $('.lightbox').length;
	    imgCounter = 0;
	
	    $('.lightbox').each( function(){
		    var $img = $(this).children();
			
			imageTitles[imgCounter] = $($img[0]).attr("alt");
			var tempImg = new Image();
			
			tempImg.src = $(this).attr("id");
			
			images[imgCounter] = tempImg;
			imgCounter++;
			
		});
        loaded = true;
    }
    
    getImageSize = function(imgObj)
    {
	    var tempWidth = imgObj.width;
	    var tempHeight = imgObj.height;
    	
	    var imgSizes = new Array(tempWidth,tempHeight);
    	
	    return imgSizes;
    }

    //set the image path
    setGalImage = function (imgObj, width, height)
    {
	    $('#galImg').attr("src", imgObj.src);
	    //$('#galImg').attr("height", height);
	    //$('#galImg').attr("width", width);
    }
    
    showThisImg = function(id) {
        if(!loaded) 
            return;
        if(galDivShown) {
            $("#galImg").fadeOut("def", function() {
                var tmpSize = getImageSize(images[id]);
                var imgWidth = tmpSize[0];
                var imgHeight = tmpSize[1];
                setGalImage(images[id],imgWidth,imgHeight);
                //console.log(" main: " + $('#content_main').height());
                //console.log(" img: " + imgHeight);
                //var contentHeight = $('#content_main').height();
                if(origHeight > (imgHeight + 60)) {
                    $("#galDiv").height(origHeight);
                } else {
                    $('#content_main').height(imgHeight + 60);                    
                    $("#galDiv").height(imgHeight + 60);
                }
                /*
                if($('#content_main').height() <= (imgHeight + 60)) {
                    $('#content_main').height(imgHeight + 60);                    
                    $("#galDiv").height(imgHeight);
                } else {
                        $("#galDiv").height($('#content_main').height());
                }
                */
                //if( imgHeight)
                
                //$("#galDiv").width(imgWidth);
                $("#insideImg").width(imgWidth);
                $("#insideImg").height(imgHeight);
                //}
                $("#galleryImageTitle").text(imageTitles[id]);
                $("#galImg").fadeIn("def");
                currentImg = id;
            });
        } else {
            var tmpSize = getImageSize(images[id]);
            var curHeight = tmpSize[1];
            var imgWidth = tmpSize[0];
            var imgHeight = tmpSize[1];
            
            $('#content_main').prepend('<div id="galDiv" style="width:'+origWidth+'px; height:'+imgHeight+'px; text-align:center; background-color:#F3F3F3; position:absolute; z-index:99; vertical-align:middle;"><div id="galContainer"><div id="insideImg" style="width:'+imgWidth+'px; height:'+imgHeight+'px; text-align:center; margin:10px auto; position:relative; vertical-align:middle;"><div style="position:relative;"><span onClick="showPrevImg();" style="cursor:pointer;"><img src="/images/gallery/previous.png" alt="previous" /></span><img src="/images/gallery/divide.png" alt="|" /><span onClick="showNextImg();" style="cursor:pointer;"><img src="/images/gallery/next.png" alt="next" /></span></div><div id="galleryImageTitle" class="spotlight_title" style="position:relative;height:20px"></div><div onClick="removeGalleryDiv();" style="cursor:pointer; float:right; position:absolute; top:41px; right:0%"><img src="/images/gallery/close.png" alt="close" /></div><img id="galImg" style="display:none; margin: 0px auto;" /></div></div></div>');
            setGalImage(images[id],imgWidth,imgHeight);
            /*
            if($('#content_main').height() <= (imgHeight + 60)) {
                $('#content_main').height(imgHeight + 60);                    
                $("#galDiv").height(imgHeight);
            } else {
                    $("#galDiv").height($('#content_main').height());
            }*/
            if(origHeight > (imgHeight + 60)) {
                $("#galDiv").height(origHeight);
            } else {
                $('#content_main').height(imgHeight + 60);                    
                $("#galDiv").height(imgHeight + 60);
            }
            $("#insideImg").width(imgWidth);
            $("#insideImg").height(imgHeight);
            //}
                
            $("#galleryImageTitle").text(imageTitles[id]);
            $("#galImg").fadeIn("slow");
            currentImg = id;	        
            galDivShown = true;
        }
    }    
    
    showNextImg = function()
    {
	    if(currentImg == (imageCount - 1))
	    {
		    currentImg = 0;
	    }
	    else
	    {
		    currentImg = parseInt(currentImg + 1);
	    }
    	
	    showThisImg(currentImg);
    }

    showPrevImg = function()
    {
	    if(currentImg == 0)
	    {
		    currentImg = (imageCount - 1);
	    }
	    else
	    {
		    currentImg = parseInt(currentImg - 1);
	    }
    	
	    showThisImg(currentImg);
    }

    removeGalleryDiv = function() {
        $("#galImg").fadeOut("slow",function() {
            $("#galDiv").remove();
            galDivShown = false;
            $('#content_main').height(origHeight);
		    $('#content_main').width(origWidth);
        });
    }
});
//<img id="galImg" style="display:none; margin: 0px auto; width:100%;" />