function addEvent(elm, evType, fn, useCapture) {
  // cross-browser event handling for IE5+, NS6 and Mozilla 
  // By Scott Andrew 
  if (elm.addEventListener) { 
    elm.addEventListener(evType, fn, useCapture); 
    return true; 
  } else if (elm.attachEvent) { 
    var r = elm.attachEvent('on' + evType, fn); 
    return r; 
  } else {
    elm['on' + evType] = fn;
  }
}

// This code inspects all links (anchors <a... ) on a page looking for the "rel" property.
// When it finds one it checks what it is equal to.
//		rel="help" -> opens a new window with no tool bars.
//		rel="external" opens a full featured new window with all tool bars.

function handleExternal(e) {
	var el = window.event ? window.event.srcElement : e ? e.target : null;
	if (!el)	return;
	window.open(el.href, "newWindow", "toolbar=yes,width=600,height=300,scrollbars=1,menubar=1,resizable=1,resizeable=1,status=1,location=1");
	if (window.event) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (e && e.stopPropagation && e.preventDefault) {
		e.stopPropagation();
		e.preventDefault();
	}
}

function handleHelp(e) {
	var el = window.event ? window.event.srcElement : e ? e.target : null;
	if (!el) return;
	window.open(el.href, "newWindow", "toolbar=no,width=480,height=300,scrollbars");
	if (window.event) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (e && e.stopPropagation && e.preventDefault) {
		e.stopPropagation();
		e.preventDefault();
	}
}

function cancelClick() {
	return false;
}

// *******************************************************************

function mouseover(e) {
	var el = window.event ? window.event.srcElement : e ? e.target : null;
	if (!el) return;
	var menu = document.getElementById('menu');
	menu.style.borderColor = 'white';
	el.style.borderColor = '#A8000B';
}

function mouseout(e) {
	var el = window.event ? window.event.srcElement : e ? e.target : null;
	if (!el) return;
	var menu = document.getElementById('menu');
	menu.style.borderColor = '#A8000B';
	el.style.borderColor = 'white';
}

// ************* display picture on mouseover of text

function getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
//	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	
//	arrayPageSize = new Array(w,h) 
	return w;
}

function getPageScrollTop() {
	var yScrolltop;
	if (self.pageYOffset) {
		yScrolltop = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScrolltop = document.documentElement.scrollTop;
	} else if (document.body) {		// all other Explorers
		yScrolltop = document.body.scrollTop;
	}
//	arrayPageScroll = new Array('',yScrolltop) 
	return yScrolltop;
}

var picElement;
var timeSet;
function pictureOver(e) {
	picElement = window.event ? window.event.srcElement : e ? e.target : null;
	if (!picElement) return;
	picElement.style.cursor = 'progress';
	timeSet = window.setTimeout("showPic()", 600);
}
function showPic() {
	var picid = picElement.getAttribute('id').substring(1);
	var mybody = document.getElementsByTagName("body")[0];
	var newpic = document.createElement("img");

	newpic.src = 'http://www.nothingbutcars.net/carpics/car-' + picid + '.jpg';	
	newpic.id = 'spanpic';
	var oldwidth = newpic.width;
	var oldheight = newpic.height;
	if (getPageSize() < 850) {
		if (oldwidth > 400) {
			var newheight = Math.floor((oldheight * 400) / oldwidth);
			newpic.style.width = '400' + 'px';
			newpic.style.height = newheight + 'px';
		}
	}
	newpic.style.position = 'absolute';
	newpic.style.top = getPageScrollTop() + 20 + 'px';
	newpic.style.left = '20px';
	newpic.style.border = '3px solid #2e6bbc';
	mybody.appendChild(newpic);
	picElement.style.cursor = 'default';
}

function pictureOut() {
	clearTimeout(timeSet);
//	var el = window.event ? window.event.srcElement : e ? e.target : null;
//	if (!el) return;
	var pic = document.getElementById('spanpic');
	if (pic) {
		var parent = pic.parentNode;
		parent.removeChild(pic);		
	}
//	picOn = false;
}

// ************** Adds all event listeners  ***********************
function addListeners() {
	if (!document.getElementsByTagName) return;
			//  Listener for the popup windows 'external' and 'help' identified by the 'rel' attribute.
	var all_links = document.getElementsByTagName('a');
	for (var i = 0; i < all_links.length; i++) {
		var link = all_links[i]; 

			//		if (link.getAttribute('rel')) {         MSIE works on first link but not the rest!!!
		if (link.attributes.rel) {
			if (link.attributes.rel.value == 'external') {
				addEvent(link, 'click', handleExternal, false);
				link.onclick = cancelClick;            //  Needed for Safari
			} else if (link.attributes.rel.value == 'help') {
				addEvent(link, 'click', handleHelp, false);
				link.onclick = cancelClick;            //  Needed for Safari
			}
		}
			//  Listeners for menu links rollover 
		if (link.className && (' ' + link.className + ' ').indexOf(' ro ') != -1) {
			addEvent(link, 'mouseover', mouseover, false);
			addEvent(link, 'mouseout', mouseout, false);
		}
	}

			//  Listeners for picture display on rollover 
	var spanimg = [];                  // Used to preload images
	var picnum = new String();                        // Used to preload images
	var all_spans = document.getElementsByTagName('span');
	for (var i = 0; i < all_spans.length; i++) {
		var span = all_spans[i]; 
		if (span.className && (' ' + span.className + ' ').indexOf(' picture ') != -1) {
			addEvent(span, 'mouseover', pictureOver, false);
			addEvent(span, 'mouseout', pictureOut, false);
						// Preload the images
			picnum = span.getAttribute('id').substring(1);
			spanimg[i] = new Image();
			spanimg[i].src = 'http://www.nothingbutcars.net/carpics/car-' + picnum + '.jpg';
		}
	}
}

addEvent(window, 'load', addListeners, false);