$.showcase = {
    idx: 0,
    intervalID: 0,
    opacity: 0.5,
    fadeDuration: 500,
    viewport: {},
    lrgImgDimensions: {},
    currIndex: 1,
    thumbcount: 0,
    lrgImage: null,
    imageContainer: null,
    init: function()
    {
    	$.showcase.build(); 
        //Preload First Image to get Popup Dimensions correct
        var  preImage = new Image();
        preImage.onload = function()
        {
            $.showcase.lrgImgDimensions = 
            {
                width: preImage.width,
                height: preImage.height
            };
                
            $('a.slideShowTrigger').click(function()
            {
            	   
                $.showcase.showShowcase();
                //return false;
            });
        }
        preImage.src = slides[0].lrg_image;
    },
    build: function()
    {   
        $.showcase.viewport = 
         {
            left:         $(window).scrollLeft(),
		    top:          $(window).scrollTop(),
		    clientWidth:  $(window).width(),
			clientHeight: $(window).height(),
			scrollWidth:  $(document).width(),
			scrollHeight: $(document).height()
         };         
        
        //Overlay Container
        var overlay = document.createElement('div');
        $(overlay).attr('id', 'showhomeOverlay');
        $(overlay).css(
        {
            display: 'none',
            position: 'absolute',
            top: 0,
            left: 0,
            width: $.showcase.viewport.scrollWidth + 'px',
            height: $.showcase.viewport.scrollHeight + 'px',
            opacity: $.showcase.opacity
        });
        
        //Image Outer Container
        var outerContainer = document.createElement('div');
        $(outerContainer).attr('id', 'showhomeOuterContainer');
        $(outerContainer).css(
        {
            position: 'absolute',
            top: -2000 + 'px',
            left: 0,
            width: $.showcase.viewport.scrollWidth + 'px'
            
        });
       
        //Add Close Link
        var closeLink = document.createElement('a');
        $(closeLink).attr(
        {
            id: 'closeLink',
            href: '#',
            title: 'Close'
        });
        $(closeLink).html('Close');
        $(closeLink).click(function()
        {
            $.showcase.closeShowcase();
            return false;
        });
        
       //Image Container
       var container = document.createElement('div');
       $(container).attr('id', 'showhomeContainer');
       $(container).css(
       {
            position: 'relative'
       });
       $.showcase.imageContainer = document.createElement('div');
       $($.showcase.imageContainer).attr('id', 'imageContainer');
       
       var caption = document.createElement('p');
       $(caption).attr(
       {
          id: 'galleryCaption',
          align: 'center'
       });
       caption.innerHTML = '<b>'+slides[0].title+'</b>';
       
              
       //Next Link
       var nextLink = document.createElement('a'); 

       $(nextLink).attr(
       {
           href: '#',
           id: 'nextLink'  
       });

       nextLink.innerHTML ="Next"; 
       
       $(nextLink).click(function () {
       	$.showcase.nextImage();
       	return false;
       });
       
       
       
       //Previous Link
       var prevLink = document.createElement('a'); 

       $(prevLink).attr(
       {
           href: '#',
           id: 'prevLink'  
       });

       prevLink.innerHTML ="Prev"; 
       
       $(prevLink).click(function () {
       	$.showcase.prevImage();
       	return false;
       });

       
       
       $.showcase.lrgImage = document.createElement('img');
       
       $($.showcase.lrgImage).attr(
       {
           id:      'showhomeLrgImage',
           src:     slides[0].lrg_image,
           width:   $.showcase.lrgImgDimensions.width,
           height:  $.showcase.lrgImgDimensions.height,
           alt:     ''
       });
             
       //Image Scroller Container
       var scrollContainer = document.createElement('div');
       $(scrollContainer).attr('id', 'showhomeScrollerContainer');
       
       var scroller = document.createElement('div');
       $(scroller).attr('id', 'scroller');
       
       
       var thumbsList = document.createElement('ul');
       $(thumbsList).attr('id', 'showcaseThumbs');
       
       var thumbs = '';
       for(i=0; i< slides.length; i++)
       {
           thumbs +='<li><a href="' + slides[i].lrg_image + '" title="'+slides[i].title+'"><img src="' + slides[i].tb +'" width="'+ slides[i].width +'" height="' + slides[i].height + '" alt=""></a></li>\n';
       } 
       
       //previous carosel (thumb list)
       var prev = document.createElement('a');
       $(prev).attr(
       {
            href: '#',
            id: 'prev'  
       });
       //next carosel (thumb list)
       var next = document.createElement('a');
       $(next).attr(
       {
            href: '#',
            id: 'next'  
       });       

       //Create Dialog append all elements to the end of the body
        $('body').append(overlay);        
        $(outerContainer).append(container);
        $(thumbsList).append(thumbs);
        $(scroller).append(thumbsList);
        if(slides.length>1)
        {
            $(scrollContainer).append([prev, scroller, next]);
        }
        $($.showcase.imageContainer).append($.showcase.lrgImage);
        $(container).append([closeLink, $.showcase.imageContainer, caption, nextLink, prevLink, scrollContainer]);
        $('body').append(outerContainer);
        
        //Setup Carousel plugin
        $(scroller).jCarouselLite({
            btnNext: "#next",
            btnPrev: "#prev",
            visible: 4,
            speed: 800
        });
        //Add triggers to carousel links
        $("#showcaseThumbs a").click(function() 
        {
            var src = $(this).attr('href');
            var title = $(this).attr('title');
            $('#galleryCaption').html('<b>'+title+'</b>')
            $.showcase.loadImage(src);
            
            //Figure out the index
        	var indx = 1;
        	$.each(slides, function(i, val)
        	{
        		if(slides[i].lrg_image == src)
        		{
        			 $.showcase.currIndex = indx;
        		}
        		indx++;
            });
            
            
            return false;
        });
        
        //Set image container height
        $($.showcase.imageContainer).css(
        {
            height:  $.showcase.lrgImgDimensions.height
        });
               
    },
    loadImage: function(src)
    {
        var newImage = new Image();
        newImage.onload = function()
        {
            $($.showcase.lrgImage).hide();
            $($.showcase.imageContainer).animate(
            {
                height: newImage.height
            }, $.showcase.fadeDuration);
            
            $($.showcase.lrgImage).attr(
            {
                src: src,
                width: newImage.width,
                height: newImage.height
            })
            .fadeIn($.showcase.fadeDuration);
        }
        newImage.src = src;
    },
    showShowcase: function()
    {
        $('#showhomeOverlay').css(
        {
            top: $.showcase.viewport.top + 'px'
        })
        .fadeIn($.showcase.fadeDuration, 
        function()
        {
            $('#showhomeOuterContainer').hide();
            $('#showhomeOuterContainer').css(
            {
                top: $.showcase.viewport.top + 'px'   
            })
            .fadeIn($.showcase.fadeDuration);
        });
    },
    closeShowcase: function()
    {
        $('#showhomeOuterContainer').fadeOut($.showcase.fadeDuration, 
        function()
        {
            $('#showhomeOverlay').fadeOut($.showcase.fadeDuration);
        });        
    },
    nextImage: function()
    {
    	
    	if($.showcase.currIndex >= slides.length)
    	{
    		$.showcase.currIndex = 0;
    	}
    	
    	var indx = 0;
    	$.each(slides, function(i, val)
        {
    		if(indx == $.showcase.currIndex)
    		{
    			$.showcase.loadImage(slides[i].lrg_image);
    			//$.showcase.loadImage(slides[i].lrg_image);
                $('#galleryCaption').html('<b>'+slides[i].title+'</b>');
    		}
    		indx++;
        });
    	
    	$.showcase.currIndex = $.showcase.currIndex + 1;

    },
    
    prevImage: function()
    {
    	
    	if($.showcase.currIndex < 2)
    	{
    		$.showcase.currIndex = slides.length + 1;
    	}
    	
    	var indx = 0;
    	$.each(slides, function(i, val)
        {
    		if(indx == $.showcase.currIndex - 2)
    		{
    			$.showcase.loadImage(slides[i].lrg_image);
                $('#galleryCaption').html('<b>'+slides[i].title+'</b>');
    		}
    		indx++;
        });
    	
    	$.showcase.currIndex = $.showcase.currIndex - 1;

    }
};