// JavaScript Document
var IE = document.all?true:false


function Scroller(width) {
	
	var width = width;
	var image_arr = Array();
	var current_img = -1;
	var container = "";

	this.addImage = function (image) {
		image_arr[image_arr.length] = image;
	}
	
	this.init = function (input_container) {
		container = input_container;
		
		var cont = document.createElement("div");
		
		var left = document.createElement("div");
		left.style.cssFloat = "left";
		left.style.styleFloat = "left";
		
		var left_img = document.createElement("img");
		left_img.src = path+"images/scroll/left.jpg";
		left.appendChild(left_img);
		left.style.cursor = "pointer";
		
		if (IE) {
			left.onclick = this.prevImage;	
		}
		else {
			left.addEventListener("click", this.prevImage, true);	
		}
		
		cont.appendChild(left);
		
		
		var div = document.createElement("div");
		div.style.width = width+"px";
		div.style.backgroundColor = "#e6e9eb";
		div.style.borderBottom = "1px solid #d0d6d8";
		div.style.borderTop = "1px solid #d0d6d8";
		div.style.height = "72px";
		div.style.cssFloat = "left";
		div.style.styleFloat = "left";
		div.style.overflow = "hidden";
		div.style.position = "relative";
		
		cont.appendChild(div);
		
		var img_cont = document.createElement("div");
		img_cont.style.width = "2000px";
		img_cont.style.padding = "6px";
		img_cont.style.paddingLeft = "8px";
		img_cont.id = "scroller_cont_img";
		img_cont.style.position = "absolute";

		for (i = 0; i < image_arr.length; i++) {
			var img = document.createElement("img");
			img.style.cssFloat = "left";
			img.src = path+"resize/resize_car_thumb.php?img="+image_arr[i];
			img.style.height = "54px";
			img.id = "scroll_img_"+i;
			img.style.cursor = "pointer";
			if (i != image_arr.length-1) {
				img.style.marginRight = "2px";	
			}
			if (IE){
				img.onclick = this.setAltImage	
			}
			else {
				img.addEventListener("click", this.setAltImage, true);	
			}
			img_cont.appendChild(img);
			
		}
		
		div.appendChild(img_cont);
		
		var right = document.createElement("div");
		right.style.cssFloat = "right";
		right.style.styleFloat = "right";
		
		var right_img = document.createElement("img");
		right_img.src = path+"images/scroll/right.jpg";
		right.appendChild(right_img);
		right.style.cursor = "pointer";
		if (IE) {
			right.onclick = this.nextImage;	
		}
		else {
			right.addEventListener("click", this.nextImage, true);	
		}
		
		cont.appendChild(right);
		
		
		var clear = document.createElement("div");
		clear.style.clear = "both";
		clear.style.height = "0px";
		cont.appendChild(clear);
		
		document.getElementById(container).appendChild(cont);
		
		this.setImage(0);
		
		
	}
	
	
	this.setImage = function (num) {
		$("#scroll_img_"+num).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		current_img = num;
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*74)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big.php?img="+image_arr[current_img];
	}
	
	this.setAltImage = function (e) {
		var obj = "";
		if (e != null) {
			obj = e.target;	
		}
		else {
			obj = event.srcElement;
		}
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		$("#"+obj.id).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		
		
		var temp = obj.id.split("_");
		current_img = temp[2];
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*70)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big.php?img="+image_arr[current_img];
	}
	
	
	this.nextImage = function () {
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		current_img++;
		if (current_img > image_arr.length-1) {
			current_img = 0;
		}
		$("#scroll_img_"+current_img).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*72)+"px"
									   }, 200);
		

		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big.php?img="+image_arr[current_img];
		
	}
	
	this.prevImage = function () {
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		current_img--;
		if (current_img < 0) {
			current_img = image_arr.length-1;
		}
		
		$("#scroll_img_"+current_img).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*72)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big.php?img="+image_arr[current_img];
		
	}

}



function Scroller2(width) {
	
	var width = width;
	var image_arr = Array();
	var current_img = -1;
	var container = "";

	this.addImage = function (image) {
		image_arr[image_arr.length] = image;
	}
	
	this.init = function (input_container) {
		container = input_container;
		
		var cont = document.createElement("div");
		
		var left = document.createElement("div");
		left.style.cssFloat = "left";
		left.style.styleFloat = "left";
		
		var left_img = document.createElement("img");
		left_img.src = path+"images/scroll/left.jpg";
		left.appendChild(left_img);
		left.style.cursor = "pointer";
		
		if (IE) {
			left.onclick = this.prevImage;	
		}
		else {
			left.addEventListener("click", this.prevImage, true);	
		}
		
		cont.appendChild(left);
		
		
		var div = document.createElement("div");
		div.style.width = width+"px";
		div.style.backgroundColor = "#e6e9eb";
		div.style.borderBottom = "1px solid #d0d6d8";
		div.style.borderTop = "1px solid #d0d6d8";
		div.style.height = "72px";
		div.style.cssFloat = "left";
		div.style.styleFloat = "left";
		div.style.overflow = "hidden";
		div.style.position = "relative";
		
		cont.appendChild(div);
		
		var img_cont = document.createElement("div");
		img_cont.style.width = "2000px";
		img_cont.style.padding = "6px";
		img_cont.style.paddingLeft = "8px";
		img_cont.id = "scroller_cont_img";
		img_cont.style.position = "absolute";

		for (i = 0; i < image_arr.length; i++) {
			var img = document.createElement("img");
			img.style.cssFloat = "left";
			img.src = path+"resize/resize_car_thumb.php?img="+image_arr[i];
			img.style.height = "54px";
			img.id = "scroll_img_"+i;
			img.style.cursor = "pointer";
			if (i != image_arr.length-1) {
				img.style.marginRight = "2px";	
			}
			if (IE){
				img.onclick = this.setAltImage	
			}
			else {
				img.addEventListener("click", this.setAltImage, true);	
			}
			img_cont.appendChild(img);
			
		}
		
		div.appendChild(img_cont);
		
		var right = document.createElement("div");
		right.style.cssFloat = "right";
		right.style.styleFloat = "right";
		
		var right_img = document.createElement("img");
		right_img.src = path+"images/scroll/right.jpg";
		right.appendChild(right_img);
		right.style.cursor = "pointer";
		if (IE) {
			right.onclick = this.nextImage;	
		}
		else {
			right.addEventListener("click", this.nextImage, true);	
		}
		
		cont.appendChild(right);
		
		
		var clear = document.createElement("div");
		clear.style.clear = "both";
		clear.style.height = "0px";
		cont.appendChild(clear);
		
		document.getElementById(container).appendChild(cont);
		
		this.setImage(0);
		
		
	}
	
	
	this.setImage = function (num) {
		$("#scroll_img_"+num).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		current_img = num;
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*74)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big2.php?img="+image_arr[current_img];
	}
	
	this.setAltImage = function (e) {
		var obj = "";
		if (e != null) {
			obj = e.target;	
		}
		else {
			obj = event.srcElement;
		}
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		$("#"+obj.id).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		
		
		var temp = obj.id.split("_");
		current_img = temp[2];
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*70)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big2.php?img="+image_arr[current_img];
	}
	
	
	this.nextImage = function () {
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		current_img++;
		if (current_img > image_arr.length-1) {
			current_img = 0;
		}
		$("#scroll_img_"+current_img).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*72)+"px"
									   }, 200);
		

		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big2.php?img="+image_arr[current_img];
		
	}
	
	this.prevImage = function () {
		if (current_img >= 0) {
			$("#scroll_img_"+current_img).animate({
									  marginTop: "0px",
									  height: 56+"px"
									  }, 100);		
		}
		current_img--;
		if (current_img < 0) {
			current_img = image_arr.length-1;
		}
		
		$("#scroll_img_"+current_img).animate({
									  marginTop:-4+"px",
									  height:68+"px"
									  }, 200);
		
		$("#scroller_cont_img").animate({
									   left: -1*(current_img*72)+"px"
									   }, 200);
		
		document.getElementById(container+"_viewport").src = path+"resize/resize_car_big2.php?img="+image_arr[current_img];
		
	}

}


function openImage(obj) {
	var str = obj.src;
	
	str = str.replace("http://www.imperialselect.co.za/resize/resize_car_big.php?img=../", "");
	str = "http://www.imperialselect.co.za/"+str;
	
	window.open(str);
}