/*
This code is from Dynamic Web Coding 
at http://www.dyn-web.com/
Copyright 2001-3 by Sharon Paine 
See Terms of Use at http://www.dyn-web.com/bus/terms.html
Permission granted to use this code 
as long as this entire notice is included.
*/

var imageHandler = {
  imgs: [], path: "",
  preload: function() {
    for (var i=0; arguments[i]; i++) {
      var img = new Image(); img.src = this.path + arguments[i];
      this.imgs[this.imgs.length] = img;
    }
  }
}

// preload images
//imageHandler.preload("online%20shoes/brand_separator.gif");


// returns amount of vertical scroll
function getScrollY() {
var sy = 0;
if (document.documentElement && document.documentElement.scrollTop)
sy = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop) 
sy = document.body.scrollTop; 
else if (window.pageYOffset)
sy = window.pageYOffset;
else if (window.scrollY)
sy = window.scrollY;
return sy;
}

// returns amount of horizontal scroll
function getScrollX() {
var sx = 0;
if (document.documentElement && document.documentElement.scrollLeft)
sx = document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft) 
sx = document.body.scrollLeft; 
else if (window.pageXOffset)
sx = window.pageXOffset;
else if (window.scrollX)
sx = window.scrollX;
return sx;
}
        
// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
    origWidth = window.innerWidth; origHeight = window.innerHeight;
    window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

		   

// content to be written to infoDiv onmouseover of links
	var msgShoeSize = '<TABLE width=360 border=1 bordercolor=black bgcolor=#E2EAEC style="border-collapse:collapse; border: 3px;"><TR><TD>' +              
               '<TABLE width=360 border=0 bgcolor=#E2EAEC style="border-collapse:collapse; border: 1px;">' +
               '  <TR bgcolor=#596468>' +
               '      <TD colspan=3 align=left valign=middle height=30 class="sectionTitleWhite">&nbsp;&nbsp;What Is My Shoe Size?</TD></TR>' +   
               '  <TR><TD colspan=3 height=5></TD></TR>' +   
               '  <TR><TD width=15 height=20></TD><TD align=left valign=middle height=15 class="small">' +
               '     We recommend that you download <a href="http://clickserve.cc-dt.com/link/click?lid=41000000028481080&mid=%SID%" target="_blank">' +
			   '     Shoe Size Templates</a> available from Shoes.com.<br><br>' +  
               '     Individual templates are available for Men, Women and Children.  Download and print the' +
               '     template appropriate for you.  Instructions on the template will assist you in determining ' +
               '     your correct shoe size and width.<br><br>' +
               '     To translate international sizes into US sizes, view the ' +
               '	<a href="javascript:openWindow(\'include/chart.php\', \'window_name_goes_here\',650,700);" onMouseOver="window.status=\'Size Table\'; return true;" onMouseOut="window.status=\'\'; return true;">Shoe Size Table</a><br>' +
			   '  </TD><TD width=5><TD></TR>' +  
               '  <TR><TD colspan=3 height=10></TD></TR>' +
               '  <TR><TD colspan=3 align=right class="linkAR11">' +
               '    <A onClick="hideLayer(\'infoDiv\');"' +
               '        onMouseOver="this.style.cursor=\'hand\'; this.style.color=\'red\'; window.status=\'Close detail\'; return true;"' +
               '        onMouseOut="this.style.color=\'black\'; window.status=\'\';  return true;">' +
               '        <img src="online shoes/CloseButton.jpg"></A>&nbsp;&nbsp;' +
               '  </TD></TR>' +
               '</TABLE>';
               '</TD></TR></TABLE>';
                          
	var msgShoeCare = '<TABLE width=360 border=1 bordercolor=black bgcolor=#E2EAEC style="border-collapse:collapse; border: 3px;"><TR><TD>' +              
               '<TABLE width=360 border=0 bgcolor=#E2EAEC style="border-collapse:collapse; border: 1px;">' +
               '  <TR bgcolor=#596468>' +
               '      <TD colspan=3 align=left valign=middle height=30 class="sectionTitleWhite">&nbsp;&nbsp;Care For Your New %BRAND% Shoes</TD></TR>' +   
               '  <TR><TD colspan=3 height=5></TD></TR>' +  
               '  <TR><TD width=15 height=20></TD><TD align=left valign=middle height=15 class="smaller_black">' +
               '       - <a href="%CARE_LINK%" target="_blank">Cedar shoes trees</a> can extend the life of your leather shoes immensely. They dry out of your shoes, awaken the shoe\'s natural structural memory, and prevent the leather from cracking.<br><br>' +
               '       - <b>Rotate wear:</b> shoes need a day off.  If you want your fine leather shoes to last longer, never wear them for two consecutive days. Rotate your shoes with another pair of shoes and let them rest.<br><br>' +
               '       - <a href="%CARE_LINK%" target="_blank">Boot shapers</a> are a must to keep tall boots from sagging around the ankles.  They make storage easier too!<br><br>' +
               '       - Wash your shoes now and then with leather cleaner. Put them in your cedar shoe trees and let them air dry in a naturally ventilated area. (Shoes should never be put close to heat sources which can dry out the leather.) When shoes are dry, polish them with a <a href="%CARE_LINK%" target="_blank">quality wax based polish.<a><br><br>' +
               '       - Add a <b>sole protector</b> to prolong the life of your shoes.  Stylishly thin, this rubber top sole protects the outer sole from wear and tear. Water resistant and skid proof, protective soles will make any pair of leather soled shoes last a lifetime.<br><br>' +
               '       - Never machine wash your footwear as this will seriously damage your shoes and void any guarantee.<br><br>' +
               '       - Brand new leather soled footwear should never be worn in wet weather conditions, It is important to wear them on a dry day to allow a build up of grit on the soles, doing this will help protect the leather and extend the life of the footwear.<br>' + 
               '</TD><TD width=10><TD></TR>' +   
               '  <TR><TD colspan=3 height=10></TD></TR>' +
               '  <TR><TD colspan=3 align=right class="linkAR11">' +
               '    <A onClick="hideLayer(\'infoDiv\');"' +
               '        onMouseOver="this.style.cursor=\'hand\'; this.style.color=\'red\'; window.status=\'Close detail\'; return true;"' +
               '        onMouseOut="this.style.color=\'black\'; window.status=\'\';  return true;">' +
               '        <img src="online shoes/CloseButton.jpg"></A>&nbsp;&nbsp;' +
               '  </TD></TR>' +
               '</TABLE>';
               '</TD></TR></TABLE>';
     
     
               
     var msgCoupon = '<TABLE width=320 border=1 bordercolor=black bgcolor=#E2EAEC style="border-collapse:collapse; border: 3px;"><TR><TD>' +              
               '<TABLE width=320 border=0 bgcolor=#E2EAEC style="border-collapse:collapse; border: 1px;">' +
               '  <TR bgcolor=#596468>' +
               '      <TD colspan=3 align=center valign=middle height=30 class="box_title">%PROGRAM% Coupon Details</TD></TR>' +   
               '  <TR><TD colspan=3 height=5></TD></TR>' +  
               '  <TR><TD width=5></TD><TD align=left valign=middle height=15 class="review_body" style="padding-top: 15px;">' +
               '<i>This coupon is valid only for purchases made from %PROGRAM%.</i><br><br>' +
               '%TEXT%<br><br>' +                
               '</TD><TD width=5><TD></TR>' +   
               '  <TR><TD colspan=3 height=1></TD></TR>' +
               '  <TR><TD align=center colspan=3  class="linkAR11">' +
               '     <a href="%LINK%">' +
               '        Check more details on <b>%BRAND% %STYLE%</b> at <b>%PROGRAM%</b></a><br><br>' +
               '    </TD></TR>' +
               '  <TR bgcolor=#596468>' +
               '    <TD colspan=3 align=right valign=middle height=30 class="box_title">' +  
               '      <A onClick="hideLayer(\'infoDiv\');"' +
               '        onMouseOver="this.style.cursor=\'hand\'; this.style.color=\'red\'; window.status=\'Close detail\'; return true;"' +
               '        onMouseOut="this.style.color=\'white\'; window.status=\'\';  return true;">' +
               '        <img src="online shoes/CloseButton.jpg"></A>&nbsp;&nbsp;' +
               '</TD></TR>' +   
               '</TABLE>';
               '</TD></TR></TABLE>';          
               
   
               
     var msgCouponForSearch = '<TABLE width=320 border=1 bordercolor=black bgcolor=#E2EAEC style="border-collapse:collapse; border: 3px;"><TR><TD>' +              
               '<TABLE width=320 border=0 bgcolor=#E2EAEC style="border-collapse:collapse; border: 1px;">' +
               '  <TR bgcolor=#596468>' +
               '      <TD colspan=3 align=center valign=middle height=30 class="box_title"><span style="position: relative; top: 2px;">%PROGRAM_IMAGE%</span> <span style="position: relative; bottom: 15px;">Coupon Details</span></TD></TR>' +   
               '  <TR><TD colspan=3 height=5></TD></TR>' +  
               '  <TR><TD width=5></TD><TD align=left valign=middle height=15 class="review_body" style="padding-top: 15px;">' +
               '<i>This coupon is valid only for purchases made from %PROGRAM%.</i><br><br>' +
               '%TEXT%<br><br>' +                
               '</TD><TD width=5><TD></TR>' +   
               '  <TR><TD colspan=3 height=1></TD></TR>' +
               '  <TR><TD align=center colspan=3  class="linkAR11">' +
               '     <a href="%LINK%">' +
               '        Check more details on <b>%STYLE%</b> at <b>%PROGRAM%</b></a><br><br>' +
               '    </TD></TR>' +
               '  <TR bgcolor=#596468>' +
               '    <TD colspan=3 align=right valign=middle height=30 class="box_title">' +  
               '      <A onClick="hideLayer(\'infoDiv\');"' +
               '        onMouseOver="this.style.cursor=\'hand\'; this.style.color=\'red\'; window.status=\'Close detail\'; return true;"' +
               '        onMouseOut="this.style.color=\'white\'; window.status=\'\';  return true;">' +
               '        <img src="online shoes/CloseButton.jpg"></A>&nbsp;&nbsp;' +
               '</TD></TR>' +   
               '</TABLE>';
               '</TD></TR></TABLE>';          
               
        
        
        
        
        
        
       
                   
                          
               
               
 var msgSignupForPriceUpdates = '<TABLE width=400 border=1 bordercolor=black bgcolor=#E2EAEC style="border-collapse:collapse; border: 5px;"><TR><TD>' +              
               '<TABLE width=400 border=0 bgcolor=#E2EAEC style="border-collapse:collapse; border: 1px;">' +
               '  <TR bgcolor=#596468>' +
               '    <TD colspan=3 align=center valign=middle height=30 class="box_title"><span style="position: relative; top: 2px;">%STYLE_NAME%</span> <span style="position: relative; top: 2px;"> - Sign Up For Price Updates!</span>' +
               '    </TD>' +
               '  </TR>' +   
               '  <TR><TD colspan=3 height=5></TD></TR>' +  
               '  <TR><TD width=5></TD><TD align=left valign=middle height=15 class="review_body" style="padding-top: 15px;">' +
               '<i>Enter your email address below to be notified of reductions in the price of the %STYLE_NAME%:</i><br><br>' +
               '<br><br>' +                
               '</TD><TD width=5></TD></TR>' +   
               '  <TR><TD colspan=3 height=1></TD></TR>' +
               '  <TR><TD align=center colspan=3 class="linkAR11">' +
               '    <FORM style="display:inline; margin-top:0px; margin-bottom:0px;">' +
               '      <INPUT type="hidden" name="style" value="%STYLE_NUM%">' +
               '      <INPUT type="hidden" name="sid" value="%SID%">' +
               '      <INPUT TYPE=TEXT maxlength=100 size=50 NAME="email" ID="email" value="%EMAIL%"><br><br>' +                                         
               '      <INPUT title="Enter email" class="blue_button9" TYPE=button value="Sign Up For Price Updates" onClick="doPriceUpdateSignup(this.form);">'+          
               '    </FORM>' +
               '    </TD></TR>' +             
               '  <TR><TD colspan=3 height=15></TD></TR>' +   
               '  <TR bgcolor=#596468>' +
               '    <TD colspan=3 align=right valign=middle height=30 class="box_title">' +  
               '      <A onClick="hideLayer(\'infoDiv\');"' +
               '        onMouseOver="this.style.cursor=\'hand\'; this.style.color=\'red\'; window.status=\'Close detail\'; return true;"' +
               '        onMouseOut="this.style.color=\'white\'; window.status=\'\';  return true;">' +
               '        <img src="online shoes/CloseButton.jpg"></A>&nbsp;&nbsp;' +
               '     </TD></TR>' +   
               '</TABLE>';
               '</TD></TR></TABLE>';          
               

               
var layerHandler = {
  getRefs: function (id) {
    var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
    if (el) el.css = el.style? el.style: el;
    return el;
  },
  
  writeLayer: function (el, cntnt) {
    if (typeof el.innerHTML != "undefined") {
        el.innerHTML = cntnt;
    } else if (document.layers) {
  el.document.write(cntnt);
  el.document.close();
    }
  },
  
  shiftTo: function (el,x,y) {
    var px = (document.layers || window.opera)? 0: "px";
    if (x != null)
    {
     el.css.left = x + px;
    }
    
    if (y != null)
    {
     el.css.top = y + px;
    }
  },

  show: function (el) { el.css.visibility = "visible";},
  hide: function (el) { el.css.visibility = "hidden"; }
}  
                 
var page_loaded; // set true onload

function doLayer(id, which, brand, sid, e, offx, offy) 
{   
    if (!page_loaded) return;
  
    var el = layerHandler.getRefs(id);
    if (!el) return;
  
    layerHandler.hide(el); // just in case ...

	if (which == 'shoe_size')
  	{
    	var cntnt = '<div class="info">' + msgShoeSize + '</div>';
    	
    	myRegExp = /%SID%/g;
    	cntnt = cntnt.replace(myRegExp, sid);
   	}
    
  	else if (which == 'shoe_care')
  	{
    	var cntnt = '<div class="info">' + msgShoeCare + '</div>';
    	
    	var link = 'http://www.tkqlhce.com/click-1563982-10383552?url=http%3A%2F%2Fwww.shoebuy.com%2Fsb%2Fs.jsp%2Fr_ss%2Fp0_637%2C629%2Fsh_C_Accessories%2Fb_3-0.82906-56.28-141.80072&sid=' + sid;
    	
    	myRegExp = /%BRAND%/g;
    	cntnt = cntnt.replace(myRegExp, brand);
    	
    	myRegExp = /%CARE_LINK%/g;
    	cntnt = cntnt.replace(myRegExp, link);
   	}
   	
	else if (which == 'price_update')
  	{
    	var cntnt = '<div class="info">' + msgSignupForPriceUpdates + '</div>';
    	
    	myRegExp = /%SID%/g;
    	cntnt = cntnt.replace(myRegExp, sid);
   	}
    
  	
    
    // get position of onmouseover event and use it to position layer  
    e = (window.event)? window.event: e;
    
    if (e)
    {
        var x =  (e.pageX)? e.pageX: (e.clientX)? e.clientX + getScrollX(): 0;
        var y =  (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0;
        
        
      
        layerHandler.shiftTo(el, x+offx, y+offy);
    }
    
    layerHandler.writeLayer(el, cntnt);
    layerHandler.show(el);
}



function doPriceLayer(id, snum, sname, email, sid, e, offx, offy) 
{   
    if (!page_loaded) return;
  
    var el = layerHandler.getRefs(id);
    if (!el) return;
  
    layerHandler.hide(el); // just in case ...

	
    var cntnt = '<div class="info">' + msgSignupForPriceUpdates + '</div>';
    	
    myRegExp = /%SID%/g;
    cntnt = cntnt.replace(myRegExp, sid);   	
    
    myRegExp = /%STYLE_NUM%/g;
    cntnt = cntnt.replace(myRegExp, snum);
  	
    myRegExp = /%STYLE_NAME%/g;
    cntnt = cntnt.replace(myRegExp, sname);
  	
    myRegExp = /%EMAIL%/g;
    cntnt = cntnt.replace(myRegExp, email);
    
    // get position of onmouseover event and use it to position layer  
    e = (window.event)? window.event: e;
    
    if (e)
    {
        var x =  (e.pageX)? e.pageX: (e.clientX)? e.clientX + getScrollX(): 0;
        var y =  (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0;
        
        
      
        layerHandler.shiftTo(el, x+offx, y+offy);
    }
    
    layerHandler.writeLayer(el, cntnt);
    layerHandler.show(el);
}



function doCouponLayer(id, program_name, brand_name, style_name, text, sid, pn, bd, sn, cat, e, offx, offy) 
{   
    if (!page_loaded) return;
  
    var el = layerHandler.getRefs(id);
    if (!el) return;
  
    layerHandler.hide(el); // just in case ...
	
 	var cntnt = '<div class="info">' + msgCoupon + '</div>';
    
    var link; 
    
	// set up the link 
	if (pn == 0)
      link = 'product_detail.php?sid=' + sid + '&bd=' + bd + '&sn=' + sn + '&cat=' + cat;
    else
      link = 'product_buy.php?sid=' + sid + '&pn=' + pn;
       	
   	myRegExp = /%PROGRAM%/g;
   	cntnt = cntnt.replace(myRegExp, program_name);
    	
   	myRegExp = /%TEXT%/g;
   	cntnt = cntnt.replace(myRegExp, text);
   	
   	myRegExp = /%BRAND%/g;
   	cntnt = cntnt.replace(myRegExp, brand_name);
   	
   	myRegExp = /%STYLE%/g;
   	cntnt = cntnt.replace(myRegExp, style_name);
    
   	myRegExp = /%LINK%/g;
   	cntnt = cntnt.replace(myRegExp, link);

   
    
    // get position of onmouseover event and use it to position layer  
    e = (window.event)? window.event: e;
    
    if (e)
    {
        var x =  (e.pageX)? e.pageX: (e.clientX)? e.clientX + getScrollX(): 0;
        var y =  (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0;
        
        
      
        layerHandler.shiftTo(el, x+offx, y+offy);
    }
    
    layerHandler.writeLayer(el, cntnt);
    layerHandler.show(el);
}

function doCouponLayerForSearch(id, program_name, program_image, style_name, text, sid, pn, e, offx, offy) 
{   
    if (!page_loaded) return;
  
    var el = layerHandler.getRefs(id);
    if (!el) return;
  
    layerHandler.hide(el); // just in case ...
	
 	var cntnt = '<div class="info">' + msgCouponForSearch + '</div>';
    
    var link; 
    
	// set up the link
    link = 'product_buy.php?type=all&sid=' + sid + '&pn=' + pn;
       	
    // logo image for program
    program_image_html = '<img src="' + program_image + '">';
       	
   	myRegExp = /%PROGRAM%/g;
   	cntnt = cntnt.replace(myRegExp, program_name);
    		
   	myRegExp = /%PROGRAM_IMAGE%/g;
   	cntnt = cntnt.replace(myRegExp, program_image_html);
   	
   	myRegExp = /%TEXT%/g;
   	cntnt = cntnt.replace(myRegExp, text);
   	
   	myRegExp = /%STYLE%/g;
   	cntnt = cntnt.replace(myRegExp, style_name);
    
   	myRegExp = /%LINK%/g;
   	cntnt = cntnt.replace(myRegExp, link);
    
    // get position of onmouseover event and use it to position layer  
    e = (window.event)? window.event: e;
    
    if (e)
    {
        var x =  (e.pageX)? e.pageX: (e.clientX)? e.clientX + getScrollX(): 0;
        var y =  (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0;
      
        layerHandler.shiftTo(el, x+offx, y+offy);
    }
    
    layerHandler.writeLayer(el, cntnt);
    layerHandler.show(el);
}




function hideLayer(id)
{
    if (!page_loaded) return;
    var el = layerHandler.getRefs(id);
    if (!el) return;
    layerHandler.hide(el);
}