var mouseovers = ["apparel","walkies","accessories","carriers","safety","playtime",
				  "bathtime","bedtime","treats","catscorner","puppies","lovepink",
				  "seasonal","sale","foryou"];

for(var element in mouseovers) {
	preload('image/nav2_'+element+'.gif');	
}


function resize(curr, width, height) {
  var debugString = "";

  var origimage = new Image();
  origimage.src = curr.src;
  
  var origheight = parseInt(origimage.height);
  var origwidth = parseInt(origimage.width);

  if(true) { debugString += '\nCurrent:\n'+curr.src+'\n->'+curr.width+'x'+curr.height+'\n'; }
  if(true) { debugString += '\nFile:\n'+origimage.src+'\n->'+origwidth+'x'+origheight+'\n'; }
  
  if(curr.height > origheight || curr.width > origwidth) {
    curr.height = origheight;
	curr.width = origwidth;	  
  }


  if(width == -1) {
	width = cascadedstyle(document.getElementById('productimage'),'width','width');
	width = width.substring(0,width.length-2) - 10;
	height = cascadedstyle(document.getElementById('productimage'),'height','height');
    height = height.substring(0,height.length-2) - 10;  
  }



  var containerwidth = parseInt(width);
  var containerheight = parseInt(height);
  

  if(true) { debugString += '\nContainer Size:\n'+containerwidth+'x'+containerheight+'\n'; }
  if(true) { debugString += '\nIf Current or Original are larger than Container, resize'; }


  // If the original image (file) is wider or taller than the image container
  //   =OR=
  // If the original image (file) is wider or taller than the current IMG tag
  // -Resize the image, picking the smallest ratio necessary to get it 
  //   into the container
  if(origwidth > containerwidth || origheight > containerheight || curr.height != origheight || curr.width != origwidth) {
    var ratio = Math.min(containerwidth / origwidth, containerheight / origheight);
    curr.width = Math.round(ratio * origwidth);
    curr.height = Math.round(ratio * origheight);
  }
  
  if(true) { debugString += '\nAfterwards:\n'+curr.src+'\n->'+curr.width+'x'+curr.height+'\n'; }
  
 
  // alert(debugString);
}



function cascadedstyle(el, cssproperty, csspropertyNS){
  if (el.currentStyle)
    return el.currentStyle[cssproperty]
  else if (window.getComputedStyle){
    var elstyle=window.getComputedStyle(el, "")
    return elstyle.getPropertyValue(csspropertyNS)
  }
}


function preload(src) {
  var tmp = new Image();
  tmp.src = src;	
}

function makeBig(x) {
  var mainimage =  document.getElementById('mainimage');
  
  var width = cascadedstyle(document.getElementById('productimage'),'width','width');
  //account for 'px'
  width = width.substring(0,width.length-2) - 10;  
  var height = cascadedstyle(document.getElementById('productimage'),'height','height');
  height = height.substring(0,height.length-2) - 10;  
  
  mainimage.src = x.src;  
//  resize(mainimage, width, height);
}



function changetopimage(img) {
  document.getElementById("topimage").style.backgroundImage 
      = "url(\'./image/"+img+"\')" ;
}

function cuttopimage() {
  document.getElementById("topimage").style.marginBottom = '-158px';
}

function changetopbarw(img) {
  document.getElementById("topbarwhite").style.backgroundImage 
      = "url(\'./image/"+img+"\')" ;	  
}

function texttopbarw(text) {
  var el = document.getElementById("topbarwhite");
  
  el.style.backgroundImage = "none";
  
  el.innerHTML = "<span>"+text+"</span>";	
}

var months = new Array('January','February','March','April','May','June',
					   'July','August','September','October','November',
					   'December');

function changetopbarb(sec) {
  var el = document.getElementById('topbarblue');
	
  switch(sec.toLowerCase()) {
	case "news":var today = new Date()
				el.innerHTML = '<span id="bluebardate">' 
				+ months[today.getMonth()] 
				+ ' ' + today.getFullYear() + '</div>';
				break;
    case "faq": el.innerHTML = '<div id="bluebarfaq">'
				+ '<span>Need  help?</span><br/>CALL  '
				+ '020 7580 7580</div>';
				break;
    case "forum": el.innerHTML = '<a id="bluebarforum" '
				+ 'href="mailto:office@petlondon.com">Send Review<a/>';
				break;
    case "info": el.innerHTML = '<a id="bluebarforum" '
				+ 'href="FindUs.html">How to find us<a/>';
				break;
    case "findus": el.innerHTML = '<a id="bluebarforum" '
				+ 'href="Information.html">Back<a/>';
				break;
    case "photos": el.innerHTML = '<a id="bluebarforum" '
				+ 'href="mailto:star@petlondon.com">Email a picture<a/>';
				break;
    default: break;
  }
}



var openul = null;
function togglesub(id) {
  var subul = document.getElementById(id);	
  if(openul == subul) {
	openul.className = 'sub';
	openul = null;
  } else if (openul == null && hasSub(subul)) {
	openul = subul;
	openul.className = 'sub_show';
  } else if(hasSub(subul)) {
	openul.className = 'sub';
	openul = subul;
    openul.className = 'sub_show';
  }
  
}

function hasSub(e) {
  if(e.innerHTML.indexOf('<li>') > -1 || e.innerHTML.indexOf('<LI>') > -1) {
    return true;
  }
  return false;
}


function expandNav(id) {
	if(document.getElementById(id)) {
//	 alert(id);
     togglesub(id);
	}
}

function changeBlurb(el, name, state) { 
// 1 = moving
// 0 = still
  var newFileName = 'image/blurb_' + name;

  if(state == 0) {
    newFileName += 'still';
  }
  
  newFileName += '.gif';
  el.childNodes[3].src = newFileName; 
}


function showTV(file) { 

  var i = new Image();
  i.src = 'image/'+file;

  var el = document.getElementById('tvimage'); 

  el.src = i.src;
  el.width = i.width;
  el.height = i.height;
  
//  resize(el, 432, 241);
//  resize(el,20,20);
//  el.style.marginTop = Math.round((241 - el.height) / 2) +  'px';
}


var lastFrame = 1;
function setFrame(img) {
  var width = img.width;
  var height = img.height;
  
  if(width > (1.2 * height)) {
	makeFrame(img,3.5);
	lastFrame = 3;
  } else if(height > (1.2 * width)) {
	 var fclass = 3;
	 while(fclass == 3 || fclass == lastFrame) {
		 fclass = Math.round(Math.random() * 5) + 1;
	 }
	 makeFrame(img,fclass);
	 lastFrame = fclass;
  }  else if(width >= .9 * height && width <= 1.1 * height) {
	 makeCircle(img);  
	  
  }
}

var outerwidth = new Array(133,174,197,159,166,166);
var outerheight = new Array(273,234,159,222,222,257);
var innerwidth = new Array(115,117,164,121,109,114);
var innerheight = new Array(167,170,121,184,164,161);

function makeFrame(img,fclass) {
  if(fclass == 3.5) { fclass -= .5; }	
  resize(img, innerwidth[fclass-1], innerheight[fclass-1]);
  
  var height = img.height;
  var width = img.width;
  
//  alert("fclass: "+fclass+"\nDim: "+width+"x"+height+"\n"+innerwidth[fclass-1]+"x"+innerheight[fclass-1]);
  img.parentNode.className = 'r'+fclass;
  
  img.style.marginTop = Math.round((innerheight[fclass-1] - height)/2) + "px";
}

function makeCircle(img) {
  if(img.parentNode.innerHTML.indexOf('frame_') < 0) {
	 resize(img,112,113);
	img.className = 'circlepic';
    img.parentNode.innerHTML += '<img src="image/frame_c1.gif" class="circleframe">';	
  }
}


function changeBG(blurbid, status) {
 
  var image = 'image/blurb_'+blurbid;
  if(status == 0) {
	 image += 'still';
  }
  image += '.gif';

  var pic = document.getElementById(blurbid+'img');

  pic.src = image;

}

function setCityBox(city) {
	var el = document.getElementById('cityname');
	el.innerHTML = city;
	el.style.backgroundColor = "white";
}

function clrCityBox() {
	var el = document.getElementById('cityname');
	el.innerHTML = 'Place your mouse on the map to see locations';
	el.style.backgroundColor = "transparent";
}