// JavaScript Document

jQuery.imageWidget = {
   
    options : {
        additionalParent : "#imageWidgetAdditionalImages", // Additional Images Container
        mainParent : ".imageWidgetMainContainer", // Main Image Container
        additionalImages : "#imageWidgetAdditionalImages", // Additional Images
        stepOut : "-60",
        moveAmount : "50",
        dropSpeed : "250",
        additionalParentObj : null,
        additionalParentWidth : 0,
        additionalParentHeight: 0,
        additionalParentSectionWidth : 0,
        additionalParentScrollArea : "20",
        additionalParentOffsetLeft : 0,
        additionalParentFullyOpen : false,
        scroller : null,
        pause : true,
        fullSpeed : true,
        currentMainID : 0
    },
   
    Init : function(){
    
        // Get jQuery object of the additional images container        
        jQuery.imageWidget.options.additionalParentObj = jQuery(jQuery.imageWidget.options.additionalParent);
        
        // Add click events on thumbnails, and remove style attr applied to the images by .NET bug
        var i = 0;
        jQuery.imageWidget.options.additionalParentObj.find("a").each(function()
        {
            jQuery(this)
                .children("img")
                .removeAttr("style")
                .end()
                .bind("click", { el:i }, function(event){
                    // Pause the scroller
                    jQuery.imageWidget.options.pause = true;
                    
                    // Fade out the currently showing image
                    jQuery(".imageWidgetMainImage:eq(" + jQuery.imageWidget.options.currentMainID + ")").fadeOut(500, function(){
                        // When faded out, set the current showing image to be the thumb element clicked
                        jQuery.imageWidget.options.currentMainID = event.data.el;
                        // Fade in the new image
                        jQuery(".imageWidgetMainImage:eq(" + event.data.el + ")").fadeIn(500);
                    });
                    
                    // Return false so the page doesnt change location
                    return false;
                });
            i++;
        });
        
        // Get additional images container height and width
        jQuery.imageWidget.options.additionalParentHeight = jQuery.imageWidget.options.additionalParentObj.height();
        jQuery.imageWidget.options.additionalParentWidth = jQuery.imageWidget.options.additionalParentObj.width();
        
        // Split additional images container into 5 sections left and right (for scrolling) and 3 center (for non-scrolling)
        jQuery.imageWidget.options.additionalParentSectionWidth = (jQuery.imageWidget.options.additionalParentWidth / 100) * jQuery.imageWidget.options.additionalParentScrollArea;
        
        // Get additional images container left offset
        jQuery.imageWidget.options.additionalParentOffsetLeft = jQuery.imageWidget.options.additionalParentObj.offset().left;
                
        // Set hover functions on the main image container
        jQuery(jQuery.imageWidget.options.mainParent).hover(
            function()
            {
                // Drop down the additional images container slightly
                jQuery.imageWidget.options.additionalParentObj.animate({top: jQuery.imageWidget.options.stepOut+"px"}, 250);
            },
            function()
            {
                // Stop any current animations on the additional images container
                jQuery.imageWidget.options.additionalParentObj.stop();
                // Hide the additional images container
                jQuery.imageWidget.options.additionalParentObj.animate({top:-jQuery.imageWidget.options.additionalParentHeight}, 250);
                // Dequeue any animations which are waiting to run
                jQuery.imageWidget.options.additionalParentObj.dequeue();
            }
        );
        
        // Set hover functions on the additional images container
        jQuery.imageWidget.options.additionalParentObj.hover(
            function()
            {
                // Drop container into full view
                jQuery(this).animate({ top: "0px" }, jQuery.imageWidget.options.dropSpeed, function(){
                    jQuery.imageWidget.options.additionalParentFullyOpen = true;
                    // Start timer
                    jQuery.imageWidget.options.scroller = setInterval("jQuery.imageWidgetScroller()",50);
                });
            },
            function()
            {
                jQuery.imageWidget.options.additionalParentFullyOpen = false;
                jQuery(jQuery.imageWidget.options.additionalImages).stop().dequeue();
                
                // Animate container back to its "just in view" mode
                jQuery(this).animate({ top: jQuery.imageWidget.options.stepOut+"px" }, jQuery.imageWidget.options.dropSpeed);
                // Dequeue any waiting animations on the container
                jQuery(this).dequeue();
                jQuery.imageWidget.options.pause = true;
                
                clearInterval(jQuery.imageWidget.options.scroller);
            }
        );
              
        // Set mousemove function on additional images container - scroll images left and right
        
        jQuery.imageWidget.options.additionalParentObj.mousemove(function(e){
            
            // Check container in full view
            if (jQuery.imageWidget.options.additionalParentFullyOpen)
            {   
                // Set scroller back to fullspeed
                jQuery.imageWidget.options.fullSpeed = true;
                        
                // Get mouse pos pixels from left side of additional images container
                mouseX = e.pageX - jQuery.imageWidget.options.additionalParentOffsetLeft;
                
                leftSection = jQuery.imageWidget.options.additionalParentSectionWidth
                rightSection = (jQuery.imageWidget.options.additionalParentWidth - 
                                jQuery.imageWidget.options.additionalParentSectionWidth)
                middle = jQuery.imageWidget.options.additionalParentWidth / 2;
                                            
                if (mouseX < leftSection)
                {   // Sroll images to the right - Go towards full width
                    jQuery.imageWidget.options.direction = "-";
                    jQuery.imageWidget.options.pause = false;
                }
                else if (mouseX > rightSection)
                {   // Scroll images to the left - Go towards 0
                    jQuery.imageWidget.options.direction = "+";
                    jQuery.imageWidget.options.pause = false;
                }
                else if( (mouseX > leftSection) && (mouseX < rightSection) )
                {   // In the middle section, find if its left or right of middle
                    if (mouseX < middle)
                    {   // Sroll images to the right - Go towards full width - slower
                        jQuery.imageWidget.options.direction = "-";
                        jQuery.imageWidget.options.pause = false;
                    }
                    else
                    {
                        // Scroll images to the left - Go towards 0 - faster
                        jQuery.imageWidget.options.direction = "+";
                        jQuery.imageWidget.options.pause = false;
                    }
                    // Set the scroller to go slower
                    jQuery.imageWidget.options.fullSpeed = false;
                }
                else
                {
                    jQuery.imageWidget.options.pause = true;
                }
            }   
        });
             
        setTimeout("jQuery.imageWidgetInitialHide()",1000);
        
        jQuery.imageWidget.options.additionalParentObj.find("a:first").trigger("click");
    }
}

jQuery.imageWidgetInitialHide = function()
{
    jQuery.imageWidget.options.additionalParentObj.animate({top:-jQuery.imageWidget.options.additionalParentHeight}, 1000);
}

jQuery.imageWidgetScroller = function(obj)
{
    if(!jQuery.imageWidget.options.pause)
    {
        if (jQuery.imageWidget.options.fullSpeed)
        {
            jQuery.imageWidget.options.additionalParentObj.animate(
            {
                scrollLeft:jQuery.imageWidget.options.direction+'=5px'
            },10);
        }
        else
        {
            jQuery.imageWidget.options.additionalParentObj.animate(
            {
                scrollLeft:jQuery.imageWidget.options.direction+'=1px'
            },10);
        }
    }
}