/// <reference path="jquery/jquery-1.3.2-vsdoc2.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(this).attr("data"));

        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() {
            panelLeft.isReady = true;
            ToggleLoadedPanels(panelLeft, panelRight, panelBottom);
        });
        LoadPanel(panelRight, qsRight, function() {
            panelRight.isReady = true;
            ToggleLoadedPanels(panelLeft, panelRight, panelBottom);
        });
        LoadPanel(panelBottom, qsBottom, function() {
            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) {
        panelLeftObject.toggle("drop", { direction: "left" }, 500); //TogglePanel(panelLeftObject, "left");
        panelRightObject.toggle("drop", { direction: "right" }, 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
    }, 500);
}

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