var inchCoef = 40;
var src = "";
var button;

var DoPost = false;

var prevSrc;
var imgLeft = AppVirtualPath+ 'img/design/text_align_left.gif';
var imgCenter = AppVirtualPath+'img/design/text_align_center.gif';
var imgRight= AppVirtualPath+'img/design/text_align_right.gif';

var styleBold = AppVirtualPath+'img/design/text_bold.gif';
var styleItalic = AppVirtualPath+'img/design/text_italic.gif';
var styleUnderline = AppVirtualPath+'img/design/text_underline.gif';
var styleStrikeout = AppVirtualPath+'img/design/text_strikeout.gif';
var z;
var FirstOptionOfddlFontColor;

var lastModDimens = 'width';

function getElementById(id)
{
    return document.getElementById(ToolID+'_'+id);
}

function initProc(IsCallback)
{
    FirstOptionOfddlFontColor = getElementById('ddlFontColor').options[0].text;
    
    button = getElementById('buttonAddToCart');
    if (button==null) button = getElementById('buttonUpdate');
    
    var image = getElementById('LetteringPreview');
    
    //Save Font Color and Surface Color
    CompareColors();
    
    //Select align
    if (!IsCallback)
    {
        if (document.forms['form1'].action.indexOf('from=')!=-1)
            window.dhx_globalImgPath="../js/dhtmlx/imgs/";
        else
            window.dhx_globalImgPath="js/dhtmlx/imgs/";
        z = new dhtmlXCombo("combo_zone2","alfa2",263, 'image');
        if (document.forms['form1'].action.indexOf('from=')!=-1)
            z.loadXML("../getFontsByCategory.aspx?category=" + getElementById("ddlCategory").options[getElementById("ddlCategory").selectedIndex].value + "&selectedFont=" + getElementById('hSelectedFontID').value,AfterLoadXml);
            //z.loadXML("../js/dhtmlx/data.xml");
        else
            z.loadXML("getFontsByCategory.aspx?category=" + getElementById("ddlCategory").options[getElementById("ddlCategory").selectedIndex].value + "&selectedFont=" + getElementById('hSelectedFontID').value,AfterLoadXml);    
        
        //z.loadXML("/js/dhtmlx/data.xml");
//        if (getElementById('hSelectedFontID').value!=-1)
//            z.selectOption(z.getOption(getElementById('hSelectedFontID').value));
//        else
//            z.selectOption(z.getOptionByIndex(1));
        z.readonly(true);    
        ImgMouseClick(document.getElementById(getElementById('hiddenAlign').value));
        ProcessStyles();
        
        ReverseCutCheckedChange(false);
        MaterialSelectionChange(getElementById('ddlMaterial'),false);
    }
}

function ProcessStyles()
{
    var cbIDs = ['cbBold','cbItalic','cbUnderline','cbStrikeOut'];
    var imgIDs = ['imgStyleBold','imgStyleItalic','imgStyleUnderline','imgStyleStrikeout'];
    for (var i=0; i<4; i++)
    {
        var checkbox = getElementById(cbIDs[i]);
        var img = document.getElementById(imgIDs[i]);
        if (checkbox.checked)
            img.src = img.src.substring(0,img.src.lastIndexOf('.')) + '_down.gif';
    }
}

function InitImageProcess()
{
    //Save original proportion
    var Width = getElementById('LetteringPreview').width/inchCoef;
    var Height = getElementById('LetteringPreview').height/inchCoef;
    document.getElementById('origProportion').value = Height/Width;
    document.getElementById('realImageWidth').value = Width;
    //------------------------
    //alert(Width);
    if (getElementById('prevWidth').value == -1) //Dimension was not set
    {
        if (getElementById('tbWidth').value == -1)
        {
            getElementById('tbWidth').value = Math.round(Width*100)/100;
            getElementById('tbHeight').value = Math.round(Height*100)/100;
        }
        //Save dimensions
        getElementById('prevWidth').value = getElementById('tbWidth').value;
        getElementById('prevHeight').value = getElementById('tbHeight').value;
    }
    else
    {
        if (lastModDimens=='width')
        {
            getElementById('tbWidth').value=getElementById('prevWidth').value;
            if (getElementById('cbMaintainProportions').checked)
            {
                CalculatePrice("width"); //heigth calculated automatically
                return;
                //getElementById('tbHeight').value = getElementById('tbWidth').value * getElementById('origProportion').value;
                //getElementById('prevHeight').value = getElementById('tbHeight').value;
            }
            else
            {
                getElementById('tbHeight').value=getElementById('prevHeight').value;
            }
        }
        else
        {
            getElementById('tbHeight').value=getElementById('prevHeight').value;            
            if (getElementById('cbMaintainProportions').checked)
            {
                CalculatePrice("height"); //heigth calculated automatically
                return;
                //getElementById('tbHeight').value = getElementById('tbWidth').value * getElementById('origProportion').value;
                //getElementById('prevHeight').value = getElementById('tbHeight').value;
            }
            else
            {
                getElementById('tbWidth').value=getElementById('prevWidth').value;
            }
        }
    }
    CalculatePrice("nothing");
    
    //getElementById('buttonPreview').disabled = false;
    //getElementById('buttonAddToCart').disabled = false;
}

function AfterLoadXml()
{
    var ind = z.getIndexByValue(getElementById('hSelectedFontID').value);
    if (ind==-1) ind = 0;
    z.selectOption(ind);
    var fAction = document.forms['form1'].action;
    if ((fAction.indexOf('product=')!=-1) || (fAction.indexOf('predefined=')!=-1 && fAction.indexOf('predefined=new')==-1))
    {
        InitImageProcess();
        getElementById('buttonPreview').disabled = false;
        button.disabled = false;
    }
    else
    {
        PreviewClick("preview");
    }
}

function AfterLoadXml_ChCat()
{
    getElementById('buttonPreview').disabled = false;
    button.disabled = false;
}

function ResizeImage(height, width)
{
    var RealWidth = document.getElementById('realImageWidth').value;
    var k = width/RealWidth;
    getElementById('LetteringPreview').width = RealWidth*inchCoef;
    getElementById('LetteringPreview').height = height*inchCoef/k;
}

function CalculatePrice(sender)
{
    if (sender!='nothing') lastModDimens=sender;
    var Width = getElementById('tbWidth').value;
    var Height = getElementById('tbHeight').value;
    
    if (isNaN(Width)||isNaN(Height))
    {
        alert("Not a number!!!");
        getElementById('tbWidth').value = getElementById('prevWidth').value;
        getElementById('tbHeight').value = getElementById('prevHeight').value;
        return;
    }
    
    var MinHeight = 0.5;
    var MaxHeight = 22;
    var MinWidth = 1;
    if (Height < MinHeight) Height = MinHeight;
    if (Height > MaxHeight) Height = MaxHeight;
    if (Width < MinWidth) Width = MinWidth;
    
    Width = Math.round(Width*100)/100;
    Height = Math.round(Height*100)/100;
    
    if (getElementById('cbMaintainProportions').checked)
    {
        var proportion = document.getElementById('origProportion').value;
        var RealWidth = document.getElementById('realImageWidth').value;
        getElementById('LetteringPreview').width = RealWidth*inchCoef;
        getElementById('LetteringPreview').height = RealWidth*inchCoef*proportion;
        if (sender=="width")
        {
            Height = Math.round(Width*proportion*100)/100;
            if (Height < MinHeight)
            {
                Height = MinHeight;
                Width = Math.round(Height/proportion*100)/100;
            }
            if (Height > MaxHeight) 
            {
                Height = MaxHeight;
                Width = Math.round(Height/proportion*100)/100;
            }
        }
        else if (sender=="height")
        {
            Width = Math.round(Height/proportion*100)/100;
        }
    }
    else ResizeImage(Height,Width);
    
    getElementById('tbHeight').value = Height;
    getElementById('tbWidth').value = Width;
    getElementById('prevHeight').value = Height;
    getElementById('prevWidth').value = Width;
    
    //Width = parseFloat(Width);
    //Height = parseFloat(Height);
    
    //BEGIN CALCULATE PRICE: Width - width of lettering, Height - height of lettering
    var effect = 1;
    
    var withShadow = (getElementById('ddlShadowType').value == "none") ? false : true;
    var withBorder = (getElementById('ddlBorderAmount').value == "0") ? false : true;
    var ShadowColor = getElementById('ddlShadowColor').value;
    var BorderColor = getElementById('ddlBorderColor').value;
    var IsEtchedGlass = (getElementById('ddlMaterial').value == "0")? false : true;
    if (withShadow || withBorder)
    {
        effect = 1.9;
        if ( withShadow && withBorder && ShadowColor!=BorderColor)
            effect = 2.25;
    }       
    
    effect *= ArrayColorsCoeffs[getElementById('ddlFontColor').selectedIndex];
    
    var Area = Width * Height;
    var stb = new Array(20);
    var sti = new Array(20);
    var rtb = new Array(20);

    sti[1] = 1.965;
    rtb[1] = 5.32;
    sti[2] = 7.86;
    rtb[2] = 6.656;
    sti[3] = 31.42;
    rtb[3] = 11.84;
    sti[4] = 168.81;
    rtb[4] = 20.848;
    sti[5] = 300.08;
    rtb[5] = 27.928;
    sti[6] = 468.9;
    rtb[6] = 34.328;
    sti[7] = 675.18;
    rtb[7] = 41.568;
    sti[8] = 919.03;
    rtb[8] = 46.072;
    sti[9] = 1200.32;
    rtb[9] = 57.176;
    sti[10] = 1519.2;
    rtb[10] = 69.144;
    sti[11] = 1875.5;
    rtb[11] = 83.2;
    sti[12] = 2269.3;
    rtb[12] = 95.152;
    sti[13] = 2700.72;
    rtb[13] = 101.576;
    sti[14] = 3169.66;
    rtb[14] = 113.512;
    sti[15] = 3675.98;
    rtb[15] = 138.672;
    sti[16] = 4219.95;
    rtb[16] = 155.52;
    sti[17] = 4801.28;
    rtb[17] = 171.336;
    sti[18] = 5420.11;
    rtb[18] = 191.784;
    sti[19] = 6770.65;
    rtb[19] = 213.688;
    
    var leftIndex = 0;
    var rightIndex = 0;
    var i;
    
    for (i = 1; i<20; i++)
    {
        if (Area <= sti[i])
        {
            rightIndex = i;
            leftIndex = i-1;
            break;
        }
    }
    
    var Price;
    var PriceByArea;
    
    if (rightIndex == 0)
    {
        Price = Area / 31.6847459848003;
        PriceByArea = Area * 0.0645;
        if (Math.round(Price) <= Math.round(PriceByArea)) Price = PriceByArea;
    
        if (Height > 20)
        {
            Price = Price * 0.8;
        }
        else if (Height > 17)
        {
            Price = Price * 0.9;
        }
    }
    else if (rightIndex == 1)
    {
        Price = Area / 0.37;
        PriceByArea = Area * 0.0645;
        if (Math.round(Price) <= Math.round(PriceByArea)) Price = PriceByArea;
        if (Height > 20)
        {
            Price = Price * 0.9;
        }
        else if (Height > 17)
        {
            Price = Price * 0.96;
        }

    }
    else
    {
        Price = (Area-sti[rightIndex])/(sti[leftIndex]-sti[rightIndex])*rtb[leftIndex] + (Area - sti[leftIndex])/(sti[rightIndex] - sti[leftIndex])*rtb[rightIndex];
        PriceByArea = Area * 0.0645;
        if (Math.round(Price) <= Math.round(PriceByArea)) Price = PriceByArea;
        if (Height > 20)
        {
            Price = Price * 0.98;
        }
        else if (Height > 17)
        {
            //Price = Price * 0.99;
        }
    }
    Price *= effect;
    if (IsEtchedGlass) Price*=1.2;
    //END CALCULATING PRICE: Price - price of lettering
                
    getElementById('inputPrice').value = '$' + Math.round(Price*100)/100;
    
    document.getElementById('labelImageWidth').innerHTML = getElementById('tbWidth').value + '"';
    document.getElementById('labelImageHeight').innerHTML = getElementById('tbHeight').value + '"';
}

function changetab(n)
{
//            getElementById("LetteringPreview").height = 20;
//            getElementById("LetteringPreview").width = 700;
    getElementById("CurrentTab").value = n;
    
    for (var i=0;i<4;i++)
        document.getElementById("tableTabs").rows[0].cells[i].style.backgroundColor = "";
    document.getElementById("tableTabs").rows[0].cells[n].style.backgroundColor = "#EEEEEE";
    
    switch (n)
    {
    case 0:
        document.getElementById("divFont").style.display = "block";
        document.getElementById("divBorder").style.display = "none";
        document.getElementById("divShadow").style.display = "none";
        document.getElementById("divEffects").style.display = "none";
        break;
    case 1:
        document.getElementById("divFont").style.display = "none";
        document.getElementById("divBorder").style.display = "block";
        document.getElementById("divShadow").style.display = "none";
        document.getElementById("divEffects").style.display = "none";
        document.getElementById("LabelFont").style.backgroundColor = "";
        break;
    case 2:
        document.getElementById("divFont").style.display = "none";
        document.getElementById("divBorder").style.display = "none";
        document.getElementById("divShadow").style.display = "block";
        document.getElementById("divEffects").style.display = "none";
        break;
    case 3:
        document.getElementById("divFont").style.display = "none";
        document.getElementById("divBorder").style.display = "none";
        document.getElementById("divShadow").style.display = "none";
        document.getElementById("divEffects").style.display = "block";
        break;
    }
}

function CompareColors()
{
    if (getElementById('ddlFontColor').value == getElementById('ddlSurfaceColor').value)
    {
        alert('Surface Color can\'t be the same as Font Color'); 
        getElementById('ddlFontColor').value = document.getElementById('fontColor').value;
        getElementById('ddlSurfaceColor').value = document.getElementById('surfaceColor').value;
    }
    else
    {
        document.getElementById('fontColor').value = getElementById('ddlFontColor').value;
        document.getElementById('surfaceColor').value = getElementById('ddlSurfaceColor').value;
    }
}



function MouseOver(obj)
{
    prevSrc = obj.src;
    if (obj.id!=getElementById('hiddenAlign').value)
    {
        obj.src = obj.src.substring(0,obj.src.lastIndexOf('.')) + '_over.gif';
    }
}

function MouseOverStyle(obj,cbID)
{
    prevSrc = obj.src;
    if (!getElementById(cbID).checked)
    {
        obj.src = obj.src.substring(0,obj.src.lastIndexOf('.')) + '_over.gif';
    }
}

function MouseOut(obj)
{
    obj.src = prevSrc;
}
function ImgMouseClick(obj)
{
    if (obj==null) return;
    getElementById('hiddenAlign').value = obj.id;
    document.getElementById('imgAlignLeft').src = imgLeft;
    document.getElementById('imgAlignCenter').src = imgCenter;
    document.getElementById('imgAlignRight').src = imgRight;
    
    var src = obj.src;    
    src=src.substring(0,src.lastIndexOf('.'))+'_down.gif';
    obj.src=src;
    prevSrc = src;
}

function StyleClick(obj, cbID)
{
    if (!getElementById(cbID).checked)
    {
        obj.src = obj.src.substring(0,obj.src.lastIndexOf('_over')) + '_down.gif';
        getElementById(cbID).checked = true;
        prevSrc = obj.src;
    }
    else
    {
        prevSrc = obj.src.substring(0,obj.src.lastIndexOf('_down')) + '.gif';
        obj.src = obj.src.substring(0,obj.src.lastIndexOf('_down')) + '_over.gif';
        getElementById(cbID).checked = false;
    }
    
}

function AddSpecSymbol(symbol)
{
    getElementById('tbLetteringText').value += symbol;
}

//Callback
function AddUpdateClick(context)
{
    if (!DoPost)
    {
        PreviewClick(context);
        return false;
    }
    var letteringForm = document.getElementById("form1");
    if (letteringForm.action.indexOf('?')==-1)
        letteringForm.action = letteringForm.action + "?action="+context;
    else
    {
        //var ind1 = letteringForm.indexOf('action');
        //letteringForm.replace(/action=(.+)[$&]/,context);
        letteringForm.action = letteringForm.action + "&action="+context;
    }
    //getElementById('hSelectedFontName').value = z.getSelectedText();
    getElementById('hSelectedFontName').value = z.getSelectedText();
    letteringForm.submit();
 //   return false;
}

function ChangeStateOfDDL(ddlID, enabled, reset)
{
    var ddl = getElementById(ddlID);
    if (reset) ddl.options[0].selected = true;
    ddl.disabled=!enabled;
}

function ReverseCutCheckedChange(showalert)
{
    var message = 'Shadow and Border are NOT available with REVERSE cut';
    var cbRevCut = getElementById('cbReverseCut');
    
    var rc_alert = document.getElementById('ReverseCutEnabledAlert');
    if (cbRevCut.checked && (!showalert || confirm(message)))
    {
        ChangeStateOfDDL('ddlShadowType',false,true);
        ChangeStateOfDDL('ddlShadowAmount',false,false);
        ChangeStateOfDDL('ddlShadowColor',false,false);
        ChangeStateOfDDL('ddlBorderAmount',false,true);
        ChangeStateOfDDL('ddlBorderColor',false,false);
        rc_alert.style.display = 'block';        
    }
    else
    {
        cbRevCut.checked = false;
        rc_alert.style.display = 'none';
        
        var ddlMater = getElementById('ddlMaterial');
        if (ddlMater.selectedIndex==1) return;
        
        ChangeStateOfDDL('ddlShadowType',true);
        ChangeStateOfDDL('ddlShadowAmount',true);
        ChangeStateOfDDL('ddlShadowColor',true);
        ChangeStateOfDDL('ddlBorderAmount',true);
        ChangeStateOfDDL('ddlBorderColor',true);
    }
}

function MaterialSelectionChange(ddl, showalert)
{
    var message = 'Shadow, Border and Text Color are not available when Material is Etched Glass';
    var divMaterialAlert = document.getElementById('divMaterialIsEtchedGlass');
    var ddlColor = getElementById('ddlFontColor');
    
    
    if (ddl.selectedIndex==1 && (!showalert || confirm(message)))
    {
        ChangeStateOfDDL('ddlShadowType',false,true);
        ChangeStateOfDDL('ddlShadowAmount',false,false);
        ChangeStateOfDDL('ddlShadowColor',false,false);
        ChangeStateOfDDL('ddlBorderAmount',false,true);
        ChangeStateOfDDL('ddlBorderColor',false,false);
        
        ChangeStateOfDDL('ddlFontColor',false,true);
        
        ddlColor.options[0].text = '';
        divMaterialAlert.style.display = 'block';
    }
    else
    {
        ddl.selectedIndex=0;
        ChangeStateOfDDL('ddlFontColor',true);
        
        ddlColor.options[0].text = FirstOptionOfddlFontColor;
        divMaterialAlert.style.display = 'none';
        
        var cbRevCut = getElementById('cbReverseCut');
        if (cbRevCut.checked) return;
        
        ChangeStateOfDDL('ddlShadowType',true);
        ChangeStateOfDDL('ddlShadowAmount',true);
        ChangeStateOfDDL('ddlShadowColor',true);
        ChangeStateOfDDL('ddlBorderAmount',true);
        ChangeStateOfDDL('ddlBorderColor',true);
    }
}

function PreviewClick(context)
{
     getElementById('buttonPreview').disabled = true;
     button.disabled = true;
	 
	 src = getElementById('LetteringPreview').src;
	 getElementById('LetteringPreview').style.display = "none";
     $('loading').style.display = "block";
     __theFormPostData = "";
     WebForm_InitCallback();
     CallServer("PreviewClickFlag",context);
}

function CategoryChanged(obj)
{
    //dhtmlx
    getElementById('buttonPreview').disabled = true;
    button.disabled = true;
    
    if (document.forms['form1'].action.indexOf('from=')!=-1)
        z.loadXML("../getFontsByCategory.aspx?category=" + getElementById("ddlCategory").options[getElementById("ddlCategory").selectedIndex].value + "&selectedFont=" + getElementById('hSelectedFontID').value,AfterLoadXml_ChCat);
        //z.loadXML("../js/dhtmlx/data.xml");
    else
        z.loadXML("getFontsByCategory.aspx?category=" + getElementById("ddlCategory").options[getElementById("ddlCategory").selectedIndex].value + "&selectedFont=" + getElementById('hSelectedFontID').value,AfterLoadXml_ChCat);    
    //-----------------------
    
    //getElementById('buttonPreview').disabled = true;
    //button.disabled = true;
    //var selectFonts = getElementById('ddlFont');
    //selectFonts.innerHTML = "";
    //selectFonts.options[0] = new Option("Loading fonts...","nofont");
    //CallServer(obj.value,'dropdownlist')
}

function ReceiveServerData(returnedData,context)
{
    if (returnedData.indexOf("_|Error|_")!=-1)
    {
        ErrorCallback(returnedData.substring(9),context);
        return;
    }
    $(ToolID+'_LetteringPreview').remove();
    src = src.substring(0,src.lastIndexOf('=') + 1) + returnedData.substring(0,returnedData.indexOf('#'));
    $('loading').style.display = "none";
    if (context == 'preview')
    {
        new Insertion.Before('imagePlace', '<img id="'+ToolID+'_LetteringPreview" src="'+src+'" onload="InitImageProcess(); button.disabled=false; document.getElementById(ToolID+\'_buttonPreview\').disabled=false;"/>');
    }
    else
    {
        new Insertion.Before('imagePlace', '<img id="'+ToolID+'_LetteringPreview" src="'+src+'" onload="InitImageProcess(); DoPost=true; AddUpdateClick(\''+context+'\');"/>'); //getElementById(\''+context+'\').click();
    }
    var ind = returnedData.indexOf('StyleChangedTo');
    if (ind!=-1)
    {
        var style = returnedData.substring(ind+14);
        getElementById('cb' + style).checked=true;
        ProcessStyles();
    }
}

function ErrorCallback(message, context)
{
    if (message.indexOf("SessionExpired")!=-1)
    {
        //location.href = "error.aspx?descr=sessionexp";
        location.href = "default.aspx";
    }
    else
        if (message.indexOf("notsupportedsymbols")!=-1)
        {
            var mess = message.substring(19,message.indexOf('_|endflag|_'));
            var symbols = mess.split(',');
            for (var i=0; i<symbols.length; i++)
            {
                if (symbols[i].indexOf('#')!=-1)
                {
                    symbols[i] = symbols[i].replace('&#','');
                    symbols[i] = symbols[i].replace(';','');
                    symbols[i] = String.fromCharCode(symbols[i]);
                }
            }
            
            alert('Symbols: ' + symbols.join(', ') + ' - are not supported by this font!');
        }
        else
            if (message.indexOf("notsupportedstyles")!=-1)
            {
                var mess = message.substring(18,message.indexOf('_|endflag|_'));
                var symbols = mess.split(',');
                for (var i=0; i<symbols.length; i++)
                {
                    if (symbols[i].indexOf('#')!=-1)
                    {
                        symbols[i] = symbols[i].replace('&#','');
                        symbols[i] = symbols[i].replace(';','');
                        symbols[i] = String.fromCharCode(symbols[i]);
                    }
                }
                
                alert('Supported styles are only: ' + symbols.join(', ') + '!');
            }
            else
                alert('Error while updating lettering image');
        getElementById('buttonPreview').disabled = false;
        
}