function showTip(yminus){
  document.getElementById('tipBox').style.top = yminus + 'px';
}
function showOptionBG(whichOpt,size){
  if(document.getElementById(whichOpt))
    document.getElementById(whichOpt).style.backgroundImage = 'url(/common/img/product/option_bg_'+size+'.gif)';
}
function hideOptionBG(whichOpt){
  if(document.getElementById(whichOpt))
    document.getElementById(whichOpt).style.backgroundImage = 'none';
}

function changeTipText(which){
  switch (which) {  
      
      case "WidthandHeight":
        document.getElementById('tipBoxFirst').innerHTML="Select width & drop for price.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_width_drop.asp', 'BlindsHelp', '500', '430', 'no');\">What is the width & drop?</a>";
        break;
      case "optionControlType":
        document.getElementById('tipBoxFirst').innerHTML="Now select the Control Type.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_control_type.asp', 'BlindsHelp', '500', '430', 'no');\">What is the Control Type?</a>";
        break;
      case "optionBlackout":
        document.getElementById('tipBoxFirst').innerHTML="Now choose if you want Blackout lining.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_blackout.asp', 'BlindsHelp', '500', '430', 'no');\">What is the Blackout lining?</a>";
        break;
      case "optionBracket":
        document.getElementById('tipBoxFirst').innerHTML="Now select the Fixing Bracket.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_bracket.asp', 'BlindsHelp', '500', '430', 'no');\">What is the Fixing Bracket?</a>";
        break;
      case "optionPleat":
        document.getElementById('tipBoxFirst').innerHTML="Now select the Pleat Size.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_pleat.asp', 'BlindsHelp', '500', '430', 'no');\">What is the Pleat Size?</a>";
        break;
      case "optionExact":
        document.getElementById('tipBoxFirst').innerHTML="Now select Exact or Recess.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_exact.asp', 'BlindsHelp', '500', '430', 'no');\">What is Exact or Recess?</a>";
        break;
      case "optionSlatWidth":
        document.getElementById('tipBoxFirst').innerHTML="Now select the Slat Width.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_slat_width.asp', 'BlindsHelp', '500', '290', 'no');\">What is the Slat Width?</a>";
        break;
      case "optionControl":
        document.getElementById('tipBoxFirst').innerHTML="Now select the location of the blind controls";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_control.asp', 'BlindsHelp', '500', '370', 'no');\">What is the control side?</a>";
        break;
      case "optionControlSide":
        document.getElementById('tipBoxFirst').innerHTML="Now select the location of the blind controls";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_controlSide.asp', 'BlindsHelp', '500', '370', 'no');\">What is the control side?</a>";
        break;
      case "optionDrawn":
        document.getElementById('tipBoxFirst').innerHTML="Select drawn for price.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_draw.asp', 'BlindsHelp', '500', '370', 'no');\">What is drawn?</a>";
        break;
      case "optionLouve":
        document.getElementById('tipBoxFirst').innerHTML="Select louve for price.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_louve.asp', 'BlindsHelp', '500', '370', 'no');\">What is the louve?</a>";
        break;
      case "optionStackLocation":
        document.getElementById('tipBoxFirst').innerHTML="Select stack location.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_stacklocation.asp', 'BlindsHelp', '500', '370', 'no');\">What is the stack location?</a>";
        break;
      case "optionEdge":
        document.getElementById('tipBoxFirst').innerHTML="Now select the edge type you would like for the blind.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_edge.asp', 'BlindsHelp', '500', '300', 'no');\">What is the edge?</a>";
        break;
      case "optionPole":
        document.getElementById('tipBoxFirst').innerHTML="Now select the pole you would like for the blind.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_pole.asp', 'BlindsHelp', '500', '300', 'no');\">What is the pole?</a>";
        break;
      case "optionBraided":
        document.getElementById('tipBoxFirst').innerHTML="Select coordinating braid.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_braid.asp', 'BlindsHelp', '500', '300', 'no');\">What is braided?</a>";
        break;
      case "optionPull":
        document.getElementById('tipBoxFirst').innerHTML="Select control type.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_control_type.asp', 'BlindsHelp', '500', '290', 'no');\">What is the control type?</a>";
        break;
      case "optionPullType":
        document.getElementById('tipBoxFirst').innerHTML="Select pull type.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_pull_type.asp', 'BlindsHelp', '500', '365', 'no');\">What is the pull type?</a>";
        break;
      case "optionPullLocation":
        document.getElementById('tipBoxFirst').innerHTML="Select control location.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_control_location.asp', 'BlindsHelp', '500', '290', 'no');\">What is the control location?</a>";
        break;
      case "optionStyle":
        document.getElementById('tipBoxFirst').innerHTML="Now select the Ladder style.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_style.asp', 'BlindsHelp', '500', '320', 'no');\">What is the Ladder style?</a>";
        break;
      case "optionTilt":
        document.getElementById('tipBoxFirst').innerHTML="Now choose the tilt control location.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_tilt.asp', 'BlindsHelp', '500', '320', 'no');\">What is the tilt control?</a>";
        break;
      case "optionRaise":
        document.getElementById('tipBoxFirst').innerHTML="Now choose the location for the Raise and Lower control.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/blinds_help_raise.asp', 'BlindsHelp', '500', '290', 'no');\">What is the Raise and Lower control?</a>";
        break;
    }
  }
  /* for the blinds product page */
  function moveTheTip(to,bg,y){
    hideThemAll();
    showOptionBG(to,bg);
    showTip(y);
    changeTipText(to);
  }
  
  /* for the pole product page (as we don't need to move the tips location on this page */
  function changeThePoleTip(from,to,bg){
    hideThemPoleAll();
    showOptionBG(to,bg);
    changePoleTipText(to);
  }
  
function hideThemAll(){ 
  hideOptionBG('optionExact');
  hideOptionBG('optionBracket');  
  hideOptionBG('optionControlType');
  hideOptionBG('optionBlackout');   
  hideOptionBG('optionPleat');
  hideOptionBG('WidthandHeight');
  hideOptionBG('widthAndHeight');
  hideOptionBG('optionPull');
  hideOptionBG('optionPullType');
  hideOptionBG('optionSlatWidth');
  hideOptionBG('optionControl');
  hideOptionBG('optionDrawn');
  hideOptionBG('optionLouve');
  hideOptionBG('optionEdge');
  hideOptionBG('optionPole');
  hideOptionBG('optionBraided');
  hideOptionBG('optionPullLocation');
  hideOptionBG('optionStyle');
  hideOptionBG('optionTilt');
  hideOptionBG('optionRaise');
  }
  
function hideThemPoleAll(){ 
  hideOptionBG('optionFinalDiameter');
  hideOptionBG('optionLength');
  hideOptionBG('optionColour');
  hideOptionBG('optionCorded');
}
  
function changePoleTipText(which){

  document.getElementById('poleTipBox').style.display = 'block';

  switch (which) {

      case "optionFinalDiameter":
        document.getElementById('tipBoxFirst').innerHTML="Choose pole diameter.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/poles_help_diameter.asp', 'PolesHelp', '500', '290', 'no');\">What is pole diameter?</a>";
        break;
      case "optionLength":
        document.getElementById('tipBoxFirst').innerHTML="Choose the length required.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/poles_help_length.asp', 'PolesHelp', '500', '290', 'no');\">What is length?</a>";
        break;
      case "optionColour":
        document.getElementById('tipBoxFirst').innerHTML="Choose the colour.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/poles_help_colours.asp', 'PolesHelp', '500', '290', 'no');\">Tell me about colours</a>";
        break;
      case "optionCorded":
        document.getElementById('tipBoxFirst').innerHTML="Choose cording.";
        document.getElementById('tipBoxSecond').innerHTML="<a href=\"#\" onClick=\"return popupWindow('/popup/poles_help_corded.asp', 'PolesHelp', '500', '290', 'no');\">What is corded?</a>";
        break;
                        
    }
  }