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();
}

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();
}