var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
var divName = 'followdiv';
var offX = 10; // X offset from mouse position
var offY = 10; // Y offset from mouse position
function mouseX(evt){if (!evt) evt = window.event; if (evt.pageX) return evt.pageX;else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);else return 0;}
function mouseY(evt){if (!evt) evt = window.event;if (evt.pageY) return evt.pageY; else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function gettrailobj(){
    if (document.getElementById) 
        return document.getElementById("LargeImageHolder").style
    else 
        if (document.all) 
            return document.all.trailimagid.style
}

function gettrailobjnostyle(){
    if (document.getElementById) 
        return document.getElementById("LargeImageHolder")
    else 
        if (document.all) 
            return document.all.trailimagid
}

function showtrail(imgSrc, imgWidth, imgHeight){
	if (!imgWidth) imgWidth = document.getElementById('followdiv').offsetWidth;
	if (imgWidth > 300) imgWidth = 300;
    if (!imgHeight) imgHeight = imgWidth;
    newHTML = '<div id="followdiv" style="position:absolute; border:1px solid #CCCCCC; background-color:#FFFFFF;  visibility: hidden;z-index:999;">';
    newHTML = newHTML + '<div id="waitdiv" align="center" style="padding: 0 0 0 0;height:'+imgHeight+';width:'+imgWidth+';">';
    newHTML = newHTML + '<img src="' + imgSrc + '" border="0" style="" width='+imgWidth+'/></div>';
    newHTML = newHTML + '</div>';
    gettrailobjnostyle().innerHTML = newHTML;
	showtraildelay=setTimeout(function(){gettrailobj().display = "inline";}, 250);
	imgWidthParse = imgWidth;
	imgHeightParse = imgHeight;
}

function hidetrail(){
    gettrailobj().innerHTML = " ";
    gettrailobj().display = "none"
	clearTimeout(showtraildelay);
}

function follow(evt){
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    if (document.getElementById) {
        var obj = document.getElementById(divName).style;
        obj.visibility = 'visible';
	if(typeof(imgWidthParse)!='undefined'&&(mouseX(evt)+offX+imgWidthParse)>winWd)
		obj.left = mouseX(evt)-(imgWidthParse+offX)+'px';
		else obj.left = mouseX(evt)+offX+'px';
	if (typeof(imgHeightParse)!='undefined'&&(mouseY(evt)+offY+imgHeightParse)>winHt) 
		obj.top = winHt-(imgHeightParse+offY)+'px';
	else obj.top = mouseY(evt)+offY+'px';
    }
}

document.onmousemove = follow;
//Change image
function change(ImageSource,width) {
    window.document.mediumImageJS.src = ImageSource;
	window.document.mediumImageJS.width = width;
}	


// Hide all the image thumbnail Div's (available ids are required [idList])
function hideall(idList) {
	
	var idArray = idList.split(",");
	for(var i=0; i<idArray.length; i++){
		//Set display - none by accessing idArray[i];
		var idName = 'colourset_'+idArray[i];
		var allElements = document.getElementById(idName);
		allElements.style.display = "none";
	}
}

// Show / Hide Colours
function toggleColours(idList,el) {
	
	//Pass the available ids to the function
	hideall(idList);
	
	var myelement = document.getElementById(el);
	var myimg = document.getElementById("btn-" + el);
	
	if( !myelement.style.display || myelement.style.display == "none" ) {
		myelement.style.display = "inline";
	} else {
		myelement.style.display = "none";
	}
}

function swap(colourIndex,imgIndex) {
	// if the dspID (imgIndex) isnt passed in then use the value set in the form	
	if (!imgIndex) imgIndex = document.holdJS.medDspID.value;
	
	// change the medium image
	document['mediumImageJS'].src = aryImages[colourIndex][imgIndex];
}