var spInterval = null;
var cats = new Array();
var spDisplayAds = new Array();
var spURL = "";
var spInfoDiv = null;
var spTextDiv = null;
var spImageDiv = null;
var spBannerWidth = 0;
var loadedImages = 0;
var spVisItems = 0;
var spInterval2 = null;
var spOr = 0;
var spFade = 100;

function spWriteImageBanner(bWidth,visItems,itemCount,orientation,color, affiliate, affid, append, url){
	spURL = url;
	spBannerWidth = bWidth==0?(visItems * 60)-1:bWidth;
	spBannerWidth--;
	spOr = orientation;
	if(cats.length>0){
		counter=0;
		for(var a=0;a<cats.length;a++){
			if(cats[a][3]!=null){
				spDisplayAds[counter] = a;
				counter++;
			}
		}
		spGetRandom(itemCount);
		spVisItems = visItems;
		if(orientation==0){
			document.write("<div style='text-align:left;position:relative;width:" + spBannerWidth + "px;height:59px;overflow:hidden;border:1px solid #" + color + ";'><div id='spLogoHolder' style='text-align:center;position:absolute;top:0px;left:0px;width:" + spBannerWidth + "px;overflow:hidden;height:59px;background-color:#FFCC00;'><img id='spLogoImage' src='" + spURL + "/spLogo.gif' height='59'></div><div id='scroller' style='display:none;text-align:left;position:absolute;top:0px;left:0px;width:" + (spBannerWidth-60) + "px;overflow:hidden;height:59px;'>");
			loadedImages = spDisplayAds.length;
			for(var a=0;a<spDisplayAds.length;a++){
				spPrepareItem(spDisplayAds[a], a, affiliate, affid, append, color);
			}
			document.write("<\/div><div onmousedown='spScroll(false);' style='text-align:left;position:absolute;top:21px;left:0px;'><img id='spPrevImage' src='" + spURL + "/bannerimg_prev.png'><\/div><div onmousedown='spScroll(true);' style='text-align:left;position:absolute;top:21px;left:" + (spBannerWidth-79) + "px;'><img id='spNextImage' src='" + spURL + "/bannerimg_next.png'><\/div><div style='text-align:left;position:absolute;top:0px;left:" + (spBannerWidth-60) + "px;background-color:#" + color + "'><a href='http://www.speurders.nl' target='_blank'><img id='spBannerLogo' src='" + spURL + "/logo6060.png' border=0></a><\/div><\/div>");
		} else {
			
			document.write("<div style='text-align:left;position:relative;height:" + spBannerWidth + "px;width:59px;overflow:hidden;border:1px solid #" + color + ";'><div id='scroller' style='display:none;text-align:left;position:absolute;top:0px;left:0px;height:" + (spBannerWidth-60) + "px;overflow:hidden;width:59px;'>");
			loadedImages = spDisplayAds.length;
			for(var a=0;a<spDisplayAds.length;a++){
				spPrepareItem(spDisplayAds[a], a, affiliate, affid, append, color);
			}
			document.write("<\/div><div onmousedown='spScroll(false);' style='text-align:left;position:absolute;left:21px;top:0px;'><img id='spPrevImage' src='" + spURL + "/bannerimg_up.png'><\/div><div onmousedown='spScroll(true);' style='text-align:left;position:absolute;left:21px;top:" + (spBannerWidth-78) + "px;'><img id='spNextImage' src='" + spURL + "/bannerimg_down.png'><\/div><div style='text-align:left;position:absolute;top:" + (spBannerWidth-60) + "px;left:0px;background-color:#" + color + "'><a href='http://www.speurders.nl' target='_blank'><img id='spBannerLogo' src='" + spURL + "/logo6060.png' border=0></a><\/div><div id='spLogoHolder' style='text-align:center;position:absolute;top:0px;left:0px;width:59px;overflow:hidden;height:" + spBannerWidth + "px;background-color:#" + color + ";'>&nbsp;</div><\/div>");
			
			spMoveIn(visItems);
		}
		
		if (document.getElementById && document.all){
			var FILTER = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%1',sizingMethod='scale')";
			var logo = document.getElementById("spBannerLogo");
			var image = new Image();
			image.onload = function() {
				logo.width = image.width;
				logo.height = image.height;
				image = null;
			}; 
			image.src = logo.src;
			logo.runtimeStyle.filter = FILTER.replace(/%1/, logo.src);
			logo.src = spURL + "/blank.gif";
			
			var nextImage = document.getElementById("spNextImage");
			var image2 = new Image();
			image2.onload = function() {
				nextImage.width = image2.width;
				nextImage.height = image2.height;
				image2 = null;
			}; 
			image2.src = nextImage.src;
			nextImage.runtimeStyle.filter = FILTER.replace(/%1/, nextImage.src);
			nextImage.src = spURL + "/blank.gif";
			
			var prevImage = document.getElementById("spPrevImage");
			var image3 = new Image();
			image3.onload = function() {
				prevImage.width = image3.width;
				prevImage.height = image3.height;
				image3 = null;
			}; 
			image3.src = prevImage.src;
			prevImage.runtimeStyle.filter = FILTER.replace(/%1/, prevImage.src);
			prevImage.src = spURL + "/blank.gif";
		}
	}
}

function spMoveIn(visItems){
	var count = Math.round((spDisplayAds.length-visItems)/2);
	var scrollDiv = document.getElementById("scroller");
	if(spOr==0){
		scrollDiv.scrollLeft = count*60;
	} else {
		scrollDiv.scrollTop = count*60;
	}
	//alert(scrollDiv.offsetWidth);
}
function stopScroll(){
	clearInterval(spInterval);
}

function spGetWidth(){
	if(window.innerWidth){
		cWidth = window.innerWidth - 20;
	} else {
		cWidth  = (document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
	}
	/* firefox hack */
	cWidth = (document.body.scrollWidth < cWidth) ? document.body.scrollWidth : cWidth;
	return cWidth;
}

function spScroll(amount){
	stopScroll();
	var scrollDiv = document.getElementById("scroller");
	var scrollAmount = (Math.ceil(spBannerWidth/60)-2)*60;
	scrollAmount = scrollAmount<60?60:scrollAmount;
	scrollAmount = amount?scrollAmount:-scrollAmount;
	//scrollDiv.scrollLeft +=scrollAmount;
	if(spOr==0){
		var sAmount = scrollAmount + scrollDiv.scrollLeft;
	} else {
		var sAmount = scrollAmount + scrollDiv.scrollTop;
	}
	if(sAmount<0) sAmount=0;
	spInterval = setInterval(function() { spDoScroll(scrollDiv,sAmount,amount);},20);
}

function spDoScroll(spScrollDiv,amount,b){
	if(spOr==0){
		spScrollDiv.scrollLeft += b?10:-10;
		if(!b){
			if(spScrollDiv.scrollLeft <= amount){
				stopScroll();
				spScrollDiv.scrollLeft = amount;
			}
		} else {
			if(spScrollDiv.scrollLeft >= amount || spScrollDiv.scrollLeft == (spScrollDiv.scrollWidth-spBannerWidth)){
				stopScroll();
				spScrollDiv.scrollLeft = amount;
			}
		}
	} else {
		spScrollDiv.scrollTop += b?10:-10;
		if(!b){
			if(spScrollDiv.scrollTop <= amount){
				stopScroll();
				spScrollDiv.scrollTop = amount;
			}
		} else {
			if(spScrollDiv.scrollTop >= amount || spScrollDiv.scrollTop == (spScrollDiv.scrollHeight-spBannerWidth)){
				stopScroll();
				spScrollDiv.scrollTop = amount;
			}
		}
	}
}

function spPrepareItem(itemId, itemCount, affiliate, affid, append,color){
    if (append.indexOf ('?')!=0) {
        append='?'+append.substring(1);
    }
	var itemLink = cats[itemId][5] + append;
	var itemTitle = escape(cats[itemId][1]);
	var itemText ="";//(rowCount>1)? cats[itemId][2]:"";
	var itemImage = cats[itemId][3];
	var itemPrice = spMakePrice(cats[itemId][4]);
	spWriteItem(itemTitle, itemText, itemLink, itemCount, itemImage,color, itemPrice);
}

function spMakePrice(priceStr){
	if(!isNaN(priceStr.substring(0,1))){
		return "&euro; " + priceStr;
	}
	return priceStr;
}
function spGetRandom(itemCount){
	var loopCount = spDisplayAds.length - itemCount;
	
	for(b=0;b<loopCount;b++){
		var r = Math.round(Math.random() * (spDisplayAds.length-1));	
		var tempAr = new Array();
		var found = false;
		for(var a=0;a<spDisplayAds.length;a++){
			if(r==a){
				found = true;
			}
			else{
				if(found){
					tempAr[a-1] = spDisplayAds[a];
				}
				else{
					tempAr[a] = spDisplayAds[a];
				}
			}
		}
		spDisplayAds = tempAr;
	}
}

function spWriteItem(itemTitle, itemText, itemLink, itemId, itemImage,color, itemPrice){
	cls = "";
	if(itemId > 0 && itemId % 2 == 1){
		cls=" class='bgColor'";
	} else {
        cls=" class='white'";
    }
	if(itemText == ""){
		text = "<b>" + itemTitle + "</b>"
	}
	else{
		text = "<b>" + itemTitle + "</b><br>" + itemText;
	}
	if(spOr==0){
		document.write("<div style='text-align:left;position:absolute;border-right:1px solid #" + color +";width:59px;height:59px;overflow:hidden;left:" + (itemId * 60) +"px;'><a onmouseout=\"spHideInfo();\" onmouseover=\"spShowInfo(unescape('" + itemTitle + "'),'" + itemPrice + "',this);\" href=\"" + itemLink + "\" target=\"_blank\"><img style='position:absolute;top:-7px;left:-7px;' src='" + itemImage + "' border=0 width=75 height=75 onload='spImageLoaded()'><\/a><div style='position:absolute;top:0px;left:0px;width:59px;height:10px;background-color:#000000;text-align:center;filter:alpha(opacity=60);MozOpacity:0.6;KhtmlOpacity:0.6;opacity:0.6;display:block;'><a style='color:#FFFFFF;font-size:9px;font-family:arial;text-decoration:none;' href=\"" + itemLink + "\" target=\"_blank\">" + itemPrice + "</a></div><\/div>");
	} else {
		document.write("<div style='text-align:left;position:absolute;border-bottom:1px solid #" + color +";width:59px;height:59px;overflow:hidden;top:" + (itemId * 60) +"px;'><a onmouseout=\"spHideInfo();\" onmouseover=\"spShowInfo(unescape('" + itemTitle + "'),'" + itemPrice + "',this);\" href=\"" + itemLink + "\" target=\"_blank\"><img style='position:absolute;top:-7px;left:-7px;' src='" + itemImage + "' border=0 width=75 height=75 onload='spImageLoaded()'><\/a><div style='position:absolute;top:0px;left:0px;width:59px;height:10px;background-color:#000000;text-align:center;filter:alpha(opacity=60);MozOpacity:0.6;KhtmlOpacity:0.6;opacity:0.6;display:block;'><a style='color:#FFFFFF;font-size:9px;font-family:arial;text-decoration:none;' href=\"" + itemLink + "\" target=\"_blank\">" + itemPrice + "</a></div><\/div>");
	}
}

function spImageLoaded(){
	loadedImages--;
	if(loadedImages==0){
		//alert("afbeeldingen geladen");
		if(spOr==0){
			spInterval2 = setInterval(function() { spZoomLogo();},20);
		} else {
			document.getElementById("scroller").style.display="inline";
			spInterval2 = setInterval(function() { spFadeOverlay();},20);
		}
		spMoveIn(spVisItems);
	}
}

function setFade(op, obj) {
	var obj = obj.style;
	if (navigator.userAgent.indexOf("Firefox") != -1) {
		if (op >= 100) { op = 99.999; }
	}
	
	obj.filter = "alpha(opacity=" + op + ")";
	obj.KhtmlOpacity = (op / 100);
	obj.MozOpacity = (op / 100);
	obj.opacity = (op / 100);
}

function spFadeOverlay() {
	var logoHolder = document.getElementById("spLogoHolder");
	spFade -= 5;
	setFade(spFade,logoHolder);
	if(spFade==0){
		clearInterval(spInterval2);	
		logoHolder.style.display = "none";
	}
}

function spZoomLogo(){
	var zoomFactor = 15;
	var logo = document.getElementById("spLogoImage");
	var logoHolder = document.getElementById("spLogoHolder");
	if(logo.width > 500){
		clearInterval(spInterval2);	
		logoHolder.style.display = "none";
		document.getElementById("scroller").style.display="inline";
		//spMoveIn(spVisItems);
	}
	logo.width += zoomFactor;
	logo.height += (45/80)*zoomFactor;
	logoHolder.style.height = logo.height*2;
	logoHolder.style.top = -((logo.height-59)/2) + "px";
	var oLeft = 0;
	if(spBannerWidth < logo.width){
		oLeft = (spBannerWidth-logo.width)/2;
		logoHolder.style.width = logo.width + "px";
	}
	logoHolder.style.left = oLeft;
	setFade(100*(45/logo.height),logo);
}
function spHideInfo(){
	spInfoDiv.style.visibility="hidden";
}
function spShowInfo(itemTitle,itemPrice,obj){
	if(spInfoDiv==null){
		spInfoDiv = document.createElement('div');
		document.body.appendChild(spInfoDiv);
		spInfoDiv.style.visibility="hidden";
		
		spImageDiv = document.createElement('div');
		if(spOr==0)	spImageDiv.innerHTML = "<img src='" + spURL + "/ic_blackarrow.gif'>";
		spInfoDiv.appendChild(spImageDiv);
		spImageDiv.style.position = "absolute";
		spImageDiv.style.left = "20px";
		
		spInfoDiv.style.position = "absolute";
		spInfoDiv.style.top = spGetOffsetTop(obj)+65 + "px";
		spTextDiv = document.createElement('div');
		spInfoDiv.appendChild(spTextDiv);
		
		spTextDiv.style.position = "relative";
		spTextDiv.style.top = "10px";
		spTextDiv.style.backgroundColor = "#000000";
		spTextDiv.style.color ="#FFFFFF";
		spTextDiv.style.padding = "2px 5px 2px 5px";
		spTextDiv.style.fontFamily = "Arial,helvetica";
		spTextDiv.style.fontSize = "11px";
		
	}
	if(spOr==0){
		spInfoDiv.style.left = "0px";
		
		spTextDiv.innerHTML = itemTitle + " (" + itemPrice + ")";
		var oLeft = spGetOffsetLeft(obj);
		
		var relPos = obj.offsetParent.offsetLeft - obj.offsetParent.offsetParent.scrollLeft;
		var tWidth = spTextDiv.offsetWidth;
		
		var nLeft = relPos - (tWidth-60)/2; 
		var bLeft = oLeft - relPos;
		if(nLeft+(tWidth)>spBannerWidth) nLeft = spBannerWidth - tWidth;
		if(nLeft<0) nLeft=0;
		var imgLeft = oLeft - bLeft - nLeft + 20;
		if(imgLeft<0) imgLeft = 10;
		if(imgLeft+nLeft>=spBannerWidth-20) imgLeft = spBannerWidth - 20 - nLeft;
		spImageDiv.style.left = imgLeft + "px";
		spInfoDiv.style.left = (bLeft+nLeft) + "px";
		spInfoDiv.style.visibility="visible";
	} else {
		spInfoDiv.style.left = "0px";
		
		spTextDiv.innerHTML = itemTitle + " (" + itemPrice + ")";
		var oLeft = spGetOffsetLeft(obj);
		
		var relPos = obj.offsetParent.offsetLeft - obj.offsetParent.offsetParent.scrollLeft;
		var tWidth = spTextDiv.offsetWidth;
		
//		if(oLeft + tWidth + 65 > spGetWidth()){
//			ofLeft = oLeft - tWidth - 5;
//		} else {
//			ofLeft = oLeft+65;
//		}
		spTextDiv.style.top = "0px";
		if(oLeft > (spGetWidth()/2)){
			ofLeft = oLeft - tWidth - 5;
			spImageDiv.innerHTML = "<img src='" + spURL + "/img2_l.gif'>";
		} else {
			ofLeft = oLeft+65;
			spImageDiv.innerHTML = "<img src='" + spURL + "/img2_r.gif'>";
			spTextDiv.style.left = "4px";
		}
		var scrollDiv = document.getElementById("scroller");
		var nLeft = relPos - (tWidth-60)/2; 
		var bLeft = oLeft - relPos;
		if(nLeft+(tWidth)>spBannerWidth) nLeft = spBannerWidth - tWidth;
		if(nLeft<0) nLeft=0;
		var imgLeft = oLeft - bLeft - nLeft + 20;
		if(imgLeft<0) imgLeft = 10;
		if(imgLeft+nLeft>=spBannerWidth-20) imgLeft = spBannerWidth - 20 - nLeft;
		spInfoDiv.style.left = ofLeft + "px";
		spInfoDiv.style.visibility="visible";
		spInfoDiv.style.top = spGetOffsetTop(obj)+25 - scrollDiv.scrollTop+ "px";
		if(oLeft > (spGetWidth()/2)){
			spImageDiv.style.left = spTextDiv.offsetWidth + "px";
			spImageDiv.style.top = (spTextDiv.offsetHeight-8)/2 +"px";
		} else {
			spImageDiv.style.left = "0px";
			spImageDiv.style.top = (spTextDiv.offsetHeight-8)/2 +"px";
		}
	}
}

function spGetOffsetLeft(obj)
{
	var offset = 0;
	while(obj){
		//if(obj.offsetParent!=null){
			//var oLeft = obj.offsetLeft<0?0:obj.offsetLeft;
			offset += obj.offsetLeft - obj.scrollLeft;
		//}
		obj = obj.offsetParent;
		
	}
	return offset;
}

function spGetOffsetTop(obj)
{
	var offset = 0;
	while(obj){
		if(obj.offsetParent!=null){
			offset += obj.offsetTop;
		}
		obj = obj.offsetParent;
	}
	return offset;
}