﻿function ImageViewer(imgViewerId, imgInstanceClass, imgWidth, imgHeight, thumbSpacing, thumbCount)
{
    var imgViewer = imgViewerId;
    var imgViewerWidth = imgWidth;
    var imgViewerHeight = imgHeight;
    var imgInstance = imgInstanceClass;
    var thumbSpacing = thumbSpacing;
    var thumbLimit = thumbCount;
    var imgContainer;
    var thumbContainer;
    var thumbViewport;
    
    // Thumbnail Variables
    var containerWidth;
    var thumbWidth = (imgViewerWidth - ((thumbLimit - 1) * thumbSpacing))/ thumbLimit;
    var thumbRatio = (imgViewerWidth / thumbWidth);
    var thumbHeight = imgViewerHeight / thumbRatio;  
    var jumpDistance = (thumbWidth * thumbLimit) + (thumbSpacing * thumbLimit);
    
    var imgArr = new Array();
    var jumpQueue = new Array();
    var queueRunning = false;
    var currentImage = null;
    
    // Constructor
    
    var imgCounter = 0;
    
    createContainers();
    createImages();
    
    // Sets first image to current.
    selectImage(imgArr[0]);
    (currentImage.thumbImage).css("margin-left", "0px");
    (currentImage.bigImage).css("display", "block");
        
    function createContainers()
    {
        $(imgViewer).css("width", String(imgViewerWidth) + "px");
        $(String(imgViewer) + " " + String(imgInstance)).wrapAll("<div class=\"imgContainer\" style=\"width:" + String(imgViewerWidth) + "px;\">");
        $(imgViewer).append("<div class=\"thumbContainer\" style=\"width:" + String(imgViewerWidth) + "px;\"></div>");
      
        imgContainer = "div.imgContainer";
        thumbContainer = "div.thumbContainer";
        
        $(thumbContainer).wrap("<div class=\"thumbViewPort\"></div>");
        
        thumbViewport = "div.thumbViewPort";
    }
    
    function createImages()
    {
        $(imgViewer).find(imgInstance).each(function(evt){
            var img = new Image($(this));
            imgArr.push(img);
        });
        
        if(imgArr.length > thumbLimit)
        {
            createSlider();    
        }
    }
    
    function createSlider()
    {
        var slideInteger = (thumbLimit * thumbWidth) + (thumbLimit * thumbSpacing);
        containerWidth = (thumbWidth * imgArr.length)  + ((imgArr.length - 1 ) * thumbSpacing);
        

        $(thumbViewport).css({'overflow' : 'hidden', 'width' : String(imgViewerWidth) + "px", 'position' : 'relative', 'height' : String(Math.round(thumbHeight)) + "px"});
        $(thumbContainer).css({"width" : String(containerWidth) + "px", "position" : "absolute", "left" : "0px"});
        
        $(imgViewer).append("<div class=\"slideControl\"><a href=\"#\" class=\"viewerScrollLeft\">Left</a><a href=\"#\" class=\"viewerScrollRight\">Right</a></div>");
    
        $(String(imgViewer + " a.viewerScrollLeft")).bind("click", function(evt) {
                evt.preventDefault();
                
                var operation = function() { 
                    if(checkPosition("back")) { 
                        $(thumbContainer).animate({"left" : String(getCurrentPosition() + jumpDistance + "px")}, function(evt) { runQueue();})
                        }
                        else
                        {
                            runQueue();
                        }
                    };
                jumpQueue.push(operation);
                startQueue();
            });
            
        $(String(imgViewer + " a.viewerScrollRight")).bind("click", function(evt) {
                
                evt.preventDefault();
                
                var operation = function() { 
                    if(checkPosition("forward")) {
                        $(thumbContainer).animate({"left" : String(getCurrentPosition() - jumpDistance + "px")}, function(evt) { runQueue();}) 
                        }
                        else
                        {
                            runQueue();
                        }
                    };
                jumpQueue.push(operation);
                startQueue();
            });
    }
    
    function Image(htmlObj)
    {
        var bigImg = htmlObj;
        var thumbImg = bigImg.clone();
        var thisImage = this;
        
        this.bigImage = bigImg;
        this.thumbImage = thumbImg;
                   
        // Apply CSS
        
        bigImg.css("display", "none");
        thumbImg.css({"border" : "2px solid #FFFFFF", "margin-left" : String(thumbSpacing) + "px"});
        
        // Apply Attributes (-4 for border).
        thumbImg.attr("width", Math.round(thumbWidth) -4);
        thumbImg.attr("height", Math.round(thumbHeight) -4);
        
        $(thumbContainer).append(thumbImg);
        
        thumbImg.bind("click", function(evt)
        {
            selectImage(thisImage);
        });   
    }
    
    function selectImage(image)
    {
        if(currentImage != null)
        {
            (currentImage.bigImage).css("display", "none");
            (currentImage.thumbImage).css("border", "2px solid #FFFFFF");
            
        }
        
        (image.bigImage).css("display", "block");
        (image.thumbImage).css("border", "2px solid #F01910");
        currentImage = image;      
    }
    
    function startQueue()
    {
        if(!queueRunning)
        {
           runQueue();
        }
    }
    
    function runQueue()
    {
        if(jumpQueue.length > 0)
        {
            queueRunning = true;
            
            (jumpQueue.shift())();
        }
        else
        {
            queueRunning = false;
        }
    }
           
    function checkPosition(direction)
    {
        switch(direction)
        {
            case "back" : if((getCurrentPosition() + jumpDistance) > 0 ) { return false };
            break;
            case "forward" : if((getCurrentPosition() - jumpDistance) < (0 - containerWidth)){ return false };
            break;
            default : alert(direction + " is not a valid instruction, (function checkPosition(direction)).");
       }
       
       return true;
    }
    
    function getCurrentPosition()
    {
        var leftPos = $(thumbContainer).css("left");
        leftPos = leftPos.substr(0, (leftPos.length - 2));
        
        return Number(leftPos);
    }
}