// ****************
// LOGIN PANEL
// ****************
$(document).ready(function() {
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");	
	});	
	
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");	
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});
});
// ****************
// END LOGIN PANEL
// ****************

// ***************
// HEADER LOGO
// ***************
$(function () {
    $(".tab a.open").click(function () {
        $("div#logo").fadeOut(10);
    });
    $(".tab a.close").click(function () {
        $("div#logo").fadeIn(1000);
    });
});
// ***************
// END HEADER LOGO
// ***************

// ***************
// HEADER MENU
// ***************
$(document).ready(function () {
    $("#headernav li#contact a").click(function () {
        $("#contactpanel").slideToggle("slow");
    });
    $("#contactpanel").click(function () {
        $("#contactpanel").slideToggle("slow");
    });
    $("#contactpanel").mouseleave(function () {
        $("#contactpanel").slideUp("slow");
    });

    //Customer
    $("#headernavc li#orderC a").click(function () {
        $("#orderpanelc").slideToggle("slow");
    });
    $("#orderpanelc").click(function () {
        $("#orderpanelc").slideToggle("slow");
    });
    $("#orderpanelc").mouseleave(function () {
        $("#orderpanelc").slideUp("slow");
    });
    $("#headernavc li#estimatesC a").click(function () {
        $("#estimatespanelc").slideToggle("slow");
    });
    $("#estimatespanelc").click(function () {
        $("#estimatespanelc").slideToggle("slow");
    });
    $("#estimatespanelc").mouseleave(function () {
        $("#estimatespanelc").slideUp("slow");
    });
    $("#headernavc li#myaccountC a").click(function () {
        $("#myaccountpanelc").slideToggle("slow");
    });
    $("#myaccountpanelc").click(function () {
        $("#myaccountpanelc").slideToggle("slow");
    });
    $("#myaccountpanelc").mouseleave(function () {
        $("#myaccountpanelc").slideUp("slow");
    });
    $("#headernavc li#contactusC a").click(function () {
        $("#contactuspanelc").slideToggle("slow");
    });
    $("#contactuspanelc").click(function () {
        $("#contactuspanelc").slideToggle("slow");
    });
    $("#contactuspanelc").mouseleave(function (event) {
        $("#contactuspanelc").slideUp("slow");
    });

    //Vendor
    $("#headernavv li#orderV a").click(function () {
        $("#orderpanelv").slideToggle("slow");
    });
    $("#orderpanelv").click(function () {
        $("#orderpanelv").slideToggle("slow");
    });
    $("#orderpanelv").mouseleave(function () {
        $("#orderpanelv").slideUp("slow");
    });
    $("#headernavv li#estimatesV a").click(function () {
        $("#estimatespanelv").slideToggle("slow");
    });
    $("#estimatespanelv").click(function () {
        $("#estimatespanelv").slideToggle("slow");
    });
    $("#estimatespanelv").mouseleave(function () {
        $("#estimatespanelv").slideUp("slow");
    });
    $("#headernavv li#myaccountV a").click(function () {
        $("#myaccountpanelv").slideToggle("slow");
    });
    $("#myaccountpanelv").click(function () {
        $("#myaccountpanelv").slideToggle("slow");
    });
    $("#myaccountpanelv").mouseleave(function () {
        $("#myaccountpanelv").slideUp("slow");
    });
    $("#headernavv li#contactusV a").click(function () {
        $("#contactuspanelv").slideToggle("slow");
    });
    $("#contactuspanelv").click(function () {
        $("#contactuspanelv").slideToggle("slow");
    });
    $("#contactuspanelv").mouseleave(function () {
        $("#contactuspanelv").slideUp("slow");
    });

    //Admin
    $("#headernava li#orderA a").click(function () {
        $("#orderpanela").slideToggle("slow");
    });
    $("#orderpanela").click(function () {
        $("#orderpanela").slideToggle("slow");
    });
    $("#orderpanela").mouseleave(function () {
        $("#orderpanela").slideUp("slow");
    });
    $("#headernava li#estimatesA a").click(function () {
        $("#estimatespanela").slideToggle("slow");
    });
    $("#estimatespanela").click(function () {
        $("#estimatespanela").slideToggle("slow");
    });
    $("#estimatespanela").mouseleave(function () {
        $("#estimatespanela").slideUp("slow");
    });
    $("#headernava li#myaccountA a").click(function () {
        $("#myaccountpanela").slideToggle("slow");
    });
    $("#myaccountpanela").click(function () {
        $("#myaccountpanela").slideToggle("slow");
    });
    $("#myaccountpanela").mouseleave(function () {
        $("#myaccountpanela").slideUp("slow");
    });
});
// ***************
// END HEADER MENU
// ***************

//******************
// ZOOMABLE SUB TABS
//*******************
$.fn.zoomtabs = function (zoomPercent, easing) {
    if (!zoomPercent) zoomPercent = 10;

    return this.each(function () {
        var $zoomtab = $(this);
        var $tabs = $zoomtab.find('.tabs');
        var height = $tabs.height();

        var panelIds = $tabs.find('a').map(function () {
            return this.name;
        }).get().join(',');

        $zoomtab.find('> div').scrollTop(0);

        var $panels = $(panelIds);
        var images = [];

        $panels.each(function () {
            var $panel = $(this),
                    bg = ($panel.css('backgroundImage') || "").match(/url\s*\(["']*(.*?)['"]*\)/),
                    img = null;

            if (bg !== null && bg.length && bg.length > 0) {
                bg = bg[1];
                img = new Image();

                $panel.find('*').wrap('<div style="position: relative; z-index: 2;" />');
                $panel.css('backgroundImage', 'none');

                $(img).load(function () {
                    var w = this.width / 15;
                    var wIn = w / 100 * zoomPercent;
                    var h = this.height / 15;
                    var hIn = h / 100 * zoomPercent;
                    var top = 0;

                    var fullView = {
                        height: h + 'em',
                        width: w + 'em',
                        top: top,
                        left: 0
                    };

                    var zoomView = {
                        height: (h + hIn) + 'em',
                        width: (w + wIn) + 'em',
                        top: top,
                        left: '-' + (wIn / 2) + 'em'
                    };

                    $(this).data('fullView', fullView).data('zoomView', zoomView).css(zoomView);

                }).prependTo($panel).css({ 'position': 'absolute', 'top': 0, 'left': 0 }).attr('src', bg);

                images.push(img);
            }
        });

        function zoomImages(zoomType, speed) {
            $(images).each(function () {
                var $image = $(this);
                if ($image.is(':visible')) {
                    $image.stop().animate($image.data(zoomType), speed, easing);
                } else {
                    $image.css($image.data(zoomType), speed);
                }
            });
        }

        $tabs.height(0).hide(); // have to manually set the initial state to get it animate properly.

        // this causes opear to render the images with zero height and width for the hidden image
        $panels.hide().filter(':first').show();
        var speed = 200;

        $zoomtab.hover(function () {
            // show and zoom out
            zoomImages('fullView', speed);
            $tabs.stop().animate({ height: height }, speed, easing);
        }, function () {
            // hide and zoom in
            zoomImages('zoomView', speed);
            $tabs.stop().animate({ height: 0 }, speed, easing, function () {
                $tabs.hide();
            });
        });

        var hoverIntent = null;
        $tabs.find('a').hover(function () {
            clearTimeout(hoverIntent);
            var el = this;
            hoverIntent = setTimeout(function () {
                $panels.hide().filter(el.name).show();
            }, 100);
        }, function () {
            clearTimeout(hoverIntent);
        }).click(function () {
            return true;
        });
    });
};

$(function () {
    $('.zoomoutmenu').zoomtabs(15);
});
//*********************
// END ZOOMABLE SUBTABS
//*********************

//**********************
// TABBED MULTIPAGE
//**********************
$(document).ready(function () {
    //Get all the LI from the #tabMenu UL
    $('#tabMenu > li').click(function () {

        //remove the selected class from all LI    
        $('#tabMenu > li').removeClass('selected');

        //Reassign the LI
        $(this).addClass('selected');

        //Hide all the DIV in .boxBody
        $('.boxBody div').slideUp('1500');

        //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
        $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

    }).mouseover(function () {

        //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
        $(this).addClass('mouseover');
        $(this).removeClass('mouseout');

    }).mouseout(function () {

        //Add and remove class
        $(this).addClass('mouseout');
        $(this).removeClass('mouseover');

    });

    //Mouseover with animate Effect for Category menu list
    $('.boxBody #category li').mouseover(function () {

        //Change background color and animate the padding
        $(this).css('backgroundColor', '#888');
        $(this).children().animate({ paddingLeft: "20px" }, { queue: false, duration: 300 });
    }).mouseout(function () {

        //Change background color and animate the padding
        $(this).css('backgroundColor', '');
        $(this).children().animate({ paddingLeft: "0" }, { queue: false, duration: 300 });
    });

    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
    $('.boxBody li').click(function () {
        if ($(this).find("a").attr("href") != null) {
            window.location = $(this).find("a").attr("href");
        }
    }).mouseover(function () {
        $(this).css('backgroundColor', '#888');
    }).mouseout(function () {
        $(this).css('backgroundColor', '');
    });
});
//**********************
// END TABBED MULTIPAGE
//**********************

// ***************
// APPROVAL MENU
// ***************
$(document).ready(function () {
    $("#approvalimg").mouseover(function () {
        $("#approvalpanel").slideToggle("slow");
    });

    $("#approvalpanel").click(function () {
        $("#approvalpanel").slideToggle("slow");
    });
    $("#approvalpanel").mouseleave(function () {
        $("#approvalpanel").slideUp("slow");
    });
});
// ***************
// APPROVAL MENU
// ***************