//var tpSite = "http://localhost:57269/";
//var tpSite = "http://tyre-pressure.silkmoth.co.uk/";
var tpSite = "http://www.tyre-pressures.com/";

function DrawTPWidget(width, background, colour, preview)
{
    if (!(background == "#000000" || background == "#ffffff" || background == "#ff0000" || background == "#0000ff")
        || !(colour == "#000000" || colour == "#ffffff" || colour == "#ff0000" || colour == "#0000ff"))
    {   // Somebody has changed the colour codes, lets use the standard ones.
        background = "#ffffff";
        colour = "#000000";
    }

    var tsLinkColour = colour;

    if (background == colour)
    { // User has set both colours the same, so let's set TSLinkColour;
        if (colour == "#000000" || colour == "#ff0000" || colour == "#0000ff")
            tsLinkColour = "#ffffff";
        else
            tsLinkColour = "#000000";
    }

    if ((document.getElementById("tpWidgetLink") == null) ||
          !(document.getElementById("tpWidgetLink").innerHTML == "Tyre Shopper" || document.getElementById("tpWidgetLink").innerHTML == "Cheap Tyres at Tyre Shopper"))
    { // Stop Widget working if Link broken
        return;
    }
    
    if (width == "200")
    {
        var tpWidgetOuter = document.getElementById("tpWidgetOuter");

        tpWidgetOuter.style.width = "200px";
        tpWidgetOuter.style.height = "150px";
        tpWidgetOuter.style.border = "0px none";
        tpWidgetOuter.style.backgroundColor = background;
        tpWidgetOuter.style.margin = "0 auto 0 auto";
        tpWidgetOuter.style.padding = "0 0 0 0";
        tpWidgetOuter.style.position = "relative";

        var tpWidgetLinkOuter = document.getElementById("tpWidgetLinkOuter");
        
        tpWidgetLinkOuter.style.padding = "0 0 0 0";
        tpWidgetLinkOuter.style.margin = "0 0 0 0";
        tpWidgetLinkOuter.style.border = "0px none";
        tpWidgetLinkOuter.style.color = tsLinkColour;
        tpWidgetLinkOuter.style.fontSize = "9px";
        tpWidgetLinkOuter.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";
        tpWidgetLinkOuter.style.width = "200px";
        tpWidgetLinkOuter.style.position = "absolute";
        tpWidgetLinkOuter.style.bottom = "10px";
        tpWidgetLinkOuter.style.left = "0px";
        tpWidgetLinkOuter.style.textAlign = "center";

        var tpWidgetLinkSpan = document.getElementById("tpWidgetLinkSpan");

        tpWidgetLinkSpan.style.padding = "0 0 0 0";
        tpWidgetLinkSpan.style.margin = "0 0 0 0";
        tpWidgetLinkSpan.style.border = "0px none";
        tpWidgetLinkSpan.style.color = tsLinkColour;
        tpWidgetLinkSpan.style.fontSize = "9px";
        tpWidgetLinkSpan.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";

        tpWidgetLinkSpan.innerHTML = "Sponsored by: ";
        
        var tpWidgetLink = document.getElementById("tpWidgetLink");
        
        tpWidgetLink.style.padding = "0 0 0 0";
        tpWidgetLink.style.margin = "0 0 0 0";
        tpWidgetLink.style.border = "0px none";
        tpWidgetLink.style.color = tsLinkColour;
        tpWidgetLink.style.fontSize = "9px";
        tpWidgetLink.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";
        tpWidgetLink.style.fontWeight = "bold";
        tpWidgetLink.style.textDecoration = "none";

        var tpWidgetInner = document.getElementById("tpWidgetInner");

        tpWidgetInner.style.width = "200px";
        tpWidgetInner.style.border = "0px none";
        tpWidgetInner.style.backgroundColor = background;
        tpWidgetInner.style.margin = "0 0 0 0";
        tpWidgetInner.style.padding = "0 0 0 0";
        tpWidgetInner.style.position = "relative";

        tpWidgetInner.innerHTML =
            "<div style=\"position:absolute; top:5px; left:5px; border:0px none; width:190px; height:36px; background-color:#ffffff; background-image:url(" + tpSite + "images/widget_logo_36.gif); background-position:left; background-repeat:no-repeat;\">" +
                "<div style=\"position:absolute; top:10px; left: 98px; font-size: 10px; color:#000000; font-family:Verdana, Helvetica, Arial, Sans-Serif; font-weight:bold; text-align:center;\">" +
                    "Tyre Pressure Lookup Facility" +
                "</div>" +
            "</div>" +
            "<div style=\"position:absolute; top:44px; left:0px; border:0px none; width:200px; color:" + colour + "; font-size: 9px; font-family:Verdana, Helvetica, Arial, Sans-Serif; text-align:center;\">" +
				"Enter your Registration Number:" +
            "</div>" +
            "<div style=\"position:absolute; left:10px; top:60px; border:0px none; width:181px; height:31px; background-image:url(" + tpSite + "images/widget_reg.gif); background-repeat: no-repeat;\">" +
                "<input type=\"text\" style=\"position:absolute; left:10px; top:0px; width:160px; height:30px; background-color:transparent; color:#000000; font-weight:bold; font-family:Verdana, Helvetica, Arial, Sans-Serif; font-size:24px; margin: 0 0 0 0; padding: 0 0 0 0 ; border: 0px none; text-align:center; text-transform:uppercase; \" value=\"ABC 123\" onclick=\"ClearText(this);\" id=\"tpVRN\" />" +
            "</div>" +
            "<input type=\"image\" src=\"" + tpSite + "images/widget_find.gif\" style=\"position:absolute; border:0px none; top:100px; left:25px; width:151px; height:21px; cursor:pointer;\" onclick=\"return TPWidgetLookup('" + preview + "');\">";
    }
    else if (width == "300")
    {
        var tpWidgetOuter = document.getElementById("tpWidgetOuter");

        tpWidgetOuter.style.width = "300px";
        tpWidgetOuter.style.height = "200px";
        tpWidgetOuter.style.border = "0px none";
        tpWidgetOuter.style.backgroundColor = background;
        tpWidgetOuter.style.margin = "0 auto 0 auto";
        tpWidgetOuter.style.padding = "0 0 0 0";
        tpWidgetOuter.style.position = "relative";

        var tpWidgetLinkOuter = document.getElementById("tpWidgetLinkOuter");

        tpWidgetLinkOuter.style.padding = "0 0 0 0";
        tpWidgetLinkOuter.style.margin = "0 0 0 0";
        tpWidgetLinkOuter.style.border = "0px none";
        tpWidgetLinkOuter.style.color = tsLinkColour;
        tpWidgetLinkOuter.style.fontSize = "9px";
        tpWidgetLinkOuter.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";
        tpWidgetLinkOuter.style.width = "300px";
        tpWidgetLinkOuter.style.position = "absolute";
        tpWidgetLinkOuter.style.bottom = "10px";
        tpWidgetLinkOuter.style.left = "0px";
        tpWidgetLinkOuter.style.textAlign = "center";

        var tpWidgetLinkSpan = document.getElementById("tpWidgetLinkSpan");

        tpWidgetLinkSpan.style.padding = "0 0 0 0";
        tpWidgetLinkSpan.style.margin = "0 0 0 0";
        tpWidgetLinkSpan.style.border = "0px none";
        tpWidgetLinkSpan.style.color = tsLinkColour;
        tpWidgetLinkSpan.style.fontSize = "9px";
        tpWidgetLinkSpan.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";

        tpWidgetLinkSpan.innerHTML = "Widget Sponsored by: ";

        var tpWidgetLink = document.getElementById("tpWidgetLink");

        tpWidgetLink.style.padding = "0 0 0 0";
        tpWidgetLink.style.margin = "0 0 0 0";
        tpWidgetLink.style.border = "0px none";
        tpWidgetLink.style.color = tsLinkColour;
        tpWidgetLink.style.fontSize = "9px";
        tpWidgetLink.style.fontFamily = "Verdana, Helvetica, Arial, Sans-Serif";
        tpWidgetLink.style.fontWeight = "bold";
        tpWidgetLink.style.textDecoration = "none";

        var tpWidgetInner = document.getElementById("tpWidgetInner");

        tpWidgetInner.style.width = "300px";
        tpWidgetInner.style.border = "0px none";
        tpWidgetInner.style.backgroundColor = background;
        tpWidgetInner.style.margin = "0 0 0 0";
        tpWidgetInner.style.padding = "0 0 0 0";
        tpWidgetInner.style.position = "relative";

        tpWidgetInner.innerHTML =
            "<div style=\"position:absolute; top:10px; left:10px; border:0px none; width:280px; height:72px; background-color:#ffffff; background-image:url(" + tpSite + "images/widget_logo_72.gif); background-position:left; background-repeat:no-repeat;\">" +
                "<div style=\"position:absolute; top:44px; left: 190px; font-size: 10px; color:#000000; font-family:Verdana, Helvetica, Arial, Sans-Serif; font-weight:bold; text-align:center;\">" +
                    "Tyre Pressure Lookup Facility" +
                "</div>" +
            "</div>" +
            "<div style=\"position:absolute; top:90px; left:0px; border:0px none; width:300px; color:" + colour + "; font-size: 10px; font-family:Verdana, Helvetica, Arial, Sans-Serif; text-align:center;\">" +
				"Enter your Registration Number:" +
            "</div>" +
            "<div style=\"position:absolute; left:60px; top:110px; border:0px none; width:181px; height:31px; background-image:url(" + tpSite + "images/widget_reg.gif); background-repeat: no-repeat;\">" +
                "<input type=\"text\" style=\"position:absolute; left:10px; width:160px; height:30px; background-color:transparent; color:#000000; font-weight:bold; font-family:Verdana, Helvetica, Arial, Sans-Serif; font-size:24px; margin: 0 0 0 0; padding: 0 0 0 0 ; border: 0px none; text-align:center; text-transform:uppercase;\" value=\"ABC 123\" onclick=\"ClearText();\" id=\"tpVRN\" />" +
            "</div>" +
            "<input type=\"image\" src=\"" + tpSite + "images/widget_find.gif\" style=\"position:absolute; border:0px none; top:150px; left:75px; width:151px; height:21px; cursor:pointer;\" onclick=\"return TPWidgetLookup('" + preview + "');\">";
    }

}

function TPWidgetLookup(preview)
{
    if (preview == "true")
    {
        alert("Once installed on your website,\r\nthis button will redirect the user to their Tyre Pressure results.");
        return false;
    }
    else {
        var tpVRN = document.getElementById("tpVRN").value;
        
        if (!(tpVRN == "" || tpVRN == null))
        {
            // Same Window
            //
            //window.location = tpSite + "ByVRN/" + escape(tpVRN.toUpperCase());

            // New Window
            //
            window.open(tpSite + "ByVRN/" + escape(tpVRN.toUpperCase()), "_blank");
        }
        return false;
    }
}

var tpTextCleared = false;

function ClearText()
{
    if (tpTextCleared == false)
    {
        document.getElementById("tpVRN").value = "";
        tpTextCleared = true;
    }
}