$(function() {
    $(document).ready(function() {
        eBlad.init();
    });
});


// general classes used throught eBlad
var e_consts = {
    UI_BUTTON: ".ui-button",
    UI_BUTTONSET: ".ui-buttonset",
    UI_DATEPICKER: ".ui-datepicker",
    PAGER: ".pager",

    HELP: ".help_img",
    HELP_DETAILS: "#help_details",
    REGISTER: ".register_link",
    REGISTER_DETAILS: "#registration_details",

    CATALOG_LINK: "#catalog_link",
    CATALOG_DETAILS: "#catalog_details",
    NEWS_LINK: "#news_link",
    NEWS_DETAILS: "#news_details",

    EBLAD_LINK: "#eBLADLink",
    EBLAD_MENU: "#eBLADMenu",

    ADMIN_LINK: "#adminMenuLink",
    ADMIN_MENU: "#adminMenu",

    ACCOUNT_LINK: "#accountMenuLink",
    ACCOUNT_MENU: "#accountMenu",

    TOPMENUS: ".topMenu",

    MODAL: "#simplemodal-container",

    CART_TOTAL: ".shopping_cart_count",
    STOCK_DETAILS: "#stock_details",
    QUANTITY_NUMBER: ".quantity_text"
};

/* global eBlad */

// global for the eBlad hover menu
var eBladMenuOpen = false;

// define ns, globals
var eBlad = {


    init: function () {

        // fix the bg - glue the footer to bottom of page
        this.bindBackground();

        // bind the help icon to open a help dialog
        this.bindHelp();

        // do the same for the register link
        this.bindRegisterLink();

        // set up catalog picture
        this.bindCatalogLink();

        // set up the news dialog
        this.bindNewsLink();

        this.bindMenu();

        this.bindAdminMenu();

        this.bindAccountMenu();

    },
    // generic menu binder
    bindGenericMenu: function (link, menu, otherMenu) {

        $(link).mouseenter(function () {
            clearTimeout($(this).data('timeoutId'));
            $(otherMenu).hide();
            $(menu).show();
        }).mouseleave(function () {
            var timeoutId = setTimeout(function () { $(menu).hide(); }, 650);
            $(link).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        });
        // use behaviour on both the link and the menu itself, so that the menu doesn't disappear when selecting something on the second row
        $(menu).mouseenter(function () {
            clearTimeout($(link).data('timeoutId'));
            $(otherMenu).hide();
        }).mouseleave(function () {
            var timeoutId = setTimeout(function () { $(menu).hide(); }, 650);
            $(link).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        });
    },

    // set up the menu behaviour
    bindMenu: function () {
        // show the menu if we are in the order online section
        if ($(e_consts.EBLAD_LINK).hasClass('selected')) {
            $(e_consts.EBLAD_MENU).show();
        }
        else
        // if we aren't, show the dynamic menu behaviour
        {
            $(e_consts.EBLAD_LINK).mouseenter(function () {
                clearTimeout($(this).data('timeoutId'));
                $(e_consts.EBLAD_MENU).show();
                $(this).addClass('selected');
            }).mouseleave(function () {
                var link = this;
                var timeoutId = setTimeout(function () { $(e_consts.EBLAD_MENU).hide(); $(link).removeClass('selected'); }, 650);
                $(link).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
            });
            // use behaviour on both the link and the menu itself, so that the menu doesn't disappear when selecting something on the second row
            $(e_consts.EBLAD_MENU).mouseenter(function () {
                clearTimeout($(e_consts.EBLAD_LINK).data('timeoutId'));
            }).mouseleave(function () {
                var link = e_consts.EBLAD_LINK;
                var timeoutId = setTimeout(function () { $(e_consts.EBLAD_MENU).hide(); $(link).removeClass('selected'); }, 650);
                $(link).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
            });
        }
    },

    // set up admin menu behaviour
    bindAdminMenu: function () {

        eBlad.bindGenericMenu(e_consts.ADMIN_LINK, e_consts.ADMIN_MENU, e_consts.ACCOUNT_MENU);
    },

    // set up account menu behaviour
    bindAccountMenu: function () {

        eBlad.bindGenericMenu(e_consts.ACCOUNT_LINK, e_consts.ACCOUNT_MENU, e_consts.ADMIN_MENU);
    },


    // update the stock item quantity number
    updateQuantity: function (context) {

        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

        // update the fields that relate to the stock item.
        var id = "quantity-" + data.stock;
        var textBox = document.getElementById(id);
        textBox.value = data.count;
        //$("#quantity-" + data.stock).val(data.count);
        $("#cost-" + data.stock).text(data.cost);

        // update the cart total items.
        eBlad.setCartTotalItems(data.totalItems);

        // update shopping cart total cost
        $cartTotalCost = $(".shopping_cart_total");
        if ($cartTotalCost.length > 0) {
            $cartTotalCost.text(data.totalCost);
        }
    },

    // update the cart quanity for a specfic stock item.
    setCartQuantity: function (id, quantity) {
        // test for a number, set to 0 if not
        var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
        if (!numberRegex.test(quantity)) quantity = 0;

        $.ajax({

            type: 'POST',
            url: '/ShoppingCart/SetQuantity/' + id,
            data: { 'quantity': quantity },
            success: function (data) {

                $("#quantity-" + data.stock).val(data.count);
                eBlad.setCartTotalItems(data.totalItems);
            }
        });
    },

    // set the cart total items label ( ie. Your Order ( %d ) )
    setCartTotalItems: function (total) {
        $cartItems = $(e_consts.CART_TOTAL);
        if ($cartItems.length > 0) {
            $cartItems.text(total);
        }
    },
    bindRegisterLink: function () {
        $(e_consts.REGISTER).click(function (e) {
            // prevent the default action of the event
            e.preventDefault();

            $(e_consts.REGISTER_DETAILS).modal();

            $(e_consts.MODAL).css({ width: '360px', height: '250px' });
        });
    },

    bindCatalogLink: function () {
        $(e_consts.CATALOG_LINK).click(function (e) {
            // prevent the default action of the event
            e.preventDefault();

            $(e_consts.CATALOG_DETAILS).modal();
        });
    },

    bindNewsLink: function () {
        $(e_consts.NEWS_LINK).click(function (e) {
            // prevent the default action of the event
            e.preventDefault();

            $(e_consts.NEWS_DETAILS).modal();
        });
    },
    // open up the help details dialog will dispay a pages content inside.
    createHelp: function (url) {

        // perform an ajax request, and open/populate the
        // stock details dialog box.
        $.ajax({
            type: 'POST',
            url: url,
            cache: true,
            success: function (data) {
                // inject the html
                $("#help_details").html(data);

                // set the stock title
                var $title = $("#help_detail_header");
            }
        });
    },

    // override the default action of an eBlad stock link.
    // we prevent the default behaviour and make the stock item open up a dialog box.
    bindHelp: function () {

        $(e_consts.HELP).click(function (e) {
            // prevent the default action of the event
            e.preventDefault();

            // get the stock item url.
            var url = $(this).attr("href");

            // display dialog box.
            eBlad.createHelp(url);

            $(e_consts.HELP_DETAILS).modal();

        });
    },

    // crappy way to make the footer "glue" to the bottom of the page, but can't think of a better one
    // if using CSS the background won't look correct
    // 109 is the height of footer + header + padding and border of "background" element.
    bindBackground: function () {

        var windowHeight = $('body').height();

        $('#background').css("min-height", windowHeight - 109);
    }

};