// Floating Sidebar Menu Script from Flooble.com
// For more information, visit 
//  http://www.flooble.com/scripts/sidebar.php
// Copyright 2003 Animus Pactum Consulting inc.
//---------------------------------------------------------
(function(context, $) {

    function renderCss(slidePanel) {
        var head = document.getElementsByTagName("head")[0];
        var link = document.createElement("link");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        link.setAttribute("media", "all");
        link.setAttribute("href", slidePanel.cssPath + "slidePanel." + slidePanel.skin + ".css");
        head.appendChild(link);
    }

    var index = 0;
    var slideOutContains = '';

    var SlidePanel = function(options) {
        options = options || {};
        this.id = options.id || "slidePanel" + (++index).toString();
        this.classPrefix = options.classPrefix || "sp";
        this.skin = options.skin || "default";
        this.cssPath = options.cssPath || "";
        this.top = options.top || 85;
        this.label = options.label || 'more';
        this.openLabel = options.openLabel || 'hide';
        //this.slidePanelLocation = { "top":1, "right":2, "bottom":3, "left":4 };
        this.isHorizontal = true;

        this.contentPanelId = 'slidePanel_expanding_content_' + this.label;
    };

    SlidePanel.prototype = {

        triggerClicked: function(event) {
            // This will display the slidePanel with icons for triggering links to display or an additional slide-out panel with more details.
            var me = this;

            if(slideOutContains.length > 0) {
                // Closes the slide-out panel if open
                slideOutContains = '';
                $(".content-panel").toggle("fast");
                $(me).toggleClass("active");
            }

            var panel = $(".panel");
            var text = panel.is(":visible") === false ? me.openLabel : me.label;
            panel.toggle("fast");
            //$('#slidePanel' + event.currentTarget.innerHTML).toggle('fast');
            $(me).toggleClass("active");    
            $(me).html(text);

            return false;
        },

        expandClicked: function(context) {
            // This will display the slide-out panel.
            var me = this;

            if(slideOutContains === '') {
                slideOutContains = context.id;

                // Open the selected slide-out panel
                $(".content-panel").toggle("fast");
                $(me).toggleClass("active");
                
            } else if(slideOutContains != context.id) {
                slideOutContains = context.id;

                // Close the current slide-out panel
                $(".content-panel").toggle("fast");
                $(me).toggleClass("active");


                // Open the selected slide-out panel
                $(".content-panel").toggle("fast");
                $(me).toggleClass("active");
            } else {
                // User clicked on same icon and the slide-out panel was open, so close the current slide-out panel
                slideOutContains = '';
                $(".content-panel").toggle("fast");
                $(me).toggleClass("active");
            }

            return false;
        },

    /*    append: function(appendTo, itemToAppend, html) {

            var appendToObj = document.getElementById(appendTo);
            if(appendToObj == null) {
                appendToObj = document.getElementsByTagName(appendTo);
                if(appendToObj == null) {
                    return;
                }
                else {
                    // set to the first array item in the array of elements.
                    appendToObj = appendToObj[0];
                }
            }

            var slidePanel = document.getElementById(itemToAppend);
            if(( slidePanel === undefined) || (slidePanel == null)) {
                //$(appendTo).append(html); 
                appendToObj.innerHTML += html;
            }
        },
    */
    /*    createBottom: function(depth) {
            // Must set specific style (not in CSS class) for height, and overflow to hidden.
            slidePanel.this.isHorizontal = true;

            var html = [
                '<div id="slidePanel-container">',
                    '<div id="slidePanel" class="slidePanel slidePanel-orientation-bottom shadow" style="height: ' + depth + 'px; overflow: hidden;">',
                        '<div id="slidePanel-content"></div>',
                    '<div id="slidePanel-close-button" style="float: right;">Close</div>',
                '</div>',
                '<div id="slidePanel-toggle-button" class="slidePanel slidePanel-toggle-orientation-bottom shadow" style="height: ' + slidePanel.mToggleButtonDepth + 'px; overflow: hidden;">Open</div>',
                '</div>'
            ].join('\n');


            slidePanel.append('body', 'slidePanel-container', html);
            document.getElementById('slidePanel-toggle-button').style.display = 'none';
        },
    */

        createLeft: function() {
            var me = this;

            // Must set specific style (not in CSS class) for height, and overflow to hidden.
            me.isHorizontal = false;

            var containerId = 'slidePanel_container_' + me.label;
            var panelId = 'slidePanel_' + me.label;
            var triggerId = 'slidePanel_trigger_' + me.label;
            var html = [
                '<div id="' + containerId + '">',
                    '<div id="' + panelId + '" class="panel" style="top: ' + (me.top - 5) + 'px;">',
                    '</div>',
                    '<a id="' + triggerId + '" class="trigger" style="top: ' + me.top + 'px;" href="#">' + me.label + '</a>',
                    '<div id="slidePanel_expanding_content_' + me.label + '" class="content-panel" style="top: ' + (me.top + 60) + 'px;">',
                    '</div>',
                '</div>'
            ].join('\n');

            $(html).appendTo('body');

            $('#' + triggerId).click(me.triggerClicked);

            renderCss(me);
        },

        createGroup: function(groupId) {
            var me = this;

            var thisGroupId = 'slidePanelGroup_' + me.label + '_' + groupId;
            var thisGroupContentId = thisGroupId + '_content';
            // Append new content to the end of the current slidePanel content.
            var html = '<div id="' + thisGroupId + '" style="';
            if(me.isHorizontal == true) {
                html += ' float: left;';
            }
            
            html += '"><ul id="' + thisGroupContentId + '"></ul></div>';

            $(html).appendTo('#slidePanel_' + me.label);
        },

        createGroupSeparator: function() {
            var me = this;

            var html = '';
            if(me.isHorizontal == true) {
                //html += "<div style='float: left;'><img src='img/bg.png' /></div>";
                html += '<div style="float: left;"></div>';
            } else {
                //html += "<div style='padding-bottom: 10px;'><img src='img/bg.jpg' style='height: 1px; width: 100%;' /></div>";
                html += '<div style="padding-bottom: 15px;"></div>';
            }

            $(html).appendTo('#slidePanel_' + me.label);
        },

        addGroupContent: function(groupId, html) {
            var me = this;

            html = '<li style="display: block;">' + html + '</li>';

            var thisGroupId = 'slidePanelGroup_' + me.label + '_' + groupId;
            var thisGroupContentId = thisGroupId + '_content';
            $(html).appendTo('#' + thisGroupContentId);
        },

        addToContentPanel: function(html) {
            var me = this;

            $('#' + me.contentPanelId).empty();
            $(html).appendTo('#' + me.contentPanelId);
        },

        setContentPanelDimens: function(options) {
            var me = this;
            
            options = options || {};
            var width = options.width || $('#' + me.contentPanelId).css('width');
            var height = options.height || $('#' + me.contentPanelId).css('height');

            $('#' + me.contentPanelId).css('width', width);
            $('#' + me.contentPanelId).css('height', height);
        }

    }; // End SlidePanel prototype
    
    if (context) context.SlidePanel = SlidePanel;
  
    return SlidePanel;

})(window, jQuery);