/// <reference path="jquery/jquery-1.5-vsdoc.js" />
/// <reference path="jquery/plugins/jQuery.Hashtable-1.1.js" />

jQuery.noConflict();
jQuery(document).ready(function() {
    /***************************************/
    /* SLIDER CONTROL                      */
    /***************************************/
    var SlidingPanel = jQuery("#SlidingPanel");
    var SliderControl = jQuery('#SliderControl');
    var galleryWidth = jQuery("#GalleryContainer").width();
    var thumbnailsWidth = jQuery("#SlidingPanel > li").outerWidth(true);
    var thumbnailsCount = jQuery("#SlidingPanel > li").length;
    var itemsWidth = (thumbnailsWidth * thumbnailsCount) - galleryWidth;

    SliderControl.slider(
        {
            animate: true,
            max: itemsWidth,
            min: 0,
            slide: slideFunction,
            stop: stopFunction
        });

    function slideFunction(event, ui) {
        SlidingPanel.css('left', '-' + ui.value + 'px');
    }

    function stopFunction(event, ui) {
        SlidingPanel.animate({
            'left': '-' + ui.value + 'px'
        }, 500, 'linear');
    }

    /***************************************/
    /* SLIDING PANELS                      */
    /***************************************/
    jQuery(".cmdShowPanel").click(function() {
        //console.log("jQuery(\".cmdShowPanel\").click()");
        //console.log(jQuery(this).attr("data"));

        var Loading = jQuery("<div id=\"Loading\"></div>");
        var Mask = jQuery("<div id=\"Mask\"></div>");
        jQuery("#GalleryContainer").append(Mask);
        jQuery("#GalleryContainer").append(Loading);
        Mask.delay(200).fadeTo(500, 0.5);
        Loading.delay(250).fadeIn(500);

        var panelLeft = jQuery("#PanelLeft");
        var panelRight = jQuery("#PanelRight");
        var panelBottom = jQuery("#PanelBottom");
        var itemID = jQuery(this).attr("value");

        var qsRight = "mid=" + ModuleId + "&itemid=" + itemID + "&panelid=PanelRight";
        var qsLeft = "mid=" + ModuleId + "&itemid=" + itemID + "&panelid=PanelLeft";
        var qsBottom = "mid=" + ModuleId + "&itemid=" + itemID + "&panelid=PanelBottom";

        LoadPanel(panelLeft, qsLeft, function() {
            //console.log("loaded panelLeft");
            panelLeft.isReady = true;
            ToggleLoadedPanels(panelLeft, panelRight, panelBottom);
        });
        LoadPanel(panelRight, qsRight, function() {
            //console.log("loaded panelRight");
            panelRight.isReady = true;
            ToggleLoadedPanels(panelLeft, panelRight, panelBottom);
        });
        LoadPanel(panelBottom, qsBottom, function() {
            //console.log("loaded panelBottom");
            panelBottom.isReady = true;
            ToggleLoadedPanels(panelLeft, panelRight, panelBottom);
        });
        SliderControl.slider("disable");
    });

});            //End jQuery(document).ready()

function ToggleLoadedPanels(panelLeftObject, panelRightObject, panelBottomObject) {
    if (panelLeftObject.isReady
        && panelRightObject.isReady
        && panelBottomObject.isReady) {
        jQuery("#Mask").remove();
        jQuery("#Loading").remove();
            panelLeftObject.toggle("drop", { direction: "left", distance: 150 }, 500); //TogglePanel(panelLeftObject, "left");
            panelRightObject.toggle("drop", { direction: "right", distance: 150 }, 500, function() {//TogglePanel(panelRightObject, "right");
            jQuery("#PanelBottom").fadeIn(); //.toggle("blind") <-- caused CSS to drop out on pane!?!
            for (var i in SlidingGallery_SlideComplete.items) {
                //console.log("SlidingGallery_SlideComplete[" + i + "]()");
                SlidingGallery_SlideComplete.items[i]();
            }
        });
        panelLeftObject.isReady = false;
        panelRightObject.isReady = false;
    }
}

function TogglePanel(panelObject, directionOfMotion) {

    panelObject.toggle("drop",
    {
        direction: directionOfMotion,
        distance: 200
    }, 250);
}

function LoadPanel(panelObject, querystring, CallBackFunction) {
    /*
    panelObject.load(
    ModulePath + "ContentService.aspx",
    querystring,
    CallBackFunction()
    )*/

    jQuery.get(
        ModulePath + "ContentService.aspx",
        querystring,
        function(responseText) {
            panelObject.html(responseText);
            CallBackFunction();
        },
        "html"
    );
}