﻿var SlidingMenu = function (rootElementId, tabElementId, tabContentElementId) {
    var mAnimationSpeed = 200;
    var mFastAnimationSpeed = 150;

    var mRootElement = $(document.getElementById(rootElementId));
    var mTabElement = $(document.getElementById(tabElementId));
    var mTabContentElement = $(document.getElementById(tabContentElementId));

    var mNeedTabFadeIn = true;
    var mIsHidePending = false;

    var mActiveContentElement = null;
    var mShadowElement = null;

    var mRootElementMatch = "#" + rootElementId + " *";


    this.Init = function () {
        var children = mRootElement.children();

        for (i = 0; i < children.length; i++) {
            if (children[i].tagName == "A") {
                $(children[i]).mouseover(Show);
            }
        }

        mTabElement.css("left", mRootElement.outerWidth() - mTabElement.outerWidth());

        mTabElement.mouseout(Hide);
        mTabContentElement.mouseout(Hide);
        mRootElement.mouseout(Hide);

        /*mShadowElement = $("<div />");
        mShadowElement.css("background-color", "#000");
        mShadowElement.css("opacity", "0.4");
        mShadowElement.css("zIndex", "100");
        mShadowElement.css("position", "absolute");
        mShadowElement.css("visibility", "hidden");
        mShadowElement.appendTo(mRootElement);*/
    };

    function Show(e) {
        mTabElement.stop(true, true);
        mTabContentElement.stop(true, true);
        HideShadow();

        var jqItem = $(e.target);

        if (mActiveContentElement != null) {
            mActiveContentElement.style.visibility = "hidden";
        }

        var targetElement = jqItem.get(0).getAttribute("targetElement");
        var targetSize = jqItem.get(0).getAttribute("targetSize");

        if (e.target.tagName == "IMG") {
            targetElement = jqItem.parent().get(0).getAttribute("targetElement");
            targetSize = jqItem.parent().get(0).getAttribute("targetSize");
        }

        if (targetElement != null && targetElement != "") {
            mActiveContentElement = document.getElementById(targetElement);
        }

        if (mNeedTabFadeIn) {
            mTabElement.fadeIn(mFastAnimationSpeed, function () { mNeedTabFadeIn = false; });
        }

        var sizeParts = targetSize.split(',');

        var width = sizeParts[0];
        var height = sizeParts[1];

        // moves tab to correct location
        mTabElement.animate(
                    {
                        left: jqItem.position().left + 15,
                        width: jqItem.width()
                    },
                    mFastAnimationSpeed,
                    function () {
                        // callback to show contents
                        if (!mIsHidePending) {
                            mTabContentElement.animate({
                                height: height,
                                width: width
                            }, mFastAnimationSpeed,

                            function () {
                                mActiveContentElement.style.visibility = "inherit";
                                DisplayShadow(width, height);
                            }

                            );
                        }
                    }
                );
    };

    function Hide(e) {
        if ($(e.relatedTarget).is(mRootElementMatch)) {
            return;
        }

        mIsHidePending = true;
        HideShadow();

        mTabContentElement.animate(
                    {
                        height: 0
                    },
                    mAnimationSpeed,
                    function () {
                        mTabElement.fadeOut(mFastAnimationSpeed, function () { mNeedTabFadeIn = true; mIsHidePending = false; });
                    }
                );
    };

    function DisplayShadow(width, height) {
        /*mShadowElement.width(width);
        mShadowElement.height(height);
        mShadowElement.css("top", mTabContentElement.position().top + 3 + "px");
        mShadowElement.css("left", mTabContentElement.position().left + 3 + "px");
        mShadowElement.css("visibility", "inherit");*/
    };

    function HideShadow() {
        //mShadowElement.css("visibility", "hidden");
    };
};
