var numberModalWindowOpen = 0;

function productDetail(attr){
    openModalWindow_sk('');
    ajax.replace('index.php', 'modalWindowContent_' + numberModalWindowOpen, 'get', 'ajaxAction=modules/ecommerce/ecommerce.php&bpmodule=ecommerce&prod=' + attr);
}

function openModalWindow_sk(myButtons){
    var myScroll = getScrollOffset();
    
    numberModalWindowOpen = numberModalWindowOpen + 1;
    
    if(myButtons == '') myButtons = '<input type="button" value="' + CLOSEBUTTONNAME + '" onclick="closeModalWindow_sk();" />';
    else if(myButtons == 'none') myButtons = '&nbsp;';
    
    var el = '';
    var mySize = getWindowSize();

    // Create the window with NTH = numberModalWindowOpen
    var newInput = document.createElement('div');
    newInput.setAttribute('id', 'modalWindowPosition_' + numberModalWindowOpen);
    document.getElementById('putModalWindowsInHere').appendChild(newInput);
    // Give this window its STYLES
    el = document.getElementById('modalWindowPosition_' + numberModalWindowOpen);
    el.style.position = 'absolute';
    el.style.zIndex = '350' + numberModalWindowOpen;
    el.style.width = '775px';
    el.style.height = '465px';
    el.style.border = '6px groove red';
    el.style.background = '#cc0001';
    el.style.marginTop = Math.floor((parseInt(mySize.height) - parseInt(el.style.height.replace('px', ''))) / 2) + 'px';
    el.style.marginLeft = Math.floor((parseInt(mySize.width) - parseInt(el.style.width.replace('px', ''))) / 2) + 'px';
    document.getElementById('modalWindowPosition_' + numberModalWindowOpen).style.marginTop = myScroll.y + 'px';
    
    // Create CONTENT ZONE DIV WRAPPER
    newInput = document.createElement('div');
    newInput.setAttribute('id', 'modalWindowContentWrapper_' + numberModalWindowOpen);
    document.getElementById('modalWindowPosition_' + numberModalWindowOpen).appendChild(newInput);
    // Give this window its STYLES
    el = document.getElementById('modalWindowContentWrapper_' + numberModalWindowOpen);
    el.style.width = '100%';
    el.style.height = '90%';
    el.style.overflow = 'auto';
    
    // Create the CONTENT DIV
    newInput = document.createElement('div');
    newInput.setAttribute('id', 'modalWindowContent_' + numberModalWindowOpen);
    document.getElementById('modalWindowContentWrapper_' + numberModalWindowOpen).appendChild(newInput);
    // Give this window its STYLES
    el = document.getElementById('modalWindowContent_' + numberModalWindowOpen);
    el.innerHTML = '<img src="images/ajax-loader.gif" alt="Loading Icon" />';
    
    // Create the BUTTON DIV
    newInput = document.createElement('div');
    newInput.setAttribute('id', 'modalWindowButtons_' + numberModalWindowOpen);
    document.getElementById('modalWindowPosition_' + numberModalWindowOpen).appendChild(newInput);
    // Give this window its STYLES
    el = document.getElementById('modalWindowButtons_' + numberModalWindowOpen);
    el.style.marginTop = '15px';
    el.style.textAlign = 'center';
    el.innerHTML = myButtons;
    
    // If this is our first Modal Window, it is probably hidden. We SHOW it
    el = document.getElementById('modalWindowShadow');
    if(el.style.display == 'none'){
        el.style.display = '';
        document.getElementById('modalWindowShadow').style.display = '';
        document.getElementById('putModalWindowsInHere').style.display = '';
        //document.getElementById('modalWindowShadow').style.marginTop = myScroll.y + 'px';

        // Get Body Size
        var myId = 'mainWrapper';  
        if(document.getElementById(myId).offsetHeight){
            myWidth = document.getElementById(myId).offsetWidth;
            myHeight = document.getElementById(myId).offsetHeight;
        }
        else if(document.all.myId.offsetHeight){
            myWidth = document.all.myId.offsetWidth;
            myHeight = document.all.myId.offsetHeight;
        }
        document.getElementById('modalWindowShadow').style.width = ' ' + String(myWidth) + 'px';
        document.getElementById('modalWindowShadow').style.height = ' ' + String(myHeight + 265) + 'px';
    }
}

function closeModalWindow_sk(){
    var wrapper = document.getElementById('putModalWindowsInHere');
    var divToDelete = document.getElementById('modalWindowPosition_' + numberModalWindowOpen);
    wrapper.removeChild(divToDelete);
    
    numberModalWindowOpen = numberModalWindowOpen - 1;
    
    if(numberModalWindowOpen == 0){
        document.getElementById('modalWindowShadow').style.display = 'none';
        document.getElementById('putModalWindowsInHere').style.display = 'none';
    }
}