var calcHTML = '<div>' +
               '<div>' + 
               '<div id="tabs">' + 
               '<div id="wallcoveringsTab" class="highlightedCalcTab"><div><a href="javascript:calcSection(\'wallcoverings\');"><h1>Wallcoverings</h1></a></div></div>' + 
               '<div id="paintTab" class="calcTab"><div><a href="javascript:calcSection(\'paint\');"><h1>Paint / Dry Erase</h1></a></div></div>' + 
               '<div id="digitalTab" class="calcTab"><div><a href="javascript:calcSection(\'digital\');"><h1>Digital</h1></a></div></div>' + 
               '<div id="closeButton"><div><div><a href="javascript:closeCalculator();">x</a></div></div></div>' + 
               '</div>' + 
               '<div class="content">' + 
               //wallcovering
               '<div id="wallcoveringsContent">' + 
               '<h1>Easily estimate how much product you will need.</h1>' +
               '<p>In the field below, please choose the type of product you wish to calculate as well as the approximate square footage. ' + 
               'If you are unsure of the total square footage, you can enter the room dimensions and the calculator will supply the appropriate quantities.</p>' + 
               '<div class="divider"> <div></div> <div></div> </div>' +
               '<div class="calcSection" style="width: 100px;">' +
               '<h1>Product Type</h1>' +
               '<div class="radio"><input type="radio" name="wcProdType" value="54" /> 54" wide</div>' +
               '<div class="radio"><input type="radio" name="wcProdType" value="39" /> 39" wide</div>' +
               '<div class="radio"><input type="radio" name="wcProdType" value="36" /> 36" wide</div>' +
               '<div class="radio"><input type="radio" name="wcProdType" value="30" /> 30" wide</div>' +
               '<div class="radio"><input type="radio" name="wcProdType" value="27" /> 27" wide</div>' +
               '</div>' +
               '<div class="calcSection" style="width: 230px;">' +
               '<table style="padding: 0px; margin: 0px;">' +
               '<tr> <td><input type="radio" name="wcSqFootType" value="wcSqFoot"/></td> <td colspan="3"> <h1>Square Footage</h1> </td> </tr>' +
               '<tr> <td></td> <td colspan="3"> <input id="wcSqFootageField" type="text" class="inputField" style="width: 130px;"/> </td> </tr>' +
               '<tr> <td></td> <td colspan="3"> <h1><a href="#">OR</a></h1> </td> </tr>' + 
               '<tr> <td><input type="radio" name="wcSqFootType" value="wcPerimeterHeight"/></td> <td><h1>Length (ft)</h1></td> <td></td> <td><h1>Height (ft)</h1></td> </tr>' +
               '<tr> <td></td> <td><input id="wcPerimeterField" type="text" class="inputField" /></td> <td><h1>X</h1></td> <td><input id="wcHeightField" type="text" class="inputField" /></td> </tr>' +
               '</table>' + 
               '</div>' +
               '<div class="calcSection" style="width: 230px;">' + 
               '<h1>Approx. amount of<br/> product needed:</h1>' + 
               '<div id="wcCalculated">0000 <span style="font-size:12">yards</span></div>' + 
               '<p>This calculation is rounded up. All contractors should be aware of the pattern, width, and match before submitting final figures. </p>' + 
               '</div>' + 
               '</div>' + 
               // paint / dry-earase
               '<div id="paintContent">' +
               '<h1>Easily estimate how much product you will need.</h1>' +
               '<p>In the field below, please choose the type of product you wish to calculate as well as the aproximate square footage. ' +
               'If you are unsure of the total square footage, you can enter the room dimensions and the calculator will supply the appropriate quantities.</p>' +
               '<div class="divider"> <div></div> <div></div> </div>' +
               '<div class="calcSection" style="width: 100px;">' + 
               '<h1>Product Type</h1>' +
               '<div class="radio"><input type="radio" name="ptProdType" value="50:kits" /> Dry Erase</div>' +
               '<div class="radio"><input type="radio" name="ptProdType" value="200:gallons" /> Liqua Pearl</div>' +
               '<div class="radio"><input type="radio" name="ptProdType" value="350:gallons" /> MircoTex</div>' +
               '<div class="radio"><input type="radio" name="ptProdType" value="350:gallons" /> Ceramic</div>' +
               '<div class="radio"><input type="radio" name="ptProdType" value="350:gallons" /> Slate FX</div>' +
               '</div>' +
               '<div class="calcSection" style="width: 230px;">' +
               '<table style="padding: 0px; margin: 0px;">' +
               '<tr> <td><input type="radio" name="ptSqFootType" value="ptSqFoot"/></td> <td colspan="3"> <h1>Square Footage</h1> </td> </tr>' +
               '<tr> <td></td> <td colspan="3"> <input id="ptSqFootageField" type="text" class="inputField" style="width: 130px;"/> </td> </tr>' +
               '<tr> <td></td> <td colspan="3"> <h1><a href="#">OR</a></h1> </td> </tr>' +
               '<tr> <td><input type="radio" name="ptSqFootType" value="ptPerimeterHeight"/></td> <td><h1>Length(ft)</h1></td> <td></td> <td><h1>Height (ft)</h1></td> </tr>' +
               '<tr> <td></td> <td><input id="ptPerimeterField" type="text" class="inputField" /></td> <td><h1>X</h1></td> <td><input id="ptHeightField" type="text" class="inputField" /></td> </tr>' +
               '</table>' +
               '</div>' +
               '<div class="calcSection" style="width: 230px;">' +
               '<h1>Aprox. amount of<br/> product needed:</h1>' +
               '<div id="ptCalculated">0000</div>' +
               '<div id="ptCalculatedUnits">gallons</div>' +
               '<p>This calculation is rounded up. All contractors should be aware of the pattern, width, and match before submitting final figures.</p>' +
               '</div>' +
               '</div>' +
               // digital
               '<div id="digitalContent">' +
               '<h1>How large of an image do I need?</h1>' +
               '<p>While it is best to speak to a representative regarding your image, you may use the calculator below to determine if the size of your image is large enough for your project.</p>' +
               '<div class="divider"> <div></div> <div></div> </div>' +
               '<div class="calcSection" style="width: 350px;">' +
               '<div class="radio"><input type="radio" name="dProdType" value="inches" /> I want to input the image size in inches</div>' +
               '<div class="radio"><input type="radio" name="dProdType" value="pixels" /> I want to input the image size in pixels</div>' +
               '<div class="radio"><input type="radio" name="dProdType" value="backwards" /> OR input your mural dimensions (in inches) to determine how large your image needs to be.</div>' +
               '<table>' +
               '<tr>' +
               '<td><h1>Width<span id="dWidthUnits"> (in)</span></h1></td>' +
               '<td></td>' +
               '<td><h1>Height<span id="dHeightUnits"> (in)</span></h1></td>' +
               '<td></td>' +
               '<td><div id="dResolutionLabel"><h1>Resolution (dpi)</h1></div></td>' +
               '</tr>' +
               '<tr>' +
               '<td><input id="dWidthField" type="text" class="inputField" /></td>' +
               '<td><h1>X</h1></td>' +
               '<td><input id="dHeightField" type="text" class="inputField" /></td>' +
               '<td></td>' +
               '<td><select id="dResolutionField" style="width: 130px;">' +
               '<option>300</option>' +
               '<option>150</option>' +
               '<option>72</option>' +
               '<option>50</option>' +
               '</select></td>' +
               '</tr>' +
               '</table>' +
               '</div>' +
               '<div class="calcSection" style="width: 230px;">' +
               '<h1 id="dMessage">Based on your values, the maximum estimate output size should be:</h1>' +
               '<div id="dCalculated">0000 x 0000</div><br/>' +
               '<div id="dCalculatedDPI">at 300dpi</div>' +
               '<p>*Please call your MDC Digital representative to confirm calculations.</p>' +
               '</div></div></div></div></div>';



var tabSelected = "wallcoverings";
var calcSection=function(name)
{
    if(name !== tabSelected)
    {
	$("#"+tabSelected+"Tab").addClass("calcTab").removeClass("highlightedCalcTab");
	$("#"+name+"Tab").addClass("highlightedCalcTab").removeClass("calcTab");
	$("#"+name+"Content").show();
	$("#"+tabSelected+"Content").hide();
    }
    tabSelected = name;
}
var calcInPage = false;
var showCalculator = function()
{
    if(!calcInPage)
    {
	$('#calculatorPopUp').html(calcHTML);
	wallcoveringsInit();
	paintInit();
	digitalInit();
	calcInPage = true;
    }

    $('#calculatorPopUp').toggle();
    $("#calculatorPopUp").animate({
        left: '+=2',
        }, 0, function () {
        // Animation complete.
        });
}

var closeCalculator = function()
{
    $('#calculatorPopUp').hide();
}


var wallcoveringsInit = function () {
    var prodType = $('input[name="wcProdType"]:checked').val();
    if (prodType == undefined) {
        prodType = $('input[name="wcProdType"]:first').attr("checked", true).val();
    }
    var sqFoot = $('#wcSqFootageField').val();
    var perimeter = $('#wcPerimeterField').val();
    var height = $('#wcHeightField').val();
    var usedFields = $('input[name="wcSqFootType"]:checked').val();
    var updateCalculated = function () {
        var val = (usedFields == "wcPerimeterHeight") ? perimeter * height : sqFoot;
        val = Math.ceil((val / (prodType / 12)) / 3)

        $("#wcCalculated").html(val +" <span style='font-size:14pt'>yards</span>");
    };
    updateCalculated();
    $('input[name="wcProdType"]').change(function () {
        prodType = this.value;
        updateCalculated();
    });
    $("#wcSqFootageField")
	.focus(function () {
	    $('input[value="wcSqFoot"]').attr('checked', true);
	    usedFields = "wcSqFoot";
	    updateCalculated();
	})
	.keyup(function () {
	    sqFoot = this.value;
	    updateCalculated();
	});
    $("#wcPerimeterField")
	.focus(function () {
	    $('input[value="wcPerimeterHeight"]').attr('checked', true);
	    usedFields = "wcPerimeterHeight";
	    updateCalculated();
	})
	.keyup(function () {
	    perimeter = this.value;
	    updateCalculated();
	});
    $("#wcHeightField")
	.focus(function () {
	    $('input[value="wcPerimeterHeight"]').attr('checked', true);
	    usedFields = "wcPerimeterHeight";
	    updateCalculated();
	})
	.keyup(function () {
	    height = this.value;
	    updateCalculated();
	});
    $('input[name="wcSqFootType"]').change(function () {
        usedFields = this.value;
        updateCalculated();
    });




};


var paintInit = function () {
    var prodType = $('input[name="ptProdType"]:checked').val();
    if (prodType == undefined) {
        prodType = $('input[name="ptProdType"]:first').attr("checked", true).val();
    }
    var sqFoot = $('#ptSqFootageField').val();
    var perimeter = $('#ptPerimeterField').val();
    var height = $('#ptHeightField').val();
    var usedFields = $('input[name="ptSqFootType"]:checked').val();
    var updateCalculated = function () {
        var val = (usedFields == "ptPerimeterHeight") ? perimeter * height : sqFoot;
        var prodSplit = prodType.split(":");
        val = Math.ceil((val / (prodSplit[0] )) )

        $("#ptCalculated").html(val);
        $("#ptCalculatedUnits").html(prodSplit[1]);
    };
    updateCalculated();
    $('input[name="ptProdType"]').change(function () {
        prodType = this.value;
        updateCalculated();
    });
    $("#ptSqFootageField")
	.focus(function () {
	    $('input[value="ptSqFoot"]').attr('checked', true);
	    usedFields = "ptSqFoot";
	    updateCalculated();
	})
	.keyup(function () {
	    sqFoot = this.value;
	    updateCalculated();
	});
    $("#ptPerimeterField")
	.focus(function () {
	    $('input[value="ptPerimeterHeight"]').attr('checked', true);
	    usedFields = "ptPerimeterHeight";
	    updateCalculated();
	})
	.keyup(function () {
	    perimeter = this.value;
	    updateCalculated();
	});
    $("#ptHeightField")
	.focus(function () {
	    $('input[value="ptPerimeterHeight"]').attr('checked', true);
	    usedFields = "ptPerimeterHeight";
	    updateCalculated();
	})
	.keyup(function () {
	    height = this.value;
	    updateCalculated();
	});
    $('input[name="ptSqFootType"]').change(function () {
        usedFields = this.value;
        updateCalculated();
    });
}

var digitalInit = function()
{
    var prodType = $('input[name="dProdType"]:checked').val();
    if(prodType == undefined) 
    {
	prodType = $('input[name="dProdType"]:first').attr("checked",true).val();
    }
    var width =  $('#dWidthField').val();
    var height =  $('#dHeightField').val();
    var res = $('#dResolutionField').val();
    var updateCalculated = function()
    {
	    if(prodType == "inches") {
            $('#dMessage').html("Based on your values, the maximum estimate output size should be:");
	        $('#dCalculated').html(Math.ceil((width / 50) * res) + "<span id='dCalculatedUnits' style='font-size:16px'> in.</span> x " + Math.ceil((height / 50) * res) + "<span id='dCalculatedUnits' style='font-size:16px'> in.</span>");
	    }
	    else if(prodType == "pixels")
	    {
            $('#dMessage').html("Based on your values, the maximum estimate output size should be:");
	        $('#dCalculated').html(Math.ceil(width / 50) + "<span id='dCalculatedUnits' style='font-size:16px'> in.</span> x " + Math.ceil(height / 50) + "<span id='dCalculatedUnits' style='font-size:16px'> in.</span>");
	    }
	    else if(prodType == "backwards")
	    {
            $('#dMessage').html("Based on your values, the minimum image size should be:");
	        $('#dCalculated').html(Math.ceil(50 * width / 300) + "<span id='dCalculatedUnits' style='font-size:16px'> in.</span> x " + Math.ceil(50 * height / 300) +"<span id='dCalculatedUnits' style='font-size:16px'> in.</span>");
	    }
    }
    var updateVisibilityAndLabels = function(b)
    {
	if(prodType == "inches") 
	{
	    $('#dWidthUnits').html(" (in)");
	    $('#dHeightUnits').html(" (in)");
	    $('#dResolutionField').show();
	    $('#dResolutionLabel').show();
	    $('#dCalculatedDPI').hide();
	    $('#dCalculatedUnits').html(' in.');
	}
	else if(prodType =="pixels") 
	{
	    $('#dWidthUnits').html(" (px)");
	    $('#dHeightUnits').html(" (px)");
	    $('#dResolutionField').hide();
	    $('#dResolutionLabel').hide();
	    $('#dCalculatedDPI').hide();
	    $('#dCalculatedUnits').html(' in.');
	}
	else if(prodType =="backwards")
	{
	    $('#dWidthUnits').html(" (in)");
	    $('#dHeightUnits').html(" (in)");
	    $('#dResolutionField').hide();
	    $('#dResolutionLabel').hide();
	    $('#dCalculatedDPI').show();
	    $('#dCalculatedUnits').html(' in.');
	}
    }
    updateVisibilityAndLabels();
    updateCalculated();
    $('input[name="dProdType"]').change(function()
					{
					    prodType = this.value;
					    updateVisibilityAndLabels();
					    updateCalculated();
					});
    $("#dWidthField")
	.keyup(function()
	       {
		   width = this.value;
		   updateCalculated();
	       });
    $("#dHeightField")
	.keyup(function()
	       {
		   height = this.value;
		   updateCalculated();
	       });
    $("#dResolutionField")
	.change(function()
		{
		    res = $(this).val();
		    updateCalculated();
		});
}