function showSubnavs(el)
		{
		  subnavel = document.getElementById('nav-bar-sub');
		  
		  // set the position of the subnav
		  subnavel.style.left = el.offsetLeft + "px";
		  
		  // set the innerHTML of the subnav
		  subnavel.innerHTML = getSubNavs(el.id);
		  
		  // turn the sub nav on
	  	subnavel.style.visibility = 'visible';
	  	
	  	// change the image to hover
	  	if (el.src.indexOf('hover') == -1)
	  	{
	  	  extpos = el.src.indexOf('.gif');
			  newsrc = el.src.substring(0, extpos) + "hover.gif";
			  
			  // bug fix - ie sometimes chucks out an empty src
			  if (newsrc != 'hover.gif')
	  	  { el.src = newsrc; }
	  	}
		}
		
		function imageUnhover(el)
		{
		  if (el.src.indexOf('hover'))
		  {
   	  	hoverpos = el.src.indexOf('hover');
	  		newsrc = el.src.substring(0, hoverpos) + ".gif";
	  		
	  		// bug fix - ie sometimes chucks out an empty src
	  		if (newsrc != '.gif')
			  { el.src = newsrc; }
			}
		}
		
		function getSubNavs(elid)
		{
		  var subNavsHTML = "";
		  
		  switch (elid)
		  {
			  case "home":
			  	break;
			  case "cigars":
			  	subNavsHTML += '<div class="subnavel"><a href="/cigars/cuban.php">Cuban</a></div>';
			  	subNavsHTML += '<div class="subnavel"><a href="/cigars/honduran.php">Honduran</a></div>';
			  	subNavsHTML += '<div class="subnavel"><a href="/cigars/dominican.php">Dominican</a></div>';
			  	subNavsHTML += '<div class="subnavel"><a href="/cigars/nicaraguan.php">Nicaraguan</a></div>';
			  	break;
			  case "pipes":
			  	break;
			  case "lighters":
			  	
			  	break;
			  case "tobacco":
			  	break;
			  case "cigarettes":
			  	subNavsHTML += '<div class="subnavel"><a href="/cigarettes/standard.php">Standard</a></div>';
			  	subNavsHTML += '<div class="subnavel"><a href="/cigarettes/specialist.php">Specialist</div>';
			  	break;
			  case "accessories":
			  	
			  	break;
			  case "contact":
			  	
			  	break;
			}

			return subNavsHTML;
		}	
			
		function resizeMainAreas()
		{
			clHeight = document.documentElement.clientHeight;
			clWidth = document.documentElement.clientWidth;
			navBarWidthFix = 0

			if (clWidth == 0)
			{
				//ie6 fix
				clHeight = document.body.clientHeight;
				clWidth = document.body.clientWidth;
				navBarWidthFix = 160;
			}

  			document.getElementById('main').style.height = clHeight - 110 + "px"; // the - figure is height of all elements above this
		  	document.getElementById('main-content').style.height = clHeight - 113 + "px";// the - figure is height of all elements above this
			document.getElementById('main-left').style.height = clHeight - 110 + "px"; // the - figure is height of all elements above this
			document.getElementById('banner').style.width = clWidth - 0 + "px"; // the - figure is the padding for the element declared in css file
			document.getElementById('nav-bar').style.width = clWidth - 160 + navBarWidthFix + "px"; // the - figure is the padding for the element declared in css file
		}