function rabateImage(){
     this.rabate = "";
     this.bgColor = "";
     this.borderColor = "";
     this.imgContainer = "";
     this.smallImgContainer = "";
     this._drawImage = _drawImage;
     this._drawSmallImage = _drawSmallImage;
 }

function _drawImage(){
    var imageContainer = document.getElementById(this.imgContainer);
    var html="";
    html+='<div style="border: 4px dashed '+ this.borderColor + '; background: '+ this.bgColor + '; width:170px; height:150px; position:relative;">';
    html+='<div style="color:white; left:5px; top:0px; position: absolute; font-weight:bold; font-size:40px;">Get</div>';
    html+='<div style="color:white; left:6px; top:1px; position: absolute; font-weight:bold; font-size:40px;">Get</div>';
    html+='<div style="color:white; left:7px; top:1px; position: absolute; font-weight:bold; font-size:40px;">Get</div>';
    if (this.rabate<10) {
        html+='<div style="color:white; left:82px; top:-11px; position: absolute; font-weight:bold; font-size:76px;">'+this.rabate+'</div>';
        html+='<div style="color:white; left:83px; top:-10px; position: absolute; font-weight:bold; font-size:76px;">'+this.rabate+'</div>';
        html+='<div style="color:white; left:84px; top:-9px; position: absolute; font-weight:bold; font-size:76px;">'+this.rabate+'</div>';
    }else{
        html+='<div style="color:white; left:72px; top:-11px; position: absolute; font-weight:bold; font-size:76px;">1</div>';
        html+='<div style="color:white; left:73px; top:-10px; position: absolute; font-weight:bold; font-size:76px;">1</div>';
        html+='<div style="color:white; left:74px; top:-9px; position: absolute; font-weight:bold; font-size:76px;">1</div>';
        html+='<div style="color:white; left:104px; top:-11px; position: absolute; font-weight:bold; font-size:76px;">'+Number(this.rabate-10)+'</div>';
        html+='<div style="color:white; left:105px; top:-10px; position: absolute; font-weight:bold; font-size:76px;">'+Number(this.rabate-10)+'</div>';
        html+='<div style="color:white; left:106px; top:-9px; position: absolute; font-weight:bold; font-size:76px;">'+Number(this.rabate-10)+'</div>';
    }
    html+='<div style="color:'+ this.bgColor + '; background:white; left:8px; top:42px; position: absolute; font-weight:bold; font-size:18px;">&nbsp;BACK!&nbsp;</div>';
    if (this.rabate<10) {
        html+='<div style="color:white; left:124px; top:40px; position: absolute; font-weight:bold; font-size:20px;">&nbsp;%&nbsp;</div>';
    }else{
        html+='<div style="color:white; left:140px; top:40px; position: absolute; font-weight:bold; font-size:20px;">&nbsp;%&nbsp;</div>';
    }
    html+='<div style="color:white; padding-left:4px; padding-right:4px; left:0px; top:68px; position: absolute; font-weight:bold; font-size:8px;">';
    html+='When you pay with PayPal and join our';
    html+='MyStoreRewards program, you ll get a '+this.rabate+'% rabate on your total purchase - including shipping and handling! We ll invite you to join by email.';
    html+='Once you join, you also get additional rebates on all futured products.';
    html+='</div>';
    html+='</div>';
    imageContainer.innerHTML = html;
}

function _drawSmallImage(){
    var imageContainer = document.getElementById(this.smallImgContainer);
    var html="";
    html+='<div style="border: 1px dashed '+ this.borderColor + '; background: '+ this.bgColor + '; width:88px; height:33px; position:relative;">';
    html+='<div style="color:white; left:5px; top:0px; position: absolute; font-weight:bold; font-size:20px;">Get</div>';
    if (this.rabate<10) {
        html+='<div style="color:white; left:48px; top:-6px; position: absolute; font-weight:bold; font-size:40px;">'+this.rabate+'</div>';
    }else{
        html+='<div style="color:white; left:37px; top:-5px; position: absolute; font-weight:bold; font-size:40px;">1</div>';
        html+='<div style="color:white; left:52px; top:-5px; position: absolute; font-weight:bold; font-size:40px;">'+Number(this.rabate-10)+'</div>';
    }
    html+='<div style="color:'+ this.bgColor + '; background:white; left:6px; top:21px; position: absolute; font-weight:bold; font-size:10px;">&nbsp;BACK!&nbsp;</div>';
    if (this.rabate<10) {
        html+='<div style="color:white; left:65px; top:10px; position: absolute; font-weight:bold; font-size:20px;">&nbsp;%&nbsp;</div>';
    }else{
        html+='<div style="color:white; left:65px; top:10px; position: absolute; font-weight:bold; font-size:20px;">&nbsp;%&nbsp;</div>';
    }
    html+='</div>';
    imageContainer.innerHTML = html;
}



var colordelim = "000000|993300|333300|003300|003366|000080|333399|333333|800000|FF6600|808000|008000|0000FF|666699|808080|FF0000|FF9900|99CC00|339966|33CCCC|3366FF|800080|999999|FF00FF|FFCC00|FFFF00|00FF00|00FFFF|00CCFF|993366|C0C0C0|FF99CC|FFCC99|FFFF99|CCFFCC|CCFFFF|99CCFF|CC99FF|FFFFFF" ;
var colors = colordelim.split( "|" ) ;
var selectedPanel = "";
function closeColorChooser(containerId){
    var container = document.getElementById(containerId);
    container.innerHTML="";
}

function setProperty(divId, color){
    if (divId=="backgroundcolor") {
       img.bgColor=color;
       document.getElementById("image.bgColor").value = color.substring(1, color.length);
    }else if (divId=="bordercolor") {
       img.borderColor=color;
       document.getElementById("image.borderColor").value = color.substring(1, color.length);
    }
//    img._drawImage();
    img._drawSmallImage();
}

function WriteColorTable(ncols, divId, property) {
    if (selectedPanel!='') {
        closeColorChooser(selectedPanel);
    }
    selectedPanel = divId;
    var container = document.getElementById(divId);
    container.style.position='absolute';
    var html="";
    html+="<TABLE bgcolor='black' border=0 cellpadding=1 cellspacing=1>";
    html+="<tr><td height='10' colspan="+ncols+" style='background:white;' align='right'><input type='button' onclick=\"closeColorChooser('"+divId+"')\" style='font-weight: bold' name='X' value=' X '></td></tr>";
    var fan = true;
    for( var i = 0 ; i < colors.length; i++ ) {
        if( (i % ncols) == 0 ) {
            if (!fan) {
                html+="\n</TR>";
                fan = !fan;
            }
            html+="\n<TR>";
        }
        var rgb = colors[i].split( "" ) ;
        var bgcol = "#"+rgb[0]+rgb[1]+rgb[2]+rgb[3]+rgb[4]+rgb[5] ;
        html+="<TD class=tableColorsCell bgcolor=\"" + bgcol + "\">";
        html+="<A href=\'javascript:setProperty(\""+divId+"\",\"" + bgcol + "\");\' ";
        html+="\>";
        html+="<img src='../images/spacer.gif' width=15 height=15 border=0></A></TD>";
        }
    html+="</TABLE>";
    container.innerHTML = html;
}

function setRabate(combo){
    img.rabate = combo.value;
//    img._drawImage();
    img._drawSmallImage();
}