var  ie4 = navigator.appName.indexOf("Microsoft") != -1;
var  ns4 = navigator.appName.indexOf("Netscape")  != -1;

var  sliderMin = 50;
var  sliderMax = 306;
var  hexArray  = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
var  r1 = r2 = g1 = g2 = b1 = b2 = '0';
var  Rgb = rGb = rgB = '0';
var rActive = gActive = bActive = false; // no movement should be followed at startup.
var formValue = 0 ; // make global.
var redValue,greenValue,blueValue; // make global.
var dragObject; // make global.

var vOffset = 250 ;

var sliderWidth  =   8;
var sliderHeight =  14;
var redTop       =  98 + vOffset ;
var greenTop     = 118 + vOffset ;
var blueTop      = 138 + vOffset ;

var msgred         = ''
var msggreen       = ''
var msgblue        = ''
var msgredslider   = ''
var msggreenslider = ''
var msgblueslider  = ''

var msgcolortable = ''

msgdisplay = '<img src="colorblank.gif" width=150 height=150 border=0>';
msgtitlebar = '<table border=0 cellpadding=2 cellspacing=0 width=260><tr><td><b><span class="header">Create your own colour online with Resene Create-A-Colour</span></b></td></tr></table>';
msghexvalue = '<form name="frmValue" method="post" action="http://www.resene.co.nz/cgi-bin/color_printout.cgi"><table border=0 cellpadding=2 cellspacing=0 width=260 bgcolor=#EEEEEE><tr><td align=center>';
msghexvalue += '<table border=0 cellpadding=2 cellspacing=0><tr><td id="subtext">Red</td><td id="subtext">Green</td><td id="subtext">Blue</td></tr>';
msghexvalue += '<tr>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,\'red\');"></td>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,\'green\');"></td>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,\'blue\');"></td>';
msghexvalue += '</tr></table></td><td align=center><table border=0 cellpadding=2 cellspacing=0>';
msghexvalue += '</table></td></tr></table>';

msgbodyform = "<INPUT TYPE='HIDDEN' NAME='successurl' VALUE='http://www.resene.co.nz/competition/thanks.html'>" ;
msgbodyform += "<P align='left'><font face='arial, helvetica' size='-1'></font></P>";


msgbodyform += "  <center><input type='submit' value='Print this colour'></center>"; 
msgbodyform += "   </form>";

msgheader = '<a name="top"></a><form action="/swishe/cgi-bin/swish-bin/SiteSearch.cgi" method="post" name="sitesearch">';
msgheader += '<div style="height:101px; background-color:#000000; background-image:url(/picts/header.jpg); border-bottom: 1px solid #e8e8e8; background-repeat:no-repeat; background-position:center">';
msgheader += '<table width="1000" border="0" cellspacing="0" cellpadding="0" class="center">';
msgheader += '<tr>';
msgheader += '<td style="width:760px"><a href="/index.htm">';
msgheader += '<img src="/picts/resene_logo_header.jpg" alt="Resene" width="651" height="100"></a></td>';
msgheader += '<td style="width:125px"><img src="/picts/spacer.gif" width="30" height="50" border="0" alt=" ">';
msgheader += '<br><input type="text" name="search" style="width:125px;height:16px;border:1px solid #000000;background-color:#eeeeee;';
msgheader += 'font-family:arial narrow,arial,helvetica,sans-serif;"></td>';
msgheader += '<td style="width:115px"><input type="image" src="/picts/search_button2.jpg" name="image" alt="Search"></td>';
msgheader += '</tr>';
msgheader += '</table></div>';
msgheader += '<div class="AutoTopNav">';
msgheader += '<table border="0" cellspacing="0" cellpadding="0" id="topnav" class="center">';
  msgheader += '<tr>';
    msgheader += '<td class="left"><a href="/comn/whtsnew/whatson.htm">What&#8217;s New</a></td>';
    msgheader += '<td><a href="/homeown/use_colr/usecolor.htm">Colours</a></td>';
    msgheader += '<td><a href="/curtains.htm">Curtains</a></td>';
    msgheader += '<td><a href="/archspec/nf_profs.htm">Specifiers</a></td>';
    msgheader += '<td><a href="/painters.htm">Painters</a></td>';
    msgheader += '<td><a href="/homeown/nf_home.htm">DIY / Homeowners</a></td>';
    msgheader += '<td><a href="/artists/artists_canvas.htm">Artists</a></td>';
    msgheader += '<td><a href="/kids/kidzcolour.htm">Kids</a></td>';
	msgheader += '<td><a href="https://secure.resene.co.nz/samples/SelectChart.php?productType=1">Order online</a></td>';
    msgheader += '<td><a href="/help.htm">About us / Contact us</a></td>';
    msgheader += '<td><a href="/vacancies/index.html">Work for us</a></td>';
    msgheader += '<td><a href="/index.htm">Home</a></td>';
  msgheader += '</tr>';
msgheader += '</table>';
msgheader += '</div>';
msgheader += '<input type="hidden" name="results" value="0">';
msgheader += '<input type="hidden" name="configfile" value="wholesite.conf">';
msgheader += '</form>';
msgheader += '<script language="JavaScript">document.sitesearch.search.focus();</script>';
msgheader += '<table border="0" cellpadding="20" cellspacing="0" class="MainTable" style="margin-top:0px">';
msgheader += "  <tr> ";
msgheader += "<td width='100%' valign=top align='left' bgcolor='#ffffff'>" ;
msgheader += "<b><span class='header'>Create your own colour online with Resene Create-A-Colour</span></b><br>" ;
msgheader += "Ever had problems finding your own paint colour on a colour chart? Resene understands that sometimes you just want to do your own thing, so now we've made it easy to make your own colour with our Resene Create-A-Colour!.<p>  ";
msgheader += "<p align='JUSTIFY'>Simply adjust the slider tab to select the basic colour then select the tone in the square below until you create the colour of your dreams.</p>";
msgheader += "<p align='JUSTIFY'>Once you have created your own colour, enter it into <a href='http://www.resene.co.nz/ezypaint/main.htm'>Resene EzyPaint</a> virtual painting software, and use matching Resene colours to virtually paint your own project on your computer. Or print out a copy of your new colour on a colour printer and bring it into your local Resene ColorShop for colour matching.</p>" ;
msgheader += "</td></tr></table>";

msgfooter = '<!-- CONTACT DETAILS CONTAINER -->';
msgfooter += '<div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div>';
msgfooter += '<table width="960" border="0" cellspacing="0" cellpadding="0" class="center">';
  msgfooter += '<tr>';
    msgfooter += '<td class="ContactsContainer">';
      msgfooter += '<!-- CONTACTS TABLE, 3 CELLS, SET WIDTH -->';
      msgfooter += '<table border="0" cellspacing="0" cellpadding="2" class="Contact">';
        msgfooter += '<tr>';
          msgfooter += '<td class="ContactLeftSide">';
            msgfooter += '<!-- AU CONTACT INFO TABLE -->';
            msgfooter += '<table border="0" cellspacing="0" cellpadding="0">';
              msgfooter += '<tr>';
                msgfooter += '<td colspan="3" class="footer">In Australia:<br>PO Box 785, Ashmore City, Queensland 4214</td>';
              msgfooter += '</tr>';
              msgfooter += '<tr>';
                msgfooter += '<td class="footer">Phone:</td>';
                msgfooter += '<td class="footer"><img src="http://www.resene.co.nz/picts/spacer.gif" width="10" height="1" alt=" "></td>';
                msgfooter += '<td class="footer">1800 738 383</td></tr>';
              msgfooter += '<tr>';
                msgfooter += '<td class="footer">Fax:</td>';
                msgfooter += '<td class="footer">&nbsp;</td>';
                msgfooter += '<td class="footer">1800 064 960</td>';
              msgfooter += '</tr>';
              msgfooter += '<tr>';
                msgfooter += '<td class="footer">Email:</td><td class="footer">&nbsp;</td>';
                msgfooter += '<td class="footer"><a href="http://www.resene.co.nz/colorite/form_au.html">advice@resene.com.au</a></td>';
              msgfooter += '</tr>';
              msgfooter += '<tr>';
                msgfooter += '<td colspan="3"><img src="http://www.resene.co.nz/picts/spacer.gif" width="200" height="5" alt=" "></td>';
              msgfooter += '</tr>';
            msgfooter += '</table>';
            msgfooter += '<!-- END OF AU CONTACT INFO TABLE -->';
          msgfooter += '</td>';
          msgfooter += '<td class="ContactMidCell"><img src="http://www.resene.co.nz/picts/resene_logo_black.gif" width="130" height="37" alt="Resene Paints Ltd"></td>';
          msgfooter += '<td class="ContactRightSide">';
            msgfooter += '<!-- NZ CONTACT INFO TABLE -->';
              msgfooter += '<table border="0" cellspacing="0" cellpadding="0" class="center">';
                msgfooter += '<tr>';
                  msgfooter += '<td colspan="3" class="footer">In New Zealand:<br>PO Box 38242, Wgtn Mail Centre, Lower Hutt 5045</td>';
                msgfooter += '</tr>';
                msgfooter += '<tr>';
                  msgfooter += '<td class="footer">Phone:</td><td class="footer"><img src="http://www.resene.co.nz/picts/spacer.gif" width="10" height="1" alt=" "></td>';
                  msgfooter += '<td class="footer">+64 (4) 577 0500, 0800 RESENE</td>';
                msgfooter += '</tr>';
                msgfooter += '<tr>';
                  msgfooter += '<td class="footer">Fax:</td>';
                  msgfooter += '<td class="footer">&nbsp;</td><td class="footer">+64 (4) 577 0600</td>';
                msgfooter += '</tr>';
                msgfooter += '<tr>';
                  msgfooter += '<td class="footer">Email:</td>';
                  msgfooter += '<td class="footer">&nbsp;</td><td class="footer"><a href="http://www.resene.co.nz/colorite/form.html">advice@resene.co.nz</a></td>';
                msgfooter += '</tr>';
                msgfooter += '<tr>';
                  msgfooter += '<td colspan="3"><img src="http://www.resene.co.nz/picts/spacer.gif" width="200" height="5" alt=" "></td>';
                msgfooter += '</tr>';
              msgfooter += '</table>';
              msgfooter += '<!-- END OF NZ CONTACT INFO TABLE -->';
            msgfooter += '</td>';
          msgfooter += '</tr>';
		   msgfooter += '<tr>';
			  msgfooter += '<td colspan="3" class="FooterVision">Our vision is to be respected as an ethical and sustainable company and acknowledged as the leading provider of innovative paint and colour technology.  View Resene&#8217;s <a href="http://www.resene.co.nz/profile.htm">profile</a> and <a href="http://www.resene.co.nz/pdf/environmental_policy.pdf">Environmental Policy</a>.<br>&nbsp;</td>';
			  msgfooter += '</tr>';
        msgfooter += '</table>';
        msgfooter += '<!-- END OF CONTACTS TABLE -->';
      msgfooter += '</td>';
    msgfooter += '</tr>';
msgfooter += '</table>';
msgfooter += '<!-- END OF CONTACT DETAILS CONTAINER -->';
msgfooter += '<table width="90%" border="0" cellspacing="0" cellpadding="0" class="FooterContainer" align="center">';
msgfooter += '<tr>';
     msgfooter += '<td>';
     msgfooter += '<table width="85%" border="0" cellspacing="0" cellpadding="0" class="FooterLinks" align="center">';
         msgfooter += '<tr>';
              msgfooter += '<td align="left" valign="top" class="whitefooter">';
			   msgfooter += '<a href="/comn/whtsnew/whatson.htm" class="white">What&#8217;s new</a>'; 
                msgfooter += '- <a href="/homeown/use_colr/usecolor.htm" class="white">Colours</a>';
			    msgfooter += '- <a href="/curtains.htm" class="white">Curtains</a>';
                msgfooter += '- <a href="/archspec/nf_profs.htm" class="white">Architects / Specifiers</a>'; 
                msgfooter += '- <a href="/painters.htm" class="white">Painters</a>'; 
                msgfooter += '- <a href="/homeown/nf_home.htm" class="white">DIY / Homeowners</a>'; 
                msgfooter += '- <a href="/artists/artists_canvas.htm" class="white">Artists</a>'; 
                msgfooter += '- <a href="/kids/kidzcolour.htm" class="white">Kids</a>'; 
                msgfooter += '- <a href="/corporate.htm" class="white">Corporate</a>';
			    msgfooter += '- <a href="/vacancies/index.html" class="white">Work for us</a>';
			    msgfooter += '- <a href="/sitemap.html" class="white">Sitemap</a>';
                msgfooter += '- <a href="/help.htm" class="white">Contact us</a>'; 
                msgfooter += '- <a href="#top" class="white">Top</a>'; 
                msgfooter += '- <a href="/index.htm" class="white">Home</a></td>';
          msgfooter += '</tr>';
        msgfooter += '</table>';
msgfooter += '</td></tr></table>';

// window,id,body,left,top,width,height,zIndex,absolute
var d_red 			= new NewDiv(window, "red", 		msgred,			54,  100 + vOffset,   256,      10,     2, "ABSOLUTE");
var d_green 		= new NewDiv(window, "green", 		msggreen, 		54,  120 + vOffset,   256,10,     2, "ABSOLUTE");
var d_blue 			= new NewDiv(window, "blue", 		msgblue, 		54,  140 + vOffset,   256,      10,     2, "ABSOLUTE");
var d_redslider   	= new NewDiv(window, "redSlider",   msgredslider,  	50, redTop,   sliderWidth, sliderHeight, 3, "ABSOLUTE");
var d_greenslider 	= new NewDiv(window, "greenSlider", msggreenslider,	50, greenTop, sliderWidth, sliderHeight, 3, "ABSOLUTE");
var d_blueslider 	= new NewDiv(window, "blueSlider",  msgblueslider, 	50, blueTop, sliderWidth, sliderHeight, 3, "ABSOLUTE");
var d_colortable 	= new NewDiv(window, "colorTable",  msgcolortable, 	380, 70 + vOffset, 260, 200, 2, "ABSOLUTE");
var d_display 		= new NewDiv(window, "display", 	msgdisplay, 	340, 70 + vOffset, 150, 150, 4, "ABSOLUTE");
var d_titlebar 		= new NewDiv(window, "titleBar", 	msgtitlebar, 	54, 70 + vOffset, 260, 20, 2, "ABSOLUTE");
var d_hexvalue 		= new NewDiv(window, "hexValue", 	msghexvalue + msgbodyform,  54, 160 + vOffset, 260, 20, 2, "ABSOLUTE");
var d_header 		= new NewDiv(window, "header", 		msgheader, 		0, 0, '100%', 150, 2, "ABSOLUTE") ;
var d_footer 		= new NewDiv(window, "footer", 		msgfooter, 		0, 500, '100%', 150, 2, "ABSOLUTE") ;
function init() {
  // these are set up for IE and NS differently
  // these can not be set up until after this page has loaded.
  //formValue  = ns4 ? document.hexValue.document.frmValue.valueDisp : document.frmValue.valueDisp;
  redValue   = ns4 ? document.hexValue.document.frmValue.RgbDisp   : document.frmValue.RgbDisp;
  greenValue = ns4 ? document.hexValue.document.frmValue.rGbDisp   : document.frmValue.rGbDisp;
  blueValue  = ns4 ? document.hexValue.document.frmValue.rgBDisp   : document.frmValue.rgBDisp;

  // assign these functions
  document.onmousedown = mouseDown
  document.onmousemove = mouseMove
  document.onmouseup   = mouseUp
  if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

  if (ns4)
  {
        redTop = d_redslider.getY() ;
        greenTop = d_greenslider.getY() ;
        blueTop = d_blueslider.getY() ;

        sliderMin = d_redslider.getX() ;
  }

  manualSet("0","red");
  manualSet("0","green");
  manualSet("0","blue");
}

function mouseDown(e) {

  // check to see that the button #1 has been pressed.
  if ((ns4 && e.which!=1) ||
      (ie4 && event.button!=1))
    return true;

  // find the X and Y coords where the mouse was when the button was pressed.
  var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
  var y = (ns4)? e.pageY : event.y+document.body.scrollTop;

  // determine which button (slider), if any of the three, was selected to be moved.
  if (x > d_redslider.getX() && x < d_redslider.getX() + sliderWidth &&
      y > redTop && y < redTop + sliderHeight) {
    rActive    = true;
	dragObject = d_redslider;
  }
  if (x > d_greenslider.getX() && x < d_greenslider.getX() + sliderWidth &&
      y > greenTop && y < greenTop + sliderHeight) {
   gActive    = true;
   dragObject = d_greenslider;
  }
  if (x > d_blueslider.getX()  && x < d_blueslider.getX() + sliderWidth  &&
      y > blueTop  && y < blueTop + sliderHeight) {
    bActive    = true;
	dragObject = d_blueslider;
  }

  // if any button (slider) is active, then setup to drag it.
  if (rActive==true || gActive==true || bActive==true){
    if (x >= dragObject.xpos && x <= dragObject.xpos+dragObject.w) {
      dragObject.dragOffsetX = x-dragObject.xpos
    }
    return false
  }
  else { return true } // don't trap the event. (mouse button down)
}


var isOk=1;
function mouseMove(e) {
  if (isOk==0) return;
  else isOk=0;
  var rMoveTo = gMoveTo = bMoveTo = 0; // make these variables be local.

  // find out where the mouse is.
  var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
  var y = (ns4)? e.pageY : event.y+document.body.scrollTop

  // adjust the X pos to be in the slider range.
  if (x > sliderMax) x = sliderMax;
  if (x < sliderMin) x = sliderMin;

  // if moving any button (slider) react to the mouse movement.
  if (rActive) {

	d_redslider.moveTo(x, redTop);
    calcValue(x - sliderMin, 'red');
  }
  if (gActive) {
	d_greenslider.moveTo(x, greenTop);
    calcValue(x - sliderMin, 'green');
  }
  if (bActive) {
	d_blueslider.moveTo(x, blueTop);
    calcValue(x - sliderMin, 'blue');
  }
  isOk=1;
  return true
}


function mouseUp(e) {
  // denote no movement in progress
  rActive = false;
  gActive = false;
  bActive = false;
  return true
}


function calcValue(base, color){
  base -= 1;
  if (base < 16) { first = 0; }
  else { first = parseInt(base/16); }
  if (base < 0 ) { second = 0; base = 0; }
  else { second = parseInt(base%16); }
  c1=hexArray[first];
  c2=hexArray[second];
  if      (color == 'red')   { r1 = c1; r2 = c2; Rgb=base;}
  else if (color == 'green') { g1 = c1; g2 = c2; rGb=base;}
  else                       { b1 = c1; b2 = c2; rgB=base;}
  d_display.setBgColor('#'+r1+r2+g1+g2+b1+b2);
  formValue.value = r1+r2+g1+g2+b1+b2;
  redValue.value   = Rgb;
  greenValue.value = rGb;
  blueValue.value  = rgB;
  return true;
}

function manualSet(value,color){
  if (value < 0)   value=0;
  if (value > 255) value=255;
  ++value;
  calcValue(value,color);
  if      (color == 'red')  { d_redslider.moveTo(value   + sliderMin - 4, redTop);   }
  else if (color == 'green'){ d_greenslider.moveTo(value + sliderMin - 4, greenTop); }
  else                      { d_blueslider.moveTo(value  + sliderMin - 4, blueTop);  }
}



function convertHex(hexString){
  if(hexString == null) hexString = formValue.value;
  inputHexArray = new Array(6);
  for(i=0;i<=5;++i){
    inputHexArray[i] = hexString.charAt(i);
  }
  for(i=0;i<=5;++i){
    tempHexVal = inputHexArray[i];
    for(j=0;j<=15;++j){
      if(tempHexVal == hexArray[j]) tempHexVal = j;
    }
    inputHexArray[i] = tempHexVal;
  }
  Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1;
  calcValue(Rgb,'red');
  manualSet(Rgb,'red');
  rGb = (inputHexArray[2]*16)+inputHexArray[3]+1;
  calcValue(rGb,'green');
  manualSet(rGb,'green');
  rgB = (inputHexArray[4]*16)+inputHexArray[5]+1;
  calcValue(rgB,'blue');
  manualSet(rgB,'blue');
}

function toHex(base)
{
   var first, second, c1, c2, rv ;

  if (base < 16) { first = 0; }
  else { first = parseInt(base/16); }
  if (base < 0 ) { second = 0; base = 0; }
  else { second = parseInt(base%16); }
  c1=hexArray[first];
  c2=hexArray[second];

  rv = c1 + c2 ;

  return rv ;
}

function gotoPrintout()
{
        var r, g, b ;

        r = ns4 ? document.hexValue.document.frmValue.RgbDisp   : document.frmValue.RgbDisp;
        g = ns4 ? document.hexValue.document.frmValue.rGbDisp   : document.frmValue.rGbDisp;
        b = ns4 ? document.hexValue.document.frmValue.rgBDisp   : document.frmValue.rgBDisp;

        location.href = "/cgi-bin/printout.cgi?red=" + toHex(r.value) + "&green=" + toHex(g.value) + "&blue=" + toHex(b.value) ;
}