$(document).ready(init);

var _pageIndex = 0;
var _pageSize = 7;
var _pageCount = 0;
var _allImageUrls = null;
var _slideIntervalId;
var _slideshowOn = false;

function loadSet(selectedImage) {
    $('#thumbs').hide();
    $('#loading').show();

    if (!_allImageUrls) return;

    var dest = [];
    var startIndex = _pageIndex * _pageSize;
    if (_pageIndex == _pageCount - 1)
        copyArray(_allImageUrls, startIndex, (_allImageUrls.length - startIndex), dest);
    else
        copyArray(_allImageUrls, startIndex, _pageSize, dest);
    
    //CREATE THUMBNAIL IMAGES
    $('#thumbs').empty();
    var thumbHTML = "";
    for (var i = 0; i <  dest.length; i++)
        thumbHTML += getThumbHTML( (_pageIndex * _pageSize) + (i + 1) );
    $('#thumbs').html(thumbHTML);
    $('#thumbs, #loading').width(dest.length * 60);

    bindThumbEvents();

    for (var i = 0; i < dest.length; i++) {
        $('#thumbs div.thumb a img:eq(' + i + ')').attr('src', 'ShowImage.aspx?w=50&h=50&img=' + dest[i])
        .attr('image-name', dest[i]);
        
        $('#thumbs div.thumb:eq(' + i + ')').show();
    }
    $('#thumbs div.thumb:gt(' + (dest.length - 1) + ')').hide();

    if (!selectedImage) selectedImage = 0;

    if (selectedImage == 'last') 
        showImage(dest.length - 1);
    else if (selectedImage) 
        showImage(selectedImage);
    else
        showImage(0);

    setTimeout(function() {
        $('#loading').hide();
        $('#thumbs').show();
    }, 1000);
}

function copyArray(src, start, count, dest) {
    var d = 0;
    for (var i = start; i < (start + count); i++)
        dest[d++] = src[i];
}

function init() {
    $("#img-container").css("visibility","visible");
    
    _allImageUrls = $("#__imageNames").val().split(',');
    _pageCount = Math.ceil(_allImageUrls.length / _pageSize);
    
    $('#prevPage').bind('click', function(e, selectedImage) {
        if (_pageIndex > 0)
            _pageIndex--;
        else
            _pageIndex = _pageCount - 1;

        loadSet(selectedImage);
    });
    $('#nextPage').bind('click', function(e, selectedImage) {
        if (_pageIndex < _pageCount - 1)
            _pageIndex++;
        else
            _pageIndex = 0;
            
        loadSet(selectedImage);
    });    

    $('#slideshow-controls a.play').bind('click', function(e) {
        if (!_slideshowOn) {
            $(this).html('Stop');
            _slideIntervalId = setInterval(function() {
                $('#slideshow-controls a.next').trigger('click');
            }, 3000);
            _slideshowOn = true;
        } else 
            stopSlideshow();
    });

    $('#slideshow-controls a.prev').bind('click', function(e) {
        var active = $('#thumbs div.thumb[active=Y]');
        var prev = active.prev();
        
        if (prev.length == 0) 
            $('#prevPage').trigger('click', 'last');
        else
            prev.find('a').trigger('click');
    });

    $('#slideshow-controls a.next').bind('click', function(e) {
        var active = $('#thumbs div.thumb[active=Y]');
        var next = active.next();

        if (next.length == 0)
            $('#nextPage').trigger('click', 0);
        else
            next.find('a').trigger('click');
    });

    $('#slideshow a').bind('click', function(e) {
        $('#slideshow-controls a.next').trigger('click');
    });

    _pageIndex = 0;
    loadSet(0);
}

function showImage(index) {
    var thumb = $('#thumbs div.thumb:eq(' + index + ') a');
    if (thumb.length != 0)
        thumb.trigger('click');
}

function stopSlideshow() {
    $('#slideshow-controls a.play').html('Play');
    clearInterval(_slideIntervalId);
    _slideshowOn = false;
}

function getThumbHTML(index) {
    var html = "<div class='thumb'>";
    html += "<a id='hyp' index='"+index+"' runat='server' href='#' style='display:block; text-align:center; margin:auto'>";
    html += "<img id='img' runat='server' src='' alt='' height='50' />";
    html += "</a>";
    html += "</div>";

    return html;
}

function bindThumbEvents() {
    $('#thumbs div.thumb a').unbind('click').bind('click', function(e, ss) {
        if (e.originalEvent)
            stopSlideshow();

        var a = $(this);
        $('#thumbs div.thumb').removeAttr('active').removeClass('active');
        
        var thumbImg = a.find('img');
        var img = $('#img');
        var container = $("#img-container");
        img.attr('src', 'ShowImage.aspx?img=' + thumbImg.attr('image-name') + '&w=' + container.width() + '&h=' + container.height());
        
        a.parent(':first').attr('active', 'Y').addClass('active');
        
        $('#imageXofN').html($(this).attr('index') + ' of ' +  (_allImageUrls.length));
        //$('#thumbs div.thumb[active=Y]').css({ opacity: 1 });
        //$('#thumbs div.thumb[active!=Y]').css({ opacity: 0.50 });
    });
}