/*

    sample:
        <a href="javascript:void(0)" class="customModal(req)" rel="[targetId](req)|width(opt)|height(opt)">Show modal</a>

        <div id="[targetId](req)" class="hide"> "Content Here" </div>

*/

var intRegex = /^\d+$/;
var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;
var defHeight = 440;
var defWidth = 840;
var height;
var width;
var target = "";
var attribute;
var newEl;
var oldEl;
var newEl2;
var theId;

CustomModal = {}




$(document).ready(function () {
    $(".customModal").each(function () {
        $(this).click(function () {
            CustomModal.init(this);
        });
    });
});

CustomModal = {
    init: function (el) {
        attribute = $(el).attr("rel");
        attribute = attribute.split("|");

        // Check if width and height are assigned
        if (attribute.length == 3 && (intRegex.test(attribute[1]) || floatRegex.test(attribute[1])) && (intRegex.test(attribute[2]) || floatRegex.test(attribute[2]))) {

            // width and height are assigned
            width = attribute[1];
            height = attribute[2];

        } else if (attribute.length == 2 && (intRegex.test(attribute[1]) || floatRegex.test(attribute[1]))) {
            // Width and height are assigned. Width = Height
            width = attribute[1];
            height = width;

        } else {
            // use default width and height
            width = defWidth;
            height = defHeight;
        }

        target = $("#" + attribute[0]);
        theId = attribute[0];

        if (attribute[0] == "zipModal") {
            CustomModal.util.createZip(target, width, height);
        } else {
            CustomModal.util.createModal(target, width, height, theId);
        }

    }
}

CustomModal.util = {
    createModal: function (el, width, height, theId) {
        newEl = $(el).html();
        newEl2 = $(newEl).clone();
        oldEl = $(el);
        $(el).children().remove();


        if (theId == "digitalStarterPackage" || theId == "digitalPreferredPackage" || theId == "sportsEntertainmentPackage") {
            $("body").append("<div id='customModalContainer'><div id='customModalBg'><div id='customModalContent'><div id='customModal'>" + String(newEl) + "</div><a class='close' style='display:none;' href='javascript:void(0);'>Close</a></div></div></div>");
        } else {
            $("body").append("<div id='customModalContainer'><div id='customModalBg'><div id='customModalContent' class='dark'><div id='customModal'>" + String(newEl) + "</div><a class='close' style='display:none;' href='javascript:void(0);'>Close</a></div></div></div>");
        }
        $("body").append("<div id='theOverlay'></div>");
        $("#customModal").children(":first").show();

        $("#theOverlay").height("100%");
        $("#theOverlay").width("100%");

        $("#customModalContainer").css({ 'left': CustomModal.util.getPositionX(width), 'top': CustomModal.util.getPositionY(height) });
        $("#customModalContainer").css({ 'height': parseFloat(height) + 10, 'width': parseFloat(width) + 10 });
        $("#customModalBg").css({ 'height': height, 'width': width });
        $("#customModalContent").css({ 'height': height - 10, 'width': width - 10 });
        $("#customModalContainer a.close").show();
        $("#customModalContainer").fadeTo(1200, 1);

        CustomModal.util.activateCloseModal();
    },

    getPositionX: function (width) {
        var w = $(window).width();
        var w2 = parseFloat(width) + 40;
        var w3 = (w - w2) / 2;
        return w3;
    },

    getPositionY: function (height) {
        var h = $(window).height();
        var h2 = parseFloat(height) + 40;
        var h3 = (h - h2) / 2;
        
        return h3;
    },

    activateCloseModal: function () {
        $("#customModalContent").find(".close").click(function () {
            CustomModal.util.closeModal();
        });
        $("#theOverlay").click(function () {
            CustomModal.util.closeModal();
        });
    },

    activateCloseModalZip: function () {
        $(".customModalContent").find(".close").click(function () {
            CustomModal.util.closeModalZip();
        });
        $(".theOverlay").click(function () {
            CustomModal.util.closeModalZip();
        });
    },

    closeModal: function () {
        $(oldEl).append(newEl2);

        //        $("#customModalContainer").stop(true, true).fadeTo(800, 0, function () {
        //            $(this).remove();
        //            $("#theOverlay").remove();
        //        });
        $("#customModalContainer").remove();
        $("#theOverlay").remove();
    },

    closeModalZip: function () {
        $(".customModalContainerZip").stop(true, true).fadeTo(800, 0, function () {
            $(this).hide();
            $(".theOverlay").hide();
        });
    },

    createZip: function (el, width, height) {

        $(".customModal").children(":first").show();

        $(".theOverlay").height($(document).height());
        $(".theOverlay").width($(document).width());

        $(".customModalContainerZip").css({ 'left': CustomModal.util.getPositionX(width), 'top': CustomModal.util.getPositionY(height) });
        $(".customModalContainerZip").css({ 'height': parseFloat(height) + 10, 'width': parseFloat(width) + 10 });
        $(".customModalBg").css({ 'height': height, 'width': width });
        $(".customModalContent").css({ 'height': height - 10, 'width': width - 10 });
        $(".customModalContainerZip a.close").show();
        $(".theOverlay").show();
        CustomModal.util.activateCloseModalZip();

        $(".customModalContainerZip").fadeTo(1200, 1);
    }
}