ModalConfig = {
    modalDiv: "modal-page",
    modalBackground: "modal-background",
    modalContainer: "modal-container",
    loaderContainer: "modal-loader",
    widgetContainer: "widget-container"
};

showVideoPlayer = function(key) {
    if ((BrowserDetect.OS == "Mac") && (BrowserDetect.browser == "Firefox")) {
        createPopupWindow(webRoot + "silverlight/video-player/default.aspx?key=" + key, 875, 420);
    }
    else {
        showModal("#000000", 50, false);

        //add the resize handler
        window.onresize = function() {
            centerWidget(875, 420, 100);
        }

        window.onresize();

        //restore the key
        PlayerConfig.key = key;

        //update the widget container by ajax
        new Ajax(webRoot + "AjaxRequest.aspx?method=SLInstallExperience&key=video-player", {
            method: 'get',
            evalScripts: true,
            update: $(ModalConfig.widgetContainer),
            onComplete: onAJAXComplete
        }).request();
    }

    window.location.hash = "page-top";
}

showUpgrade = function(key) {


    if ((BrowserDetect.OS == "Mac") && (BrowserDetect.browser == "Firefox")) {
        createPopupWindow(webRoot + "silverlight/landing-widget/default.aspx", 845, 400);
    }
    else {
        showModal("#000000", 50, false);

        //add the resize handler
        window.onresize = function() {
            centerWidget(845, 400, 130);
        }

        window.onresize();

        //update the widget container by ajax
        new Ajax(webRoot + "AjaxRequest.aspx?method=SLInstallExperience&key=landing", {
            method: 'get',
            evalScripts: true,
            update: $(ModalConfig.widgetContainer),
            onComplete: onAJAXComplete
        }).request();
    }

    window.location.hash = "page-top";
}

showBuy = function(key) {
    if ((BrowserDetect.OS == "Mac") && (BrowserDetect.browser == "Firefox")) {
        createPopupWindow(webRoot + "silverlight/why-buy-widget/default.aspx", 845, 400);
    }
    else {
        showModal("#000000", 50, false);

        //add the resize handler
        window.onresize = function() {
            centerWidget(845, 400, 130);
        }

        window.onresize();

        //update the widget container by ajax
        new Ajax(webRoot + "AjaxRequest.aspx?method=SLInstallExperience&key=why-buy", {
            method: 'get',
            evalScripts: true,
            update: $(ModalConfig.widgetContainer),
            onComplete: onAJAXComplete
        }).request();
    }

    window.location.hash = "page-top";
}

showUpgradeVersion = function(key) {
    showModal("#000000", 50, true);

    //center the widget
    centerWidget(650, 500, 40);

    //update the widget container by ajax
    new Ajax(webRoot + "products/UpgradeInfo.aspx?key=" + key, {
        method: 'get',
        evalScripts: true,
        update: $(ModalConfig.widgetContainer),
        onComplete: onAJAXComplete
    }).request();
}


showCampaignProd = function(key) {
    showModal("#000000", 50, true);

    //center the widget
    centerWidget(1020, 500, 40);

    //update the widget container by ajax
    new Ajax(webRoot + "amazon/Campaign_prod.aspx?key=" + key, {
        method: 'get',
        evalScripts: true,
        update: $(ModalConfig.widgetContainer),
        onComplete: onAJAXComplete
    }).request();
}

showSampleBanner = function(key) {

    if ((BrowserDetect.OS == "Mac") && (BrowserDetect.browser == "Firefox")) {
        createPopupWindow(webRoot + "resources/Banner_sample.aspx", 300, 250);
    }
    else {
        showModal("#000000", 50, false);

        //add the resize handler
        window.onresize = function() {
            centerWidget(300, 250, 500);
        }

        window.onresize();

        //update the widget container by ajax
        new Ajax(webRoot + "AjaxRequest.aspx?method=SLInstallExperience&key=banner_sample", {
            method: 'get',
            evalScripts: true,
            update: $(ModalConfig.widgetContainer),
            onComplete: onAJAXComplete
        }).request();
    }
    window.location.hash = "#SL_AdBanner_tool";
}


showSL2SampleVideo = function(key) {

    if ((BrowserDetect.OS == "Mac") && (BrowserDetect.browser == "Firefox")) {
        createPopupWindow(webRoot + "resources/Video_sample.aspx", 420, 370);
    }
    else {
        showModal("#000000", 50, false);

        //add the resize handler
        window.onresize = function() {
            centerWidget(420, 370, 500);
        }

        window.onresize();

        //update the widget container by ajax
        new Ajax(webRoot + "AjaxRequest.aspx?method=SLInstallExperience&key=SL2video_sample", {
            method: 'get',
            evalScripts: true,
            update: $(ModalConfig.widgetContainer),
            onComplete: onAJAXComplete
        }).request();
    }
    window.location.hash = "#SL_VideoPlayer_tool";
}


showPurchaseDetail = function(key) {
    showModal("#ffffff", 0, true);

    //center the widget
    centerWidget(400, 220, 440, 360);

    //update the widget container by ajax
    new Ajax(webRoot + "AjaxRequest.aspx?method=getPurchaseDetail&key=" + key, {
        method: 'get',
        evalScripts: true,
        update: $(ModalConfig.widgetContainer),
        onComplete: onAJAXComplete
    }).request();
}

centerWidget = function(width, height, topOffset, leftOffset) {
    var modalContainer = $(ModalConfig.modalContainer);
    var loaderContainer = $(ModalConfig.loaderContainer);

    modalContainer.style.width = width + "px";
    modalContainer.style.height = height + "px";

    if (leftOffset == null) {
        //auto align center
        modalContainer.style.left = ((window.getWidth() - width) / 2) + "px";
    }
    else {
        modalContainer.style.left = leftOffset + "px";
    }

    if (topOffset == null) {
        //auto align center
        modalContainer.style.top = ((window.getHeight() - height) / 2) + "px";
    }
    else {
        if (BrowserDetect.browser == "Explorer") {
            modalContainer.style.top = (-document.documentElement.scrollTop + topOffset) + "px";
        }
        else {
            modalContainer.style.top = topOffset + "px";
        }
    }

    //also center the loader image
    loaderContainer.style.left = (width / 2) + "px";
    loaderContainer.style.top = (height / 2) + "px";
}

onAJAXComplete = function() {
    //hide loader
    var loaderContainer = $(ModalConfig.loaderContainer);
    var widgetContainer = $(ModalConfig.widgetContainer);

    loaderContainer.style.display = "none";
    widgetContainer.style.display = "block";
}

showModal = function(bgColor, opacity, clickOutsideToClose) {
    var modalBackground = $(ModalConfig.modalBackground);
    var modalDiv = $(ModalConfig.modalDiv);
    var loaderContainer = $(ModalConfig.loaderContainer);
    var widgetContainer = $(ModalConfig.widgetContainer);

    modalDiv.style.display = "block";
    modalDiv.style.top = document.documentElement.scrollTop;

    widgetContainer.style.display = "none";

    //allow the transparent bg to move according to the scroll
    if (BrowserDetect.browser == "Explorer") {
        //move the background
        modalBackground.style.top = "0px";

        ModalConfig.offsetY = -document.documentElement.scrollTop;

        window.onscroll = function() {
            modalBackground.style.top = document.documentElement.scrollTop + ModalConfig.offsetY + "px";
        }
    }
    else if (BrowserDetect.browser == "Firefox") {
        //move the background
        window.onscroll = function() {
            modalBackground.style.top = document.documentElement.scrollTop + "px";
        }

        window.onscroll();
    }
    //case for safari
    else {
        window.onscroll = function() {
            modalBackground.style.top = document.body.scrollTop + "px";
        }

        window.onscroll();
    }

    //click outside to close
    if (clickOutsideToClose) {
        modalBackground.onclick = hideModal;
    }

    //set bg color
    modalBackground.style.backgroundColor = bgColor;

    //set Bg alpha
    modalBackground.style.filter = "alpha(opacity=" + opacity + ")";
    modalBackground.style.opacity = opacity / 100;

    //show loader
    loaderContainer.style.display = "block";
}

hideModal = function() {

    //coolice
    resetData_WB();
    resetData_landingWidget();
    resetData_video_player(); //coolice

    var modalDiv = $(ModalConfig.modalDiv);
    var modalBackground = $(ModalConfig.modalBackground);
    var widgetContainer = $(ModalConfig.widgetContainer);

    //clear div content
    //var removeNodes = widgetContainer.childNodes;
    //for (var i=0;i<removeNodes.length;i++) {
    //  widgetContainer.removeChild(removeNodes[i]);
    //}

    //widgetContainer.innerHTML = "";

    //hide div
    var modalDiv = $(ModalConfig.modalDiv);
    modalDiv.style.display = "none";

    //clear handler
    modalBackground.onclick = null;
    window.onscroll = null;
    window.onresize = null;
}

createPopupWindow = function(url, width, height) {
    var name = "Window" + Math.round(1000000 * Math.random());
    var popupWin = window.open(url, name, "toolbar=no,width=" + width + ",height=" + height + ",location=1,directories=0,status=0,scrollbars=0,resize=0,menubar=0");
    popupWin.focus();
}