// img preload
function preloadImages() {

	if (document.images)
	{

		// primary nav
		home_on = new Image();
		home_on.src = "images/nav/home_on.png";

		my_collection_on = new Image();
		my_collection_on.src = "images/nav/my_collection_on.png";

		my_wishlist_on = new Image();
		my_wishlist_on.src = "images/nav/my_wishlist_on.png";

		e_cards_on = new Image();
		e_cards_on.src = "images/nav/e_cards_on.png";

		faqs_on = new Image();
		faqs_on.src = "images/nav/faqs_on.png";

		view_on = new Image();
		view_on.src = "images/nav/view_on.png";

		play_on = new Image();
		play_on.src = "images/nav/play_on.png";

		information_on = new Image();
		information_on.src = "images/nav/information_on.png";

		shop_on = new Image();
		shop_on.src = "images/nav/shop_on.png";
		
		
		// panels
		body_secondary_top_on = new Image();
		body_secondary_top_on.src = "images/panels/body_secondary_top_on.png";
		
		body_secondary_middle_on = new Image();
		body_secondary_middle_on.src = "images/panels/body_secondary_middle_on.png";
		
		body_secondary_bottom_on = new Image();
		body_secondary_bottom_on.src = "images/panels/body_secondary_bottom_on.png";
		
		body_tertiary_left_02_on = new Image();
		body_tertiary_left_02_on.src = "images/panels/body_tertiary_left_02_on.jpg";
		
		body_tertiary_middle_my_collection_on = new Image();
		body_tertiary_middle_my_collection_on.src = "images/panels/body_tertiary_middle_my_collection_on.jpg";
		
		body_tertiary_middle_play_games_on = new Image();
		body_tertiary_middle_play_games_on.src = "images/panels/body_tertiary_middle_play_games_on.jpg";
		
		body_tertiary_right_02_on = new Image();
		body_tertiary_right_02_on.src = "images/panels/body_tertiary_right_02_on.jpg";

	}

}


// mouse-over for primary nav
function changeNav(from, to) {
	if(document.images) {
		document.images[from].src = "images/nav/" + from + "_" + to + ".png";
	}
}


// mouse-over for sub nav
function changeSubNav(from, to) {
	if(document.images) {
		document.images[from].src = "images/sub_nav/" + to + "/" + from + ".jpg";
	}
}


// mouse-over for panels
function changePanels(from, to) {
	if(document.images) {
		document.images[from].src = "images/panels/" + from + "_" + to + ".jpg";
	}
}




// menu
var menu1=new Array();
menu1[0]='<a class="dropmenu" href="http://www.clay-mates.com/us/occasions.htm" target="newcontent" onmouseover="changeSubNav(\'about_occasions\', \'on\')" onmouseout="changeSubNav(\'about_occasions\', \'off\')"><img name="about_occasions" src="images/sub_nav/off/about_occasions.jpg" alt="About Occasions" width="169" height="22" border="0"></a>';
menu1[1]='<a class="dropmenu" href="http://www.clay-mates.com/us/boutiquerangeUSA.htm" target="newcontent" onmouseover="changeSubNav(\'about_boutiques\', \'on\')" onmouseout="changeSubNav(\'about_boutiques\', \'off\')"><img name="about_boutiques" src="images/sub_nav/off/about_boutiques.jpg" alt="About Boutiques" width="169" height="22" border="0"></a>';
menu1[2]='<a class="dropmenu" href="http://www.clay-mates.com/us/genuine.htm" target="newcontent" onmouseover="changeSubNav(\'genuine_clay_mates\', \'on\')" onmouseout="changeSubNav(\'genuine_clay_mates\', \'off\')"><img name="genuine_clay_mates" src="images/sub_nav/off/genuine_clay_mates.jpg" alt="Genuine Clay-Mates" width="169" height="22" border="0"></a>';
menu1[3]='<a class="dropmenu" href="http://www.clay-mates.com/newsattach/jgi.pdf" target="_blank" onmouseover="changeSubNav(\'endangered_species\', \'on\')" onmouseout="changeSubNav(\'endangered_species\', \'off\')"><img name="endangered_species" src="images/sub_nav/off/endangered_species.jpg" alt="Endangered Species" width="169" height="22" border="0"></a>';

var menu2=new Array();
menu2[0]='<a class="dropmenu" href="http://www.clay-mates.com/us/viewletterUSA.asp" target="newcontent" onmouseover="changeSubNav(\'newsletters\', \'on\')" onmouseout="changeSubNav(\'newsletters\', \'off\')"><img name="newsletters" src="images/sub_nav/off/newsletters.jpg" alt="Newsletters" width="169" height="22" border="0"></a>';
menu2[1]='<a class="dropmenu" href="http://www.clay-mates.com/us/Photo.html" target="newcontent" onmouseover="changeSubNav(\'photo_frames\', \'on\')" onmouseout="changeSubNav(\'photo_frames\', \'off\')"><img name="photo_frames" src="images/sub_nav/off/photo_frames.jpg" alt="Photo Frames" width="169" height="22" border="0"></a>';
menu2[2]='<a class="dropmenu" href="http://www.clay-mates.com/us/Magnifier.html" target="newcontent" onmouseover="changeSubNav(\'magnifier\', \'on\')" onmouseout="changeSubNav(\'magnifier\', \'off\')"><img name="magnifier" src="images/sub_nav/off/magnifier.jpg" alt="Magnifier" width="169" height="22" border="0"></a>';

var menu3=new Array();
menu3[0]='<a class="dropmenu" href="http://www.clay-mates.com/us/crossword.asp" target="newcontent" onmouseover="changeSubNav(\'crossword\', \'on\')" onmouseout="changeSubNav(\'crossword\', \'off\')"><img name="crossword" src="images/sub_nav/off/crossword.jpg" alt="Crossword" width="169" height="22" border="0"></a>';
menu3[1]='<a class="dropmenu" href="http://www.clay-mates.com/us/crossword.asp" target"newcontent" onmouseover="changeSubNav(\'word_search\', \'on\')" onmouseout="changeSubNav(\'word_search\', \'off\')"><img name="word_search" src="images/sub_nav/off/word_search.jpg" alt="Word Search" width="169" height="22" border="0"></a>';
menu3[2]='<a class="dropmenu" href="http://www.clay-mates.com/us/memory.asp" target="newcontent" onmouseover="changeSubNav(\'memory_games\', \'on\')" onmouseout="changeSubNav(\'memory_games\', \'off\')"><img name="memory_games" src="images/sub_nav/off/memory_games.jpg" alt="Memory Games" width="169" height="22" border="0"></a>';
//menu3[3]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'jigsaw_puzzles\', \'on\')" onmouseout="changeSubNav(\'jigsaw_puzzles\', \'off\')"><img name="jigsaw_puzzles" src="images/sub_nav/off/jigsaw_puzzles.jpg" alt="Jigsaw Puzzles" width="169" height="22" border="0"></a>';
//menu3[3]='<a class="dropmenu" href="" onmouseover="changeSubNav(\'concentration\', \'on\')" onmouseout="changeSubNav(\'concentration\', \'off\')"><img name="concentration" src="images/sub_nav/off/concentration.jpg" alt="Concentration" width="169" height="22" border="0"></a>';
menu3[3]='<a class="dropmenu" href="http://www.clay-mates.com/us/montage.asp" target="newcontent" onmouseover="changeSubNav(\'create_posters\', \'on\')" onmouseout="changeSubNav(\'create_posters\', \'off\')"><img name="create_posters" src="images/sub_nav/off/create_posters.jpg" alt="Create Posters" width="169" height="22" border="0"></a>';
//menu3[6]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'color\', \'on\')" onmouseout="changeSubNav(\'color\', \'off\')"><img name="color" src="images/sub_nav/off/color.jpg" alt="Color" width="169" height="22" border="0"></a>';
//menu3[7]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'create_calendars\', \'on\')" onmouseout="changeSubNav(\'create_calendars\', \'off\')"><img name="create_calendars" src="images/sub_nav/off/create_calendars.jpg" alt="Create Calendars" width="169" height="22" border="0"></a>';
//menu3[4]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'new_endangered_jgi\', \'on\')" onmouseout="changeSubNav(\'new_endangered_jgi\', \'off\')"><img name="new_endangered_jgi" src="images/sub_nav/off/new_endangered_jgi.jpg" alt="New Endangered (JGI)" width="169" height="22" border="0"></a>';

var menu4=new Array();
//menu4[0]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'learn_names_and_b_days\', \'on\')" onmouseout="changeSubNav(\'learn_names_and_b_days\', \'off\')"><img name="learn_names_and_b_days" src="images/sub_nav/off/learn_names_and_b_days.jpg" alt="Learn Names and B-Days" width="169" height="22" border="0"></a>';
menu4[0]='<a class="dropmenu" href="http://www.clay-mates.com/us/USAretailers.asp" target="newcontent" onmouseover="changeSubNav(\'search_for_retailers\', \'on\')" onmouseout="changeSubNav(\'search_for_retailers\', \'off\')"><img name="search_for_retailers" src="images/sub_nav/off/search_for_retailers.jpg" alt="Search for Retailers" width="169" height="22" border="0"></a>';
menu4[1]='<a class="dropmenu" href="http://www.clay-mates.com/us/contactinUSA.htm" target="newcontent" onmouseover="changeSubNav(\'contact_us\', \'on\')" onmouseout="changeSubNav(\'contact_us\', \'off\')"><img name="contact_us" src="images/sub_nav/off/contact_us.jpg" alt="Contact Us" width="169" height="22" border="0"></a>';
menu4[2]='<a class="dropmenu" href="http://www.clay-mates.com/us/retailerenquiryUS.asp" target="newcontent" onmouseover="changeSubNav(\'become_a_retailer\', \'on\')" onmouseout="changeSubNav(\'become_a_retailer\', \'off\')"><img name="become_a_retailer" src="images/sub_nav/off/become_a_retailer.jpg" alt="Become a Retailer" width="169" height="22" border="0"></a>';
menu4[3]='<a class="dropmenu" href="http://www.clay-mates.com/us/termsUSA.htm" target="newcontent" onmouseover="changeSubNav(\'terms_conditions\', \'on\')" onmouseout="changeSubNav(\'terms_conditions\', \'off\')"><img name="terms_conditions" src="images/sub_nav/off/terms_conditions.jpg" alt="Terms &amp; Conditions" width="169" height="22" border="0"></a>';
menu4[4]='<a class="dropmenu" href="http://www.clay-mates.com/us/policyUSA.htm" target="newcontent" onmouseover="changeSubNav(\'refund_policy\', \'on\')" onmouseout="changeSubNav(\'refund_policy\', \'off\')"><img name="refund_policy" src="images/sub_nav/off/refund_policy.jpg" alt="Refund Policy" width="169" height="22" border="0"></a>';

var menu5=new Array();
menu5[0]='<a class="dropmenu" href="http://www.clay-mates.com/us/clayshopUSA.asp?catid=all" target="newcontent" onmouseover="changeSubNav(\'all_clay_mates\', \'on\')" onmouseout="changeSubNav(\'all_clay_mates\', \'off\')"><img name="all_clay_mates" src="images/sub_nav/off/all_clay_mates.jpg" alt="All Clay-Mates" width="169" height="22" border="0"></a>';
menu5[1]='<a class="dropmenu" href="http://www.clay-mates.com/us/clayshopUSA.asp?catid=boutique" target="newcontent" onmouseover="changeSubNav(\'boutique\', \'on\')" onmouseout="changeSubNav(\'boutique\', \'off\')"><img name="boutique" src="images/sub_nav/off/boutique.jpg" alt="Boutique" width="169" height="22" border="0"></a>';
menu5[2]='<a class="dropmenu" href="http://www.clay-mates.com/us/clayshopUSA.asp" target="newcontent" onmouseover="changeSubNav(\'classic\', \'on\')" onmouseout="changeSubNav(\'classic\', \'off\')"><img name="classic" src="images/sub_nav/off/classic.jpg" alt="Classic" width="169" height="22" border="0"></a>';
menu5[3]='<a class="dropmenu" href="http://www.clay-mates.com/us/clayshopUSA.asp?catid=classicplus" target="newcontent" onmouseover="changeSubNav(\'classic_plus\', \'on\')" onmouseout="changeSubNav(\'classic_plus\', \'off\')"><img name="classic_plus" src="images/sub_nav/off/classic_plus.jpg" alt="Classic Plus" width="169" height="22" border="0"></a>';
menu5[4]='<a class="dropmenu" href="http://www.clay-mates.com/us/clayshopUSA.asp?catid=occasion" target="newcontent" onmouseover="changeSubNav(\'occasion\', \'on\')" onmouseout="changeSubNav(\'occasion\', \'off\')"><img name="occasion" src="images/sub_nav/off/occasion.jpg" alt="Occasion" width="169" height="22" border="0"></a>';
menu5[5]='<a class="dropmenu" href="http://www.claymates.com/newsattach/jgi.pdf" target="newcontent" onmouseover="changeSubNav(\'endangered_jgi\', \'on\')" onmouseout="changeSubNav(\'endangered_jgi\', \'off\')"><img name="endangered_jgi" src="images/sub_nav/off/endangered_jgi.jpg" alt="Endangered (JGI)" width="169" height="22" border="0"></a>';
//menu5[6]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'special_products_offers\', \'on\')" onmouseout="changeSubNav(\'special_products_offers\', \'off\')"><img name="special_products_offers" src="images/sub_nav/off/special_products_offers.jpg" alt="Special Products &amp; Offers" width="169" height="22" border="0"></a>';
//menu5[7]='<a class="dropmenu" href="#" onmouseover="changeSubNav(\'party_programs\', \'on\')" onmouseout="changeSubNav(\'party_programs\', \'off\')"><img name="party_programs" src="images/sub_nav/off/party_programs.jpg" alt="Party Programs" width="169" height="22" border="0"></a>';
menu5[6]='<a class="dropmenu" href="http://www.clay-mates.com/us/montage.asp" target="newcontent" onmouseover="changeSubNav(\'posters\', \'on\')" onmouseout="changeSubNav(\'posters\', \'off\')"><img name="posters" src="images/sub_nav/off/posters.jpg" alt="Posters" width="169" height="22" border="0"></a>';

		
var menuwidth='169px'; //default menu width
var menubgcolor='#D1E1FC';  //menu bgcolor
var disappeardelay=250;  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes"; //hide menu when user clicks within menu?

// no further editting needed
var ie4=document.all;
var ns6=document.getElementById&&!document.all;

if (ie4||ns6)
	document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>');

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){

	if (ie4||ns6){
		dropmenuobj.style.left=dropmenuobj.style.top="-500px";
	}
	
	if (menuwidth!=""){
		dropmenuobj.widthobj=dropmenuobj.style;
		dropmenuobj.widthobj.width=menuwidth;
	}
	
	if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
		obj.visibility=visible;
	}
	else if (e.type=="click"){
		obj.visibility=hidden;
	}

}

function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function clearbrowseredge(obj, whichedge){

	var edgeoffset=0;

	if (whichedge=="rightedge"){
	var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15;
	dropmenuobj.contentmeasure=dropmenuobj.offsetWidth;

	if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth;
}
else{
	var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset;
	var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18;
	dropmenuobj.contentmeasure=dropmenuobj.offsetHeight;
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
	
	return clickreturnvalue()
}
	
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
	document.onclick=hidemenu
