var pix = 8;	//pixels
var incm = 2.54;	
$(document).ready(function () {
    $("#mat1").css({
        left: "50%",
        "background-color": "white"
    });
    $("#mat2").hide();
    $("#mat3").hide();
    $("#midmat").hide();
    $("#botmat").hide();
    $("#cmin").change(function () {
        cm2inch();
        getfinalsize()
    });
	$('#shadowboxcolor').val('FEC8DB');
    $("#shadowbox").click(function () {
        toggleShadow();
    });
    $(".topmatsize").keyup(function () {
        dostuff()
    });
    $("#midmatsize").keyup(function () {
        dostuff()
    });
    $("#botmatsize").keyup(function () {
        dostuff()
    });
    $("#bwidth").keyup(function () {
        setTimeout(function () {
            matboard();
            update();
        }, 1500);
    });
    $("#bheight").keyup(function () {
        setTimeout(function () {
            matboard();
            update();
        }, 1500);
    });
    $("#opening_width").keyup(function () {
        if (!is_oversize()) {
            //setmat1("000000");
            update()
        }
    });
    $("#opening_height").keyup(function () {
        if (!is_oversize()) {
            //setmat1("000000");
            update()
        }
    });
    $("#mat1chk").click(function () {
        if (!is_oversize()) {
            toggle();
            doMat1();
            doOpening();
            doMat1();
            update()
        }
    });
    $("#mat2chk").click(function () {
        if (!is_oversize()) {
            if ($("#cmin").val() == "cm") {
                $("#midmatsize").val(1)
            } else {
                $("#midmatsize").val(0.4)
            }
            setmat2("5A7233");
            dostuff()
        }
    });
    $("#mat3chk").click(function () {
        if (!is_oversize()) {
            if ($("#cmin").val() == "cm") {
                $("#midmatsize").val(1);
                $("#botmatsize").val(1)
            } else {
                $("#midmatsize").val(0.4);
                $("#botmatsize").val(0.4)
            }
            setmat2("5A7233");
            setmat3("1E407D");
            dostuff()
        }
    });
    $("#opening_width").val(8);
    $("#opening_height").val(10);
    $("#cmin").val("inch");
    $(".mes").each(function () {
        $(this).html("inch")
    });
    init();
    doMat1();
    setmat1("000000");
    getfinalsize();
    $("#opening").css({
        "background-color": "#CCCCCC"
    });
    getPrice();
    $("#boxcolor").hide();
	getURL();
	
});

function getURL() {
    url = location.href.substring((location.href.lastIndexOf("/")) + 1);
    if (url == 'shadow-box-creator.html') {
        $('#shadowbox').attr('checked', true);
		//$("img.dropshadow").wrap("<div id='wrap0'></div>");
        //setboxcolor($("#shadowboxcolor").val());
        //$("#boxcolor").show();
        toggleShadow();
    }
}

function dostuff() {
    if (!is_oversize()) {
        toggle();
        doMat3();
        doMat2();
        doMat1();
        doOpening();
        update()
    }
}

function matboard() {
    if ($("#bwidth").val() != "" && $("#bheight").val() != "") {
        if (parseFloat($("#bwidth").val()) <= parseFloat($("#opening_width").val())) {
            alert("Matboard width must be greater than opening width.")
        } else {
            if (parseFloat($("#bheight").val()) <= parseFloat($("#opening_height").val())) {
                alert("Matboard height must be greater than opening height.")
            } else {
                if ($("#cmin").val() == "cm") {
                    var e = $("#bwidth").val();
                    var f = $("#bheight").val()
                } else {
                    var e = $("#bwidth").val() * incm;
                    var f = $("#bheight").val() * incm
                }
                fwid = e * pix;
                fhei = f * pix;
                $("#mat1").css({
                    width: parseFloat(fwid),
                    height: parseFloat(fhei)
                });
                if ($("#mat3chk").attr("checked")) {
                    a = (($("#bheight").val() - $("#opening_height").val()) / 2) - $("#midmatsize").val() - $("#botmatsize").val();
                    b = (($("#bheight").val() - $("#opening_height").val()) / 2) - $("#midmatsize").val() - $("#botmatsize").val();
                    c = (($("#bwidth").val() - $("#opening_width").val()) / 2) - $("#midmatsize").val() - $("#botmatsize").val();
                    d = (($("#bwidth").val() - $("#opening_width").val()) / 2) - $("#midmatsize").val() - $("#botmatsize").val();
                    $("#t_topmatsize").val(Math.round(a * 100) / 100);
                    $("#b_topmatsize").val(Math.round(b * 100) / 100);
                    $("#r_topmatsize").val(Math.round(c * 100) / 100);
                    $("#l_topmatsize").val(Math.round(d * 100) / 100)
                } else {
                    if ($("#mat2chk").attr("checked")) {
                        a = (($("#bheight").val() - $("#opening_height").val()) / 2) - $("#midmatsize").val();
                        b = (($("#bheight").val() - $("#opening_height").val()) / 2) - $("#midmatsize").val();
                        c = (($("#bwidth").val() - $("#opening_width").val()) / 2) - $("#midmatsize").val();
                        d = (($("#bwidth").val() - $("#opening_width").val()) / 2) - $("#midmatsize").val();
                        $("#t_topmatsize").val(Math.round(a * 100) / 100);
                        $("#b_topmatsize").val(Math.round(b * 100) / 100);
                        $("#r_topmatsize").val(Math.round(c * 100) / 100);
                        $("#l_topmatsize").val(Math.round(d * 100) / 100)
                    } else {
                        $("#t_topmatsize").val(($("#bheight").val() - $("#opening_height").val()) / 2);
                        $("#b_topmatsize").val(($("#bheight").val() - $("#opening_height").val()) / 2);
                        $("#r_topmatsize").val(($("#bwidth").val() - $("#opening_width").val()) / 2);
                        $("#l_topmatsize").val(($("#bwidth").val() - $("#opening_width").val()) / 2)
                    }
                }
            }
        }
    }
}

function submitform(e) {
    if (e == 1) {
        document.mat_cut.action = "/?file=mat_cutter&s=1"
    } else {
        document.mat_cut.action = "/?file=mat_cutter&s=2"
    }
    document.mat_cut.submit()
}

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
					$(this).select();
                    return false;
                }
            });

            return false;
        }
    }
}

document.onkeypress = preventEnterSubmit;

function update() {
    for (i = 0; i < 2; i++) {
        doOpening();
        doMat1();
        doMat2();
        doMat3();
        pos()
    }
    getPrice()
}

function getPrice() {
    $("#price").html("<img src='/images/load.gif' /> Calculating Price...");
    var e = parseFloat($("#bwidth").val());
    var f = parseFloat($("#bheight").val());
    if ($("#shadowbox").attr("checked")) {
        s = 1
    } else {
        s = 0
    }
    if ($("#cmin").val() != "cm") {
        e = e * incm;
        f = f * incm
    }
    if ($("#mat3chk").attr("checked")) {
        c = 3
    } else {
        if ($("#mat2chk").attr("checked")) {
            c = 2
        } else {
            c = 1
        }
    }
    url = "/?file=mat_cutter&a=getprice&w=" + e + "&h=" + f + "&c=" + c + "&s=" + s;
    $.get(url, function (g) {
        $("#price").html("$" + g + " AUD");
        $("#fprice").val(g)
    })
}

function pos(f) {
    var e = 0;
    if (f == "opening") {
        if ($("#mat2chk").attr("checked")) {
            var e = parseFloat($("#midmatsize").val())
        } else {
            if ($("#mat3chk").attr("checked")) {
                var e = parseFloat($("#midmatsize").val()) + parseFloat($("#botmatsize").val())
            }
        }
    } else {
        if (f == "mat2") {
            if ($("#mat2chk").attr("checked")) {
                var e = 0
            } else {
                if ($("#mat3chk").attr("checked")) {
                    var e = 0
                }
            }
        } else {
            if (f == "mat3") {
                if ($("#mat2chk").attr("checked")) {
                    var e = parseFloat($("#midmatsize").val())
                } else {
                    if ($("#mat3chk").attr("checked")) {
                        var e = parseFloat($("#midmatsize").val())
                    }
                }
            } else {}
        }
    }
    if ($("#cmin").val() == "cm") {
        movey = (e + parseFloat($("#t_topmatsize").val())) * pix;
        movex = (e + parseFloat($("#l_topmatsize").val())) * pix
    } else {
        movey = (e + parseFloat($("#t_topmatsize").val())) * pix * incm;
        movex = (e + parseFloat($("#l_topmatsize").val())) * pix * incm
    }
    elem = xGetElementById(f);
    xMoveTo(elem, movex, movey);
    if (f != "opening") {
        doOpening()
    }
}

function is_oversize() {
    w = parseFloat($("#opening_width").val());
    h = parseFloat($("#opening_height").val());
    var e = w + parseFloat($("#r_topmatsize").val()) + parseFloat($("#l_topmatsize").val());
    var f = h + parseFloat($("#t_topmatsize").val()) + parseFloat($("#b_topmatsize").val());
    if ($("#mat3chk").attr("checked")) {
        e = e + ((parseFloat($("#midmatsize").val()) * 2) + (parseFloat($("#botmatsize").val()) * 2));
        f = f + ((parseFloat($("#midmatsize").val()) * 2) + (parseFloat($("#botmatsize").val()) * 2))
    }
    if ($("#mat2chk").attr("checked")) {
        e = e + (($("#midmatsize").val() * 2));
        f = f + (($("#midmatsize").val() * 2))
    }
    if ($("#cmin").val() == "cm") {
        if ((e > 152.4 || f > 152.4) || (e > 101.6 && f > 101.6)) {
			alert("Mat can't exceed 101.6x152.4 cm (portrait) or 152.4x101.6 cm (landscape)");
            return true
        }
    } else {
        if ($("#cmin").val() == "inch") {
            if ((e > 60 || f > 60) || (e > 40 && f > 40)) {
				alert("Mat can't exceed 101.6x152.4 cm (portrait) or 152.4x101.6 cm (landscape)");
                return true
            }
        }
    }
    return false
}

function init() {
    if ($("#cmin").val() == "cm") {
        $(".topmatsize").each(function () {
            $(this).val(5)
        })
    } else {
        $(".topmatsize").each(function () {
            $(this).val(2)
        })
    }
}

function cm2inch() {
    if ($("#cmin").val() == "cm") {
        $(".mes").each(function () {
            $(this).html("cm")
        });
        $("#opening_width").val((parseFloat($("#opening_width").val()) * incm).toFixed(1));
        $("#opening_height").val((parseFloat($("#opening_height").val()) * incm).toFixed(1));
        $(".topmatsize").each(function () {
            $(this).val(($(this).val() * incm).toFixed(1))
        });
        $("#midmatsize").val((parseFloat($("#midmatsize").val()) * incm).toFixed(1));
        $("#botmatsize").val((parseFloat($("#botmatsize").val()) * incm).toFixed(1))
    } else {
        $(".mes").each(function () {
            $(this).html("inch")
        });
        $("#opening_width").val((parseFloat($("#opening_width").val()) / incm).toFixed(1));
        $("#opening_height").val((parseFloat($("#opening_height").val()) / incm).toFixed(1));
        $(".topmatsize").each(function () {
            $(this).val(($(this).val() / incm).toFixed(1))
        });
        $("#midmatsize").val((parseFloat($("#midmatsize").val()) / incm).toFixed(1));
        $("#botmatsize").val((parseFloat($("#botmatsize").val()) / incm).toFixed(1))
    }
    getfinalsize()
}

function toggle() {
    if ($("#mat3chk").attr("checked")) {
        $("#midmat").show();
        $("#mat2color").show();
        $("#botmat").show();
        $("#mat3color").show()
    } else {
        if ($("#mat2chk").attr("checked")) {
            $("#midmat").show();
            $("#mat2color").show();
            $("#botmat").hide();
            $("#mat3color").hide()
        } else {
            $("#midmat").hide();
            $("#mat2color").hide();
            $("#botmat").hide();
            $("#mat3color").hide()
        }
    }
}

function toggleShadow() {
    if ($("#shadowbox").attr("checked")) {
        $("img.dropshadow").wrap("<div id='wrap0'></div>");
        setboxcolor($("#shadowboxcolor").val());
        $("#boxcolor").show();
    } else {
        $(".wrap0").remove();
        $("#opening").html('<img src="/images/spacer.gif" width="100%" height="100%" class="dropshadow" alt="" />');
        setboxcolor("CCCCCC");
        $("#boxcolor").hide()
    }
    getPrice()
}

function doOpening() {
    if ($("#cmin").val() == "cm") {
        var e = $("#opening_width").val();
        var f = $("#opening_height").val()
    } else {
        var e = $("#opening_width").val() * incm;
        var f = $("#opening_height").val() * incm
    }
    fwid = e * pix;
    fhei = f * pix;
    $("#opening").css({
        width: parseFloat(fwid),
        height: parseFloat(fhei)
    });
    pos("opening")
}

function doMat1() {
    $("#mat1").hide();
    $("#mat2").hide();
    $("#mat3").hide();
    var g = new Array();
    if ($("#cmin").val() == "cm") {
        g[0] = $("#t_topmatsize").val() * pix;
        g[1] = $("#b_topmatsize").val() * pix;
        g[2] = $("#r_topmatsize").val() * pix;
        g[3] = $("#l_topmatsize").val() * pix;
        var k = $("#midmatsize").val() * pix;
        var e = $("#botmatsize").val() * pix
    } else {
        g[0] = $("#t_topmatsize").val() * pix * incm;
        g[1] = $("#b_topmatsize").val() * pix * incm;
        g[2] = $("#r_topmatsize").val() * pix * incm;
        g[3] = $("#l_topmatsize").val() * pix * incm;
        var k = $("#midmatsize").val() * pix * incm;
        var e = $("#botmatsize").val() * pix * incm
    }
    if ($("#mat3chk").attr("checked")) {
        $("#mat1").show();
        $("#mat2").show();
        $("#mat3").show();
        var f = $("#opening").width();
        var j = $("#opening").height();
        fwid = (f + g[2] + g[3] + (k * 2) + (e * 2));
        fhei = (j + g[0] + g[1] + (k * 2) + (e * 2))
    } else {
        if ($("#mat2chk").attr("checked")) {
            $("#mat1").show();
            $("#mat2").show();
            var f = $("#opening").width();
            var j = $("#opening").height();
            fwid = (f + g[2] + g[3] + (k * 2));
            fhei = (j + g[0] + g[1] + (k * 2))
        } else {
            $("#mat1").show();
            var k = 0;
            var f = $("#opening").width();
            var j = $("#opening").height();
            fwid = (f + g[2] + g[3] + (k * 2));
            fhei = (j + g[0] + g[1] + (k * 2))
        }
    }
    $("#mat1").css({
        width: parseFloat(fwid),
        height: parseFloat(fhei),
        left: "0"
    });
    pos("opening");
    getfinalsize();
}

function doMat2() {
    if ($("#cmin").val() == "cm") {
        var j = $("#midmatsize").val() * pix;
        var e = $("#botmatsize").val() * pix
    } else {
        var j = $("#midmatsize").val() * pix * incm;
        var e = $("#botmatsize").val() * pix * incm
    }
    if (isNaN(parseInt(j))) {
        j = 0;
    }
    if (isNaN(parseInt(e))) {
        e = 0;
    }
    var f = $("#opening").width();
    var g = $("#opening").height();
    if ($("#mat3chk").attr("checked")) {
        $("#mat3").show();
        fwid = (f + (j * 2) + (e * 2));
        fhei = (g + (j * 2) + (e * 2));
    } else {
        if ($("#mat2chk").attr("checked")) {
            $("#mat2").show()
        } else {
            $("#mat2").hide()
        }
        fwid = (f + (j * 2));
        fhei = (g + (j * 2));
    }
    $("#mat2").css({
        width: parseFloat(fwid),
        height: parseFloat(fhei)
    });
    pos("mat2")
}

function doMat3() {
    doMat2();
    if ($("#cmin").val() == "cm") {
        var j = $("#midmatsize").val() * pix;
        var e = $("#botmatsize").val() * pix
    } else {
        var j = $("#midmatsize").val() * pix * incm;
        var e = $("#botmatsize").val() * pix * incm
    }
    if (isNaN(parseInt(j))) {
        j = 0;
    }
    if (isNaN(parseInt(e))) {
        e = 0;
    }
    if ($("#mat3chk").attr("checked")) {
        $("#mat3").show();
        var f = $("#opening").width();
        var g = $("#opening").height();
        fwid = (f + (e * 2));
        fhei = (g + (e * 2));
        $("#mat3").css({
            width: parseFloat(fwid),
            height: parseFloat(fhei)
        });
        pos("mat3");
        pos("opening");
        getfinalsize();
    }
}

function setmat1(f) {
	
	$("#mat1").css("background-color", "#" + f);
	$("#mat1").css("border", "1px solid #cccccc");
	if (!$("#shadowbox").attr("checked")) {
		$("#opening").css("background-color", "#CCCCCC");
	}
	$("#color").val(f);
	$("#color1t").val($("#color option:selected").text())

}

function setmat2(f) {
    $("#mat2").css("background-color", "#" + f);
    if (!$("#shadowbox").attr("checked")) {
        $("#opening").css("background-color", "#CCCCCC");
    }
    $("#color2").val(f);
	$("#color2t").val($("#color2 option:selected").text());
}

function setmat3(f) {
    $("#mat3").css("background-color", "#" + f);
    if (!$("#shadowbox").attr("checked")) {
        $("#opening").css("background-color", "#CCCCCC");
    }
    $("#color3").val(f);
	$("#color3t").val($("#color3 option:selected").text());
	
}

function setboxcolor(f) {
    $("#opening").css("background-color", "#" + f);
    $("#shadow_box_color_hex").val($("#shadowboxcolor").val());
	$("#colorshadow").val($("#shadowboxcolor option:selected").text());
}

function getfinalsize() {
    w = parseFloat($("#opening_width").val());
    h = parseFloat($("#opening_height").val());
    var e = w + parseFloat($("#r_topmatsize").val()) + parseFloat($("#l_topmatsize").val());
    var f = h + parseFloat($("#t_topmatsize").val()) + parseFloat($("#b_topmatsize").val());
    if ($("#mat3chk").attr("checked")) {
        e = e + ((parseFloat($("#midmatsize").val()) * 2) + (parseFloat($("#botmatsize").val()) * 2));
        f = f + ((parseFloat($("#midmatsize").val()) * 2) + (parseFloat($("#botmatsize").val()) * 2));
    }
    if ($("#mat2chk").attr("checked")) {
        e = e + (($("#midmatsize").val() * 2));
        f = f + (($("#midmatsize").val() * 2));
    }
    $("#bwidth").val(e.toFixed(1));
    $("#bheight").val(f.toFixed(1));
    if ($("#cmin").val() == "cm") {
        $("#msize").html("cm")
    } else {
        $("#msize").html("inch")
    }
    $("#fwidth").val(e.toFixed(1));
    $("#fheight").val(f.toFixed(1))
};