$(function(){

if (typeof self.galleryParams == 'undefined') {
    self.galleryParams = {
        panelWidth: 500,
        panelImageLimit: 12
    }
}

function Paginator() {
    this.init(); //Create HTML/CSS pagination structures
    if ( $('#sgThumbnails div').length == 1 ) { //Override panel functions if we've only got one
        this.getScrollPanel = function() {
            return $('#sgThumbnails div');
        }
        this.doPanelScroll = function() {}
    }
    this.initEvents(); //Event setup
    $('#sgThumbnails a').eq(0).click();  //Generate initial selection event
}

Paginator.prototype = {
    scrollPanel: function(direction) {
        var $scrollTo = this.getScrollPanel(direction);
        this.doPanelScroll($scrollTo);
        $scrollTo.children('a:first').click();
    },
    
    getScrollPanel: function(direction) {
        var $scrollTo = this.getScrollerFn(direction).call( $('div.current', '#sgThumbnails') );
        if ($scrollTo.length == 0) {
            return this.getScrollPanel(!direction);
        }
        return $scrollTo;
    },
    
    doPanelScroll: function($targetPanel) {
        $('#sgThumbnails').css({ marginLeft: -1*($('#sgThumbnails div').index($targetPanel)*galleryParams.panelWidth) });
        $('#sgThumbnails div').removeClass('current');
        $targetPanel.addClass('current');
    },
    
    scrollPhoto: function(direction) {
        var $scrollTo = this.getScrollerFn(direction).call( $('#sgThumbnails a.current'), 'a' );
        
        if ($scrollTo.length == 0) { //off the panel
            var $scrollPanel = this.getScrollPanel(direction);
            var selector = (direction == Direction.NEXT? ":first" : ":last");
            $scrollTo = $('a'+selector, $scrollPanel);
        }
        $scrollTo.click();
    },
    
    getScrollerFn: function(direction) {
        return direction == Direction.NEXT? $.fn.next : $.fn.prev;
    },
    
    init: function() {
        //Wrap div panel structure
        var flPanel = $("#sgThumbnails a").length/galleryParams.panelImageLimit;
        var panelCount = flPanel < 1? 1 : Math.floor(flPanel)+($("#sgThumbnails a").length%galleryParams.panelImageLimit);
        for (var i = 0; i < panelCount; i++) {
            var panelImages = $("#sgThumbnails a").slice(i*galleryParams.panelImageLimit, (i+1)*galleryParams.panelImageLimit);
            panelImages.wrapAll('<div></div>');
        }
        //Create blanks
        var blanksCount = galleryParams.panelImageLimit - $('#sgThumbnails div:last a').length;
        for (var i = 0; i < blanksCount; i++) {
            $('#sgThumbnails div:last').append("<span style='background:#d8d8d8;display:block;float:left;border:1px solid #666666;width:78px;height:78px;margin:1px'>&nbsp;</span>");
        }
        $('#sgThumbContainer').css('visibility','visible');
        //Set up panel scrollers
        if (panelCount > 1) {
            $("#arrowNavLeft").attr("src","/crp/images/leftBtn.jpg").wrap('<a href="#go-left" id="sgLeftNav" class="sgNav"></a>').removeAttr("id").hover(function(){ $(this).attr("src","/crp/images/leftBtn_over.jpg"); }, function(){ $(this).attr("src","/crp/images/leftBtn.jpg"); });
            $("#arrowNavRight").attr("src","/crp/images/rightBtn.jpg").wrap('<a href="#go-right" id="sgRightNav" class="sgNav"></a>').removeAttr("id").hover(function(){ $(this).attr("src","/crp/images/rightBtn_over.jpg"); }, function(){ $(this).attr("src","/crp/images/rightBtn.jpg"); });
        }
        //Initialize panel state
        $('#sgThumbnails div').eq(0).addClass('current');
    },
    
    initEvents: function() {
        var me = this;
        $("#sgThumbnails a").click(function(){
            if ( $(this).parent().not('.current') ) {
                me.doPanelScroll( $(this).parent() );
            }
        	$("#sgThumbnails a").removeClass("current");
        	$(this).addClass("current");
        
        	$("#sgDescription").html(this.title);
        	$("#sgPhoto img").attr("src",this.href);
        	return false;
        });

        $(".next").click(function() {
            me.scrollPhoto(Direction.NEXT);
            return false;
        });
        
        $(".prev").click(function() {
            me.scrollPhoto(Direction.PREVIOUS);
            return false;
        });

        $("#sgLeftNav").click( function() { me.scrollPanel(Direction.PREVIOUS);return false; } );
        $("#sgRightNav").click( function() { me.scrollPanel(Direction.NEXT);return false; } );
    }
}

var Direction = {
    PREVIOUS: false,
    NEXT: true
}

new Paginator();

});