var currentWall = 1;
var duration = 1500;
var panelWidth = 1050;
var currentModal;
var currentId;
var loadedWalls = new Array();
var lastIndexLoaded;
var lastRevIndexLoaded;
var nextBackLoadedWall;
var lastBackLoadedWall;

$(document).ready(function() {

    $('img.right').click(function() {
        if (currentWall == totalWalls) {
            currentWall = 1;
        } else {
            currentWall++
        }
        $('.scroll').scrollTo($('#panel_' + currentWall),
            {
                duration: duration
            });
        GetNextWall();
        updateCounter();
    });
    $('img.left').click(function() {
        if (currentWall == 1) {
            currentWall = totalWalls;
        } else {
            currentWall--;
        }
        if (!loadedWalls.contains(currentWall)) {
            GetPrevWall();
        }

        var width = 890;
        var scroll;
        if (currentWall == totalWalls) {
            if (loadedWalls.length == totalWalls) {
                scroll = width * (loadedWalls.length - 1) + 'px';
            } else {
                scroll = width * loadedWalls.length + 'px';
            }
            $('.scroll').scrollTo(scroll, { axis: 'x', duration: duration });
        } else {
            scroll = ((currentWall - 1) * width) + 'px';
            $('.scroll').scrollTo(scroll, { axis: 'x', duration: duration });
        }


        GetPrevWall();
        updateCounter();
    });

    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('.window').hide();
    });

    $("#OuterDiv").after("<div id=\"mask\"></div>");
    $("#mask").after("<div class=\"ModalPanelContainer\"><div class=\"ModalPanel\"></div></div>");
    
    //if mask is clicked
    $('.ModalPanelContainer').click(function(e) {
        closeModal(e);
    });
    $('.ModalPanel').click(function(e) { return false });

    moveModalWindows();
    $('.ModalPanel').ajaxComplete(moveModalWindows)


    panelWidth = ($('.scrollContainer div.panel').width() + 100);

    updateCounter();

    ap_registerPlayers();

    $(window).bind("resize", setModalBackgroundSize);

    for (i = 0; i <= lastForwardLoadedWall - 1; i++) {
        loadedWalls[i] = i + 1;
    }

    lastIndexLoaded = lastForwardLoadedWall;
    nextBackLoadedWall = totalWalls;

    if (totalWalls > 2) {
        GetPrevWall();
        if (totalWalls > 3) {
            GetPrevWall();
        }
    }    
    
});

function GetNextWall() {
    if (lastForwardLoadedWall < totalWalls) { //see if there are more walls
        if (!loadedWalls.contains(lastForwardLoadedWall + 1)) { //see if the next has been loaded already
            $.ajax({
                type: "POST",
                url: "gallery.aspx/GetNextGalleryWall",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    newWall = msg;
                    lastForwardLoadedWall++;
                    loadedWalls[loadedWalls.length] = lastForwardLoadedWall;

                    //find the panel this new wall needs to be inserted after
                    var prevPanel = lastForwardLoadedWall - 1;
                    var panelId;
                    do {
                        if (loadedWalls.contains(prevPanel)) {
                            panelId = "#panel_" + prevPanel;
                            break;
                        }
                        prevPanel--;
                    } while (prevPanel > 0)
                    
                    //insert the new wall                    
                    $(panelId).after(msg.d)
                    $('.scrollContainer').css('width', (panelWidth * (loadedWalls.length + 1)));
                    ap_registerPlayers();
                }
            });
        }
    }
}

function GetPrevWall() {
    if (!loadedWalls.contains(nextBackLoadedWall)) {
        $.ajax({
            type: "POST",
            url: "gallery.aspx/GetPrevGalleryWall",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                newWall = msg;                
                loadedWalls[loadedWalls.length] = nextBackLoadedWall;
                lastBackLoadedWall = nextBackLoadedWall;

                //find the panel this new wall needs to be inserted after
                var prevPanel = nextBackLoadedWall - 1;
                var panelId;
                do {
                    if (loadedWalls.contains(prevPanel)) {
                        panelId = "#panel_" + prevPanel;
                        break;
                    }
                    prevPanel--;
                } while (prevPanel > 0)
                
                //insert the new wall       
                $(panelId).after(msg.d)
                $('.scrollContainer').css('width', (panelWidth * (loadedWalls.length + 1)));
                ap_registerPlayers();

                nextBackLoadedWall--;
            }
        });        
    }
}

function updateCounter()
{
    $('.counterContainer').text("Wall " + currentWall + "/" + totalWalls);
}

function closeModal(e)
{
    $('#mask').hide();
    $('.ModalPanelContainer').hide();
    $('.ModalPanel').hide();
    $('.window').css("display", "none");
    $(currentModal).css("display", "none").css("visibility", "hidden");
    var audioplayer = document.getElementById("audioplayer" + currentId)
    if (audioplayer != null) {
        audioplayer.SetVariable("closePlayer", 1);	               	        	        
    }
}

function setModalBackgroundSize() {
    
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        
}

function showModal(e, id)
{                                    
    //Cancel the link behavior
    try { 
        e.preventDefault(); 	            
    } catch (err) {	            
        e.returnValue = false;
    };
    //Get the A tag	        
    //var modal = $("#" + id).attr('href');
    currentId = id.substring(2);
    var modal = $("#" + currentId);
    	        
    //transition effect		
    $('#mask').fadeIn(1000);	
    $('#mask').fadeTo("slow",0.8);		        
    
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
    	             
    $('.ModalPanelContainer').show();
    $('.ModalPanel').show();	        
    
    //Set the popup window to center
    $(modal).css('top',  (winH/2-$(modal).height()/2)-130);
    $(modal).css('left', "0"); //((winW/2)-590)/2);
    $(modal).css('z-index','9999');	  
    $(modal).css("visibility", "visible");      
    
    //transition effect
    if ($.browser.msie) {	            
        $(modal).css('display','block');	        
    }
    $(modal).fadeIn(2000);

    currentModal = modal;

    setModalBackgroundSize();    
}

function moveModalWindows()
{
    $('.panel-section .window').each(function() {
        var item = $(this);
        $(this).remove();
        item.appendTo('.ModalPanel');
    });
}


Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}