var _colorAlert;
var _requiresColors = false;
var _isOpen = false;
var _plateWidth = 0;

function showExtraInfo(controlPrefix, sliderControl)
{
    if (controlPrefix != "") controlPrefix += "_";
    var infoState = document.getElementById(controlPrefix + "extraInfoState");
    if (infoState.value == "0")
    {
        sliderControl.slideIn();	
        infoState.value = "1";
    }
    else
    {
        sliderControl.slideOut();	
        infoState.value = "0";
    }
}

function showBlog()
{
    var offsetDiv = document.getElementById("product-data");
    var pos = findElementPos(offsetDiv);        
    var element = document.getElementById('blog-display');
    
    element.style.left = pos[0] + 200 + "px";
    element.style.display = "block";
}

function closeBlog()
{
    document.getElementById('blog-display').style.display = "none";
}

function showTextDisplay(clientID)
{
    var panel = document.getElementById(clientID);
    var offsetDiv = document.getElementById("product-data");
    var pos = findElementPos(offsetDiv);

    panel.style.display = 'block';
    panel.style.left = pos[0] + 60 + "px";
}

function hideColors(controlPrefix, sliderID, sliderHeaderID)
{

    _colorAlert = document.getElementById("color-alert");
    if (sliderID != undefined)
    {
        try
        {
            var offsetDiv = document.getElementById("product-image");
            var pos = findElementPos(offsetDiv);
            var colorRow = document.getElementById(sliderID);
            var headerRow = document.getElementById(sliderHeaderID);   
            colorRow.style.width = "140px";
            headerRow.style.width = "140px";
            colorRow.style.left = pos[0] + 320 + "px";
            
            if (controlPrefix != "") controlPrefix += "_";
            document.getElementById(controlPrefix + "colorIsOpen").value = "0";
        }
        catch(e) 
        { }
    }
}

function showColors(controlPrefix, sliderID, sliderHeaderID, colorCols)
{

    if (controlPrefix != "") controlPrefix += "_";
    if (document.getElementById(controlPrefix + "colorIsOpen").value == "1")
    {
        return;
    }

    var offsetDiv = document.getElementById("product-image");
    var pos = findElementPos(offsetDiv);	
    var colorRow = document.getElementById(sliderID);
    var headerRow = document.getElementById(sliderHeaderID);
    var plateWidth = ((colorCols - 1) * 133);

    _colorAlert.style.display = "none";
    headerRow.style.width = 140 + ((colorCols - 1) * 133) + "px";       
    
    document.getElementById(controlPrefix + "colorIsOpen").value = "1";
    _plateWidth = 140 + plateWidth	    
    
    var myEffect = new Fx.Morph(colorRow, {duration: 700, transition: Fx.Transitions.Sine.easeOut});
    myEffect.start({
        'left': [pos[0] + 320, pos[0] + 320 - plateWidth], 
        'width': [140, _plateWidth]
    });
   
}    


function selectColor(controlPrefix,article, name, color, colorUrl, price, discount)
{
    if (controlPrefix != "") controlPrefix += "_";
    //document.getElementById(controlPrefix + "color_picker_display_label").innerHTML = name;
    document.getElementById(controlPrefix + "color_picker_display_label").innerHTML = decodeString(name);
    
    if (colorUrl != "")
    {
        document.getElementById(controlPrefix + "color_picker_display_color").style.backgroundColor = "";
        document.getElementById(controlPrefix + "color_mask").src = colorUrl;
    } else {
        document.getElementById(controlPrefix + "color_picker_display_color").style.backgroundColor = "#" + color;
        document.getElementById(controlPrefix + "color_mask").src = "/images/color-picker-mask.png";            
    }
    document.getElementById(controlPrefix + "articleNumber").value = article;
    //document.getElementById(controlPrefix + "colorName").value = name;
    document.getElementById(controlPrefix + "colorName").value = name;
    document.getElementById(controlPrefix + "colorCode").value = color;
    
    if (_colorAlert == undefined) _colorAlert = document.getElementById("color-alert");
    
    _colorAlert.style.display = "none";
    document.getElementById(controlPrefix + "labelArticleNumber").innerHTML = article;
    
 
    _adjustPrice = 0;
    _adjustDiscount = 0;
    if (price != undefined)
    {
        document.getElementById(controlPrefix + 'price').innerHTML = price;
        _adjustPrice = price;
        _adjustDiscount = discount;
        var discPrice = discount;
        if (discount.indexOf(',') > -1) discount = parseFloat(discount);
        if (price.indexOf(',') > -1) price = parseFloat(price);                          
        if ((discount - 0 > 0) && (discount - 0 < price - 0))
        {                
            document.getElementById(controlPrefix + 'discounted').innerHTML = discPrice;
            document.getElementById(controlPrefix + 'discounted_label').style.display = "inline";
            document.getElementById(controlPrefix + 'discounted_currency_name').style.display = "inline";
            document.getElementById(controlPrefix + 'discounted_currency_name').style.float = "left";
            document.getElementById(controlPrefix + 'discounted').style.display = "inline";                
        }
        else
        {                
            document.getElementById(controlPrefix + 'discounted_label').style.display = "none";
            document.getElementById(controlPrefix + 'discounted_currency_name').style.display = "none";
            document.getElementById(controlPrefix + 'discounted').style.display = "none";        
        }
    }
    
}

function requiresColor(controlPrefix)
{
    if ((_requiresColors == true) && (document.getElementById(controlPrefix + 'articleNumber').value == ''))
    {
        //var offsetDiv = document.getElementById("product-data");
        var offsetDiv = document.getElementById(controlPrefix + "product_options");
        var pos = findElementPos(offsetDiv);
        _colorAlert.style.left = pos[0] - 350 + "px";
        _colorAlert.style.top = pos[1] + 80 + "px";
        _colorAlert.style.display = "block";
        return false;
    }
    return true;
}
   
function adjustColorDisplay(colorDisplayID)
{
    try
    {    
        var offsetDiv = document.getElementById("product-data");
        var pos = findElementPos(offsetDiv);
        document.getElementById(colorDisplayID).style.left = pos[0] + 150 + "px";
    }
    catch (e)
    { }
}

 
function loadColors()
{
    var el = $('<% =colorSlider.ClientID %>');
    el.fade(1);     
}