function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
    }
    return rv;
}

function set_custom_fabric_array()
{
    sashing = new Array();
    // The array is:
    // 1. Human readable text
    // 2. image file location
    // 3. Fabric name
    //
    // The small grapics must be 64x64. There must also be 234x234
    // large versions named the same bt without the _sm portion of
    // the file name.  So if there is a red_marble_sm.jpg that's
    // 64x64 and a red_marble.jpg that's 234x234.
    //
    sashing.push(new Array(NO_SASHING,"no_sashing.png",NO_SASHING));
    sashing.push(new Array(STANDARD_SASHING,"standard.jpg",STANDARD_SASHING));
    sashing.push(new Array("Gold Leaf", "gold_leaf_sm.png",""));
    sashing.push(new Array("Colored Arrow","colored_arrows_sm.png",""));
    sashing.push(new Array("Green Vine", "green_vine_sm.png",""));
    sashing.push(new Array("Red Hex", "orange_hex_sm.png",""));
    sashing.push(new Array("Blue Dot", "purple_dot_sm.png",""));
    sashing.push(new Array("Purple Flower", "purple_flower_sm.png",""));

    sashing.push(new Array("Fancy Black", "fancy_black_sm.png",""));
    sashing.push(new Array("Fancy Green", "fancy_green_sm.png",""));
    sashing.push(new Array("Fancy Pink", "fancy_pink_sm.png",""));
    sashing.push(new Array("Fancy Tan", "fancy_tan_sm.png",""));
    sashing.push(new Array("Fancy Blue", "fancy_blue_sm.png",""));


    // Tack on the image path
    for(i=0; i<sashing.length; i++)
    {
        sashing[i][1] = IMAGE_PATH + sashing[i][1]
        if (sashing[i][2].length == 0)
        {
            sashing[i][2] = sashing[i][0]; //.toLowerCase().replace(" ","_")
        }
    }
}

/*
 * This is weak. These colors must match the colors in the order.css definitions
 * such as div#dark_red_backing_color.
 */
function set_background_fabric_colors()
{
    RED = 0
    DARK_BLUE = 1
    BLACK = 2
    BROWN = 3
    PALE_GREEN = 4
    LIGHT_BLUE = 5
    TAN = 6

    colors = [ "#990000", "#333399", "#000000", "#663333", "#99cc66", "#6699ff", "#cccc66"]
    color_texts = ["red", "dark blue", "black", "brown", "pale green", "light blue", "tan"]
}

function set_prices()
{
    DIM = 0
    BASE_PRICE = 1
    ADD_FOR_SASHING = 2
    ADD_FOR_VARIEGATED = 3
    ADD_FOR_FANCY_SASHING = 4
    APPROX_SIZE = 5
    NUMBER_OF_SHIRTS = 6
    WIDTH=7
    HEIGHT=8
    REVIEW_BASE=9
    SHIPPING=10

    // base price, add for sashing, add for variegated thread, add for fancy sashing
    prices = new Array(
        new Array("-",  95*1.2,  20*1.2, 5, 20*1.2, "", -1, 3, 3, 100, 18),
        new Array("-", 120*1.2,  30*1.2, 5, 25*1.2, "", -1, 3, 4, 100, 18),
        new Array("-", 135*1.2,  40*1.2, 5, 30*1.2, "", -1, 3, 5, 100, 18),
        new Array("-", 140*1.2,  40*1.2, 5, 30*1.2, "", -1, 4, 4, 75, 18),
        new Array("-", 165*1.2,  50*1.2, 5, 35*1.2, "", -1, 4, 5, 75, 18),
        new Array("-", 190*1.2,  60*1.2, 5, 40*1.2, "", -1, 4, 6, 75, 18),
        new Array("-", 200*1.2,  65*1.2, 5, 40*1.2, "", -1, 5, 5, 60, 18),
        new Array("-", 220*1.2,  70*1.2, 5, 45*1.2, "", -1, 5, 6, 60, 18),
        new Array("-", 260*1.2,  80*1.2, 5, 50*1.2, "", -1, 6, 6, 50, 18),
        new Array("-", 295*1.2,  90*1.2, 5, 55*1.2, "", -1, 6, 7, 50, 18),
        new Array("-", 335*1.2, 100*1.2, 5, 60*1.2, "", -1, 7, 7, 40, 18)
        )
    // Calculated columns now that I added an explicit width and height.
    for(i=0; i<prices.length; i++)
    {
        prices[i][DIM] = prices[i][WIDTH] + "x" + prices[i][HEIGHT]
        prices[i][NUMBER_OF_SHIRTS] = prices[i][WIDTH] * prices[i][HEIGHT]
        prices[i][APPROX_SIZE] = block_to_ft_in(prices[i][WIDTH]) + " x " + block_to_ft_in(prices[i][HEIGHT])
    }
}

function fiddle_with_menu_actions_and_buttons()
{
    fiddle_with_menu_actions();
    fiddle_with_buttons();
}

function fiddle_with_buttons()
{
    var a = ['size','backing_color','sashing_option','thread_option', 'review'];
    var b = ['Select the Size', 'Backing Color', 'Sashing Options', 'Thread Option', 'Review Your Order'];
    var p, n;

    for(var i=0; i<a.length; i++)
    {
        if (current_page == a[i])
        {
            p = i-1;
            n = i+1;
        }
    }

    var s = "";
    if (p >= 0 && eval(a[p]+"_page_active()"))
    {
        s += arrow("prev", a[p], "Previous Step", "");
    }
    else
    {
        if (p >= 0) s += arrow("prev", b[p], "Previous Step", "_inactive");
    }

    if (n < a.length && eval(a[n]+"_page_active()"))
    {
        s += arrow("next", a[n], "Next Step", "");
    }
    else
    {
        if (n < a.length) s += arrow("next", b[n], "Next Step", "_inactive");
    }

    document.getElementById(current_page+"_button_container").innerHTML = s;
}

function arrow(dir, link, text, inactive)
{
    s = "";
    if (inactive == "")
        s += "<div class='"+dir+"_arrow_body' onclick=\"javascript:to_page('"+link+"')\">"
    else
        s += "<div class='"+dir+"_arrow_body'>"

    s += "<div class='"+dir+"_arrow_text"+inactive+"'>"+text+"</div>"
    s += "</div>"

    return s;
}

function fiddle_with_menu_actions()
{
    var s = "";

    s += "\n<div class=\"menu_tab_kern\"></div>";

    s += make_menu_div(size_page_active, "size", "1. Select the Size");
    s += "\n<div class=\"menu_tab_kern\"></div>";

    s += make_menu_div(backing_color_page_active, "backing_color", "2. Backing Color");
    s += "\n<div class=\"menu_tab_kern\"></div>";

    s += make_menu_div(sashing_option_page_active, "sashing_option", "3. Sashing Options");
    s += "\n<div class=\"menu_tab_kern\"></div>";

    s += make_menu_div(thread_option_page_active, "thread_option", "4. Thread Option");
    s += "\n<div class=\"menu_tab_kern\"></div>";

    s += make_menu_div(review_page_active, "review", "5. Review Your Order");
    // s += "\n<div class=\"menu_tab_kern\"></div>";

    s += "\n<div style=\"clear:both\"></div>\n";
    document.getElementById("menu_items").innerHTML = s;
}

function make_menu_div(active_func, base_str, desc)
{
    var div="";
    if (current_page == base_str)
    {
        div = "selected_menu_item";
        onclick = "onclick=\"to_page('"+base_str+"')\"";
    }
    else if (active_func())
    {
        div = "unselected_menu_item";
        onclick = "onclick=\"to_page('"+base_str+"')\"";
    }
    else
    {
        div = "unselectable_menu_item";
        onclick = "";
    }
    var s = "";
    s += "\n<div id='"+base_str+"_menu' class=\""+div+"\" "+onclick+">"
    s += "\n<div class='left'></div>"
    s += "\n<div class='tab_text'>"+desc+"</div>"
    s += "\n<div class='right'></div>"
    s += "\n</div>"
    return s;
}

function size_page_active()
{
    return true;
}

function backing_color_page_active()
{
    return size_page_active() && size_selection.length > 0; // It's ok as long as a size has been selected
}

function sashing_option_page_active()
{
    return backing_color_page_active() && g_backing_color.length > 0;
}

function thread_option_page_active()
{
    return sashing_option_page_active() && sashing_index >= 0;
}

function review_page_active()
{
    return thread_option_page_active() && thread_selection.length > 0;
}


function choose_size(n)
{
    mark(n);
    fiddle_with_menu_actions_and_buttons();
}

function mark(obj)
{

    table = document.getElementById('sizes')
    var rows = table.getElementsByTagName("div");

    // Find only the table data - ignore the other divs.
    data = [];
    for (var i=0; i<rows.length; i++)
    {
        if (rows[i].className == "size_selection_row" || rows[i].className == "unsize_selection_row")
        {
            data.push(rows[i]);
        }
    }

    for(i = 0; i < data.length; i++)
    {
        data[i].style.fontWeight='normal';
        if (data[i] == obj)
        {
            //            alert("matched on i="+i+", dim is "+ prices[i][DIM])
            size_selection = prices[i][DIM];
            data[i].setAttribute(class_attr(), "size_selection_row")
        }
        else
        {
            data[i].setAttribute(class_attr(), "unsize_selection_row")
        }
    }
//
//
//
//    table = document.getElementById('sizes')
//    var rows = table.getElementsByTagName("tr");
//    for(var i = 0; i < rows.length; i++)
//    {
//        if (rows[i].className != "size_header")
//        {
//            rows[i].style.fontWeight='normal';
//            if (rows[i] == obj)
//            {
//                y = rows[i].getElementsByTagName("td")
//                // size_selection = y.item(1).firstChild.data;
//                size_selection = prices[i-1][DIM];
//                rows[i].setAttribute(class_attr(), "size_selection_row")
//            }
//            else
//            {
//                rows[i].setAttribute(class_attr(), "unsize_selection_row")
//            }
//        }
//    }
}

function regen_sashing_page()
{
    generate_sashing_inner_html();
    highlight("sashing_"+sashing_index, "sashing");
    if (sashing_index < 0)
        ;
    else if (no_sashing()) fancy_sashing_large_none();
    else if (standard_sashing()) fancy_sashing_large_solid();
    else fancy_sashing_large_image();
}

function regen_thread_page()
{
    document.getElementById("variegated_thread_desc").innerHTML =
    "You can choose to have either single-color thread at no charge or one of our fancier"+
    " variegated (multi-color) threads for $"+price_schedule[ADD_FOR_VARIEGATED]+"."+
    " We will choose the thread color that works best with your quilt.";
}

function show_div(div)
{
    if (div == "review") update_reviewed_info();
    if (div == "sashing_option") regen_sashing_page();
    if (div == "thread_option") regen_thread_page();

    document.getElementById(div).style.display='block';
}

function hide_div(div)
{
    document.getElementById(div).style.display='none';
}

function uncheck(elem)
{
    document.getElementById(elem).checked=false;
}

// Returns an array of price and sashing price
function find_price()
{
    for(i=0; i<prices.length; i++)
    {
        if (prices[i][DIM] == size_selection)
        {
            return prices[i]
        }
    }
    return [];
}

function calculate_prices()
{
    price_schedule = find_price();

    if (price_schedule == null) return [];

    price_base = price_schedule[BASE_PRICE]

    price_thread = 0;
    price_fancy_sashing = 0;
    price_sashing = 0;
    price_shipping = price_schedule[SHIPPING];

    // Check review page here since it means we've been through the thread page.'
    if (review_page_active())
    {
        if (thread_selection == NORMAL_THREAD)
            price_thread = 0
        else
            price_thread = price_schedule[ADD_FOR_VARIEGATED]
    }

    // Thread page here since that means we've been through the sashing page.
    if (thread_option_page_active())
    {
        if (no_sashing())
            price_sashing = 0
        else
        {
            price_sashing = price_schedule[ADD_FOR_SASHING]
            if (!standard_sashing()) price_fancy_sashing = price_schedule[ADD_FOR_FANCY_SASHING]
        }
    }

    price_total = price_base + price_thread + price_sashing + price_fancy_sashing + price_shipping - g_promo_discount;

    return price_schedule;
}

function sashing_selection()
{
    return sashing[sashing_index][2];
}

function sashing_file_path()
{
    return sashing[sashing_index][1];
}

function no_sashing()
{
    return (sashing_selection() == NO_SASHING);
}

function standard_sashing()
{
    return (sashing_selection() == STANDARD_SASHING);
}

function fancy_sashing()
{
    return (!no_sashing() && !standard_sashing());
}

function describe_quilt(price_schedule)
{
    var s;
    var width;
    var height;
    var square = (price_schedule[WIDTH] == price_schedule[HEIGHT]);
    var square_size=14.5

    var ss;
    if (no_sashing()) ss = 0;
    else ss = 1.5;
    width = inches_to_ft_in( (price_schedule[WIDTH]*(square_size+ss))+ss );
    width = width.replace(" 0\"", "");
    height = inches_to_ft_in( (price_schedule[HEIGHT]*(square_size+ss))+ss );
    height = height.replace(" 0\"", "");

    s = "Your quilt will be made from "+price_schedule[NUMBER_OF_SHIRTS]+" t-shirts arranged in a "+price_schedule[DIM]
    if (square) s += " square measuring about "+width+" on the side.";
    else s += " rectangle and will measure about "+width+" wide by "+height+" long.";
    var fabric = g_backing_color.toLowerCase();
    if (no_sashing()) s += "  We'll back it with "+a_or_an(fabric)+" "+fabric+" fabric";
    else if (standard_sashing()) s += "  We'll back and sash it with "+a_or_an(fabric)+" "+fabric+" fabric";
    else if (is_variegated()) s += "  We'll back it with "+a_or_an(fabric)+" "+fabric+" fabric, sash it with the '"+sashing_selection()+"' fabric,";
    else s += "  We'll back it with "+a_or_an(fabric)+" "+fabric+" fabric and sash it with the '"+sashing_selection()+"' fabric";

    if (is_variegated()) s+= " and quilt it using a variegated thread";
    s += ".";

    s += "<p>This is an approximation of your quilt.  The white squares represent the t-shirts you supply.</p>"
    return s;
}

function short_description(price_schedule)
{
    var s;
    var fabric = g_backing_color.toLowerCase();

    s = price_schedule[DIM] + " quilt, "+fabric + " backing fabric, "
    if (no_sashing()) s += "unsashed, ";
    else if (standard_sashing()) s += fabric + " sashing, ";
    else  s += "'"+sashing_selection() + "' sashing, ";
    if (is_variegated()) s += "variegated thread";
    else s += "standard thread";
    return s;
}

function is_variegated()
{
    return thread_selection.toLowerCase() == VARIEGATED_THREAD.toLowerCase();
}


function update_reviewed_info()
{

    var s = "";

    var price_schedule = calculate_prices();

    var quilt_description = describe_quilt(price_schedule);

//    g_promo_discount = 0;

    s = "\n<div class='leftside' style='padding-bottom:24px'>" + quilt_description + "\n</div>"
    s += "\n<div class='rightside'>"
    s += "\n<form name=\"bob\">";
    s += "\n<center>Enter a promo code and click the button</center>"
    s += "<center><input type=\"text\" name=\"promo_code\"/></center>"
    s+= "<center><input style=\"margin-top:12px\" type=\"submit\" value=\"apply promo code\" onclick='promo_button();return false;'/></center>"
    s += "\n</form>\n</div>"
    s += "\n<div style='clear:both'></div>"

    s += "\n<div class='leftside'>" + draw_quilt() + "\n</div>";
    s += "\n<div class='rightside'>";

    s += "\n<div id=\"line_items\">";
    s += lineItemTableContent();
    s += "</div>"; /* line items div */

    s += "\n<div id=\"paypal\">"

    s += "\n<div style='font-size:0px' id='paypal_box_graphic_top'></div>";
    s += "\n<div class='box_contents'>"

    s += "\n<div id='paypal_button'>";
    s += refreshPaypalButton();
    s += "\n</div>"; // paypal button

    s += "\nWe use Paypal to handle the transaction specifics.  When you click";
    s += " 'Buy Now', the Paypal site will open in a new window.  Log in, or look";
    s += " in the lower left part of that screen under 'Don't Have a Paypal Account?' if applicable.";
    s += "<br>We'll contact you via email to discuss packing and shipping instructions.";

    s += "\n</div>"; // box_contents
    s += "\n<div style='font-size:0px' id='paypal_box_graphic_bottom'></div>";
    s += "\n</div>"; // paypal

    s += "\n</div>"; // rightside
    s += "\n<div style='clear:both'></div>";
    document.getElementById("review_of_selections").innerHTML = s

}

function refreshPaypalButton() {
    var s = "\n<form action=\""+PAYPAL+"\" method=\"post\"  target=\"_blank\">";
    s += "\n<input type=\"hidden\" name=\"business\" value=\""+MERCHANT+"\">";
    s += "\n<input type=\"hidden\" name=\"cmd\" value=\"_xclick\">";
    s += "\n<input type=\"hidden\" name=\"item_name\" value=\""+ short_description(price_schedule) +"\">";
    s += "\n<input type=\"hidden\" name=\"amount\" value=\""+price_total+".00\">";
    s += "\n<input type=\"hidden\" name=\"currency_code\" value=\"USD\">";
    s += "\n<input type=\"image\" name=\"submit\" border=\"0\" src=\"https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif\" alt=\"PayPal - The safer, easier way to pay online\">";
    s += "\n<img alt=\"\" border=\"0\" width=\"1\" height=\"1\" src=\"https://www.paypal.com/en_US/i/scr/pixel.gif\" >";
    s += "\n</form>";
    return s;
}


function lineItemTableContent() {
    calculate_prices();
    
    var s ="\n<table>" +
    "\n\t<tr>" +
    "\n\t\t<td>Your quilt will be " + price_schedule[DIM] +" squares</td><td class='elipses'>. . .</td><td class=\"price_column\">$"+price_base+"</td>"+
    "\n\t</tr>" +
    "\n\t<tr>"

    if (is_variegated())
    {
        s += "\n\t\t<td>Upgrade to "+ thread_selection.toLowerCase() + " thread</td><td class='elipses'>. . .</td><td class=\"price_column\">$"+price_thread+"</td>"+
        "\n\t</tr>"
    }

    if (price_sashing > 0)
    {
        s += "\n\t<tr>" +
        "\n\t\t<td>Add sashing</td><td class='elipses'>. . .</td><td class=\"price_column\">$"+price_sashing+"</td>"+
        "\n\t</tr>"
    }

    if (price_fancy_sashing > 0)
    {
        s += "\n\t<tr>" +
        "\n\t\t<td>Upgrade to decorative fabric</td><td class='elipses'>. . .</td><td class=\"price_column\">$"+price_fancy_sashing+"</td>"+
        "\n\t</tr>"
    }

    if (g_promo_discount != 0) {
        s += "\n\t<tr>" +
        "\n\t\t<td>promo code</td><td class='elipses'>. . .</td><td class=\"price_column\">-$"+g_promo_discount+"</td>"+
        "\n\t</tr>"
    }

    s += "\n\t<tr>" +
    "\n\t\t<td>Shipping</td><td class='elipses'>. . .</td><td class=\"price_column\">$"+price_shipping+"</td>" +
    "\n\t</tr>"

    s += "\n\t<tr>" +
    "\n\t\t<td class=\"total_cell\">Order Total</td>"+
    "\n\t\t<td class='elipses'></td>"+
    "\n\t\t<td class=\"right_total_cell\">$"+price_total+"</td>"+
    "\n\t</tr>" +
    "\n</table>"
    return s;
}

function init()
{
    current_page = "";  // No current page at first.
    g_backing_color = "";
    g_backing_color_hex="";
    size_selection = "";
    sashing_index = -1;
    thread_selection = "";
    g_promo_discount = 0;

    IE_VERSION = getInternetExplorerVersion();

    // true = live site.  false = sandbox
    if (true)
    {
        PAYPAL = "https://www.paypal.com/cgi-bin/webscr";
        MERCHANT = "justin@happydancequilting.com";
    }
    else
    {
        PAYPAL = "http://sandbox.paypal.com/us/cgi-bin/webscr";
        MERCHANT = "tony.e_1250818673_biz@insightbb.com";
    }

    IMAGE_PATH = "images/"

    HIGHLIGHT = "#FFFFAA"
    NO_SASHING = "No Sashing"
    STANDARD_SASHING = "Your Background Fabric"
    NORMAL_THREAD = "Solid"
    VARIEGATED_THREAD = "Variegated"

    set_custom_fabric_array();
    set_prices();
    make_quilt_size_table_2();
    set_background_fabric_colors();

    to_page("size");
    fiddle_with_menu_actions_and_buttons();

}

/*
 * IE 6 & 7 use 'className', FF & IE8 use 'class'
 */
function class_attr()
{
    if (IE_VERSION == -1)
    {
        return "class";
    }
    else if (IE_VERSION == 8) {
        //        alert("Sanity check - IE version is "+IE_VERSION);
        return "class";
    }
    else {
        return "className";
    }
}

function set_menu(a_page)
{
    var menu = document.getElementById(a_page+"_menu");
    if (menu != null)
    {
        document.getElementById(a_page+"_menu").setAttribute(class_attr(), "selected_menu_item"); // FF
    }
}

function from_page(a_page)
{
    if(a_page == "") return;
    document.getElementById(a_page+"_menu").setAttribute(class_attr(), "unselected_menu_item"); // FF
    hide_div(a_page)
}

function to_page(id)
{
    calculate_prices();
    from_page(current_page);

    current_page = id

    set_menu(current_page);
    fiddle_with_buttons();
    show_div(current_page);
}

function make_quilt_size_table_2()
{
    var s = ""
    s += "\n<div id='sizes'>";
    s += "\n<div class='size_header'>"
    s += "\n<div>Number of T-Shirts</div><div>Arrangement of Blocks</div><div>Approximate Dimensions</div><div>Price (US $)</div>"
    s += "\n</div>"
    s += "\n<div style='clear:both'></div>"
    for(i=0; i<prices.length; i++)
    {
        s += "\n<div class='unsize_selection_row' onclick=\"choose_size(this)\">"
        s += "\n<div class='price_cell'>"+prices[i][NUMBER_OF_SHIRTS]+"</div>"
        s += "<div class='price_cell'>"+prices[i][DIM]+"</div>"
        s += "<div class='price_cell'>"+prices[i][APPROX_SIZE]+"</div>"
        s += "<div class='price_cell'>"+prices[i][BASE_PRICE]+"</div>"
        s += "\n<div style='clear:both'></div>"
        s += "\n</div>"
    }
    s += "\n</div>"
    s += "\n<div style='clear:both'></div>"

    document.getElementById("quilt_sizes_table").innerHTML = s;
}

function inches_to_ft_in(inches)
{
    var f = parseInt(inches/12);
    var i = parseInt(inches - f*12);
    return f+"' "+i+'"'
}

function block_to_ft_in(n)
{
    var square_size=14.5;
    return inches_to_ft_in(n*square_size);
}


function a_or_an(s)
{
    cs = "aeiou8";
    if (cs.indexOf((""+s).charAt(0).toLowerCase()) >= 0) return "an";
    return "a";
}

function generate_sashing_inner_html()
{
 
    // No sashing
    var top_sashing = "";
    top_sashing += "\n<h5>Option #1 - No Sashing</h5>"
    //    top_sashing += "If you don't want your quilt sashed, click on '"+sashing[0][0]+"' and then click next.</p>"
    //    top_sashing += "\n<div style='margin-left:auto;margin-right:auto;width:153px'>";
    top_sashing += "\n<div id='sashing_0' class='sashing_container' onclick='set_sashing(\""+0+"\");highlight(\"sashing_0\", \"sashing\");fancy_sashing_large_none();'>" +
    "\n\t<div class='sashing_box'><img src=\""+sashing[0][1]+"\" alt=\"\"/></div>"+
    "\n\t<div class='sashing_text'>"+sashing[0][0]+"</div>"+
    "\n</div>"
    top_sashing +="\n<div style='clear:both'></div>";
    // top_sashing += "\n</div>";

    document.getElementById("no_sashing_div").innerHTML = top_sashing;

    // Default sashing
    var sashing_html = "";
    sashing_html = "<h5>Option #2 - Sashing with Background Fabric</h5>"
    sashing_html += "\n<p>To add sashing to your quilt with the same fabric that you selected for the backing (step 2), click on the button below and then click 'next'."
    sashing_html += "  Adding sashing to this size quilt will be an additional charge of $"+find_price()[ADD_FOR_SASHING]+".</p>"
    sashing_html += "\n<div id='sashing_1' class='sashing_container' onclick='set_sashing(\""+1+"\");highlight(\"sashing_1\", \"sashing\");fancy_sashing_large_solid();'>" +
    "\n\t<div class='sashing_box'><div style=\"width:100%;height:100%;background-color:"+g_backing_color_hex+"\"></div></div>"+
    "\n\t<div class='basic_sashing_text'>"+sashing[1][0]+"</div>"+
    "\n</div>"
    sashing_html +="\n<div style='clear:both'></div>"

    document.getElementById("sashing_options_div").innerHTML = sashing_html;

    sashing_html = ""; /* important! */
    sashing_html += "\n<h5>Option #3 - Decorative Sashing and Binding</h5>"
    sashing_html += "\n<p>Here are the current decorative sashing choices.  For the quilt size you selected, you may upgrade from standard sashing to one of these fabrics for an additional $"+find_price()[ADD_FOR_FANCY_SASHING]+".  Please be advised that our fabric selection will change over time.</p>";
    // Custom sashings
    sashing_html += "\n<div>"
    for(i=2; i<sashing.length; i++)
    {
        sashing_html += "\n<div id='sashing_"+i+"' class='decorative_sashing_container' onclick='set_sashing(\""+i+"\");highlight(\"sashing_"+i+"\", \"sashing\");fancy_sashing_large_image()'>" +
        "\n\t<div class='sashing_box_decorative'><img class='decorative_image_thumb' src=\""+sashing[i][1]+"\" alt=\"\"/></div>"+
        "\n\t<div class='sashing_text_decorative'>"+sashing[i][0]+"</div>"+
        "\n</div>"
    }
    sashing_html +="\n<div style='clear:both'></div>"
    sashing_html += "\n</div>"
    document.getElementById("decorative_sashing_options_div").innerHTML = sashing_html;

    fancy_sashing_large_none();
}

function get_background_color(e)
{
    var v=null;
    if(document.defaultView && document.defaultView.getComputedStyle){
        var cs=document.defaultView.getComputedStyle(e,null);
        if(cs && cs.getPropertyValue) v=cs.getPropertyValue('background-color');
    }
    if(!v && e.currentStyle) v=e.currentStyle[rzCC('backgroundColor')];
    return v;
}

function set_backing_color(color_text)
{
    g_backing_color = color_text;
    g_backing_color_hex = "";
    fiddle_with_menu_actions_and_buttons();

    var tmp = color_text.toLowerCase();
    tmp = tmp.replace(/ /g,"_");
    tmp += "_backing_color";
    color_div = document.getElementById(tmp);
    if (color_div != null)
    {
        g_backing_color_hex = get_background_color(color_div);
    }
}

function set_backing_color2(color_code)
{
    g_backing_color_hex = colors[color_code];
    g_backing_color = color_texts[color_code];
    fiddle_with_menu_actions_and_buttons();
}

function highlight_backing(id)
{
    highlight(id, "backing_color");
    highlight("sashing_1", "sashing"); // TODO Is this always appropriate???
}

function highlight(id, topic)
{
    var bc = document.getElementById(topic+"s")
    divs = bc.getElementsByTagName("div")
    for (i=0; i<divs.length; i++)
    {
        div = divs[i]
        //     if (div.className == topic+"_container")
        // This following is a hack which allows "sashing_container" and "decorative_sashing_container" to
        // both match.
        if (div.className.indexOf(topic+"_container") >= 0)
        {
            if (div.getAttribute("id") == id)
            {
                div.style.backgroundColor = HIGHLIGHT
            }
            else
            {
                div.style.backgroundColor = 'transparent'
            }
        }
    }
}

function set_thread(selection_text)
{
    thread_selection = selection_text;
    fiddle_with_menu_actions_and_buttons();
}

function set_sashing(selection_index)
{
    sashing_index = selection_index;
    fiddle_with_menu_actions_and_buttons();
}

function fancy_sashing_large_solid()
{
    color = "transparent";
    if (g_backing_color_hex != null) color = g_backing_color_hex;
    document.getElementById("fancy_sashing_large").innerHTML = "<div style=\"height:100%;width:100%;background-color:"+color+"\"></div>";
}

function fancy_sashing_large_none()
{
    document.getElementById("fancy_sashing_large").innerHTML = "<div style='padding-top:80px;text-align:center'>Click on a fabric to see a larger image</div>";
}

function fancy_sashing_large_image()
{
    lg = sashing_file_path().replace("_sm","")
    document.getElementById("fancy_sashing_large").innerHTML = "<img class='fancy_sashing_size' src=\""+lg+"\" alt=\"\"/>"
}

function draw_quilt()
{
    var price_schedule = find_price();
    var width = pixels(price_schedule, price_schedule[WIDTH]);
    var height = pixels(price_schedule, price_schedule[HEIGHT]);
    var background = ""
    if (no_sashing()) background = "";
    else if (standard_sashing()) background = "background-color:"+g_backing_color_hex;
    else background = "background-image:url(\""+sashing_file_path()+"\")";

    var s = "\n<div style='"+background+";width:"+ width +"px;height:"+ height +"px;'>"

    s += draw_row_of_sashing(price_schedule);
    for(var i=0; i<price_schedule[HEIGHT]; i++)
    {
        s += draw_row_of_blocks(price_schedule);
        s += draw_row_of_sashing(price_schedule);
    }
    s += "\n</div>";
    return s;
}

function pixels(price_schedule, n)
{
    var h = price_schedule[REVIEW_BASE]/10;
    return (n*(price_schedule[REVIEW_BASE]+h)) + h;
}

function draw_row_of_sashing(price_schedule)
{
    var h = price_schedule[REVIEW_BASE]/10;  // pixels
    var w = pixels(price_schedule, price_schedule[WIDTH]);
    var s = "";

    if (no_sashing()) s="";
    else
    {
        s = "\n<div style='margin:0px;padding:0px;height:"+h+"px;width:"+w+"px;font-size:0px'></div>";
        s+= "\n<div style='clear:both'></div>";
    }
    return s;
}

function draw_row_of_blocks(price_schedule)
{
    var h = price_schedule[REVIEW_BASE]/10;
    var s = "";
    var i;

    if (no_sashing())
    {
        s = "";
        for(i=0; i<price_schedule[WIDTH]; i++)
        {
            s += "\n<div style='border-color:#888888;border-style:dotted;border-width:1px;float:left;width:"+price_schedule[REVIEW_BASE]+"px;height:"+price_schedule[REVIEW_BASE]+"px;background-color:#F8F8F8'></div>"
        }
        s+= "\n<div style='clear:both'></div>";

    }
    else
    {
        s = "\n<div style='margin:0px;padding:0px;float:left;width:"+h+"px;height:"+price_schedule[REVIEW_BASE]+"px;'></div>"
        for(i=0; i<price_schedule[WIDTH]; i++)
        {
            s += "\n<div style='float:left;width:"+price_schedule[REVIEW_BASE]+"px;height:"+price_schedule[REVIEW_BASE]+"px;background-color:#F8F8F8'></div>"
            s += "\n<div style='float:left;width:"+h+"px;height:"+price_schedule[REVIEW_BASE]+"px'></div>"
        }
        s+= "\n<div style='clear:both'></div>";
    }

    return s;
}

function promo_button()
{
    var promo_code = document.bob.promo_code.value;
    var code = promo_code.toLowerCase();
    if (code == "hot rod" || code == "hotrod") { // Shhh! This is SUPER SECRET! :-D
        g_promo_discount = 10;
    } else {
        g_promo_discount = 0;
    }
    // These divs have price information in them and must be regenerated to refresh the prices.
    document.getElementById("line_items").innerHTML = lineItemTableContent();
    document.getElementById("paypal_button").innerHTML = refreshPaypalButton();
}