var scroll_target = "scroll";
var scroll_wrapper = "scroll_wrapper";
var left_src = "http://www.gcngi.com/assets/images/pretaporter/left.gif";
var right_src = "http://www.gcngi.com/assets/images/pretaporter/right.gif";
var controller_left = -20;
var controller_top = 0;
var controller_styles = {
	position: "absolute",
	width: "21.75em"
}
var left_styles = {
	cursor: "pointer"
}
var right_styles = {
	paddingLeft: "18.75em",
	cursor: "pointer"
}

function getStyle(x,CSSstyleProp,IEstyleProp) {
	if (!IEstyleProp) IEstyleProp = CSSstyleProp;
	if (x.currentStyle)
		var y = x.currentStyle[IEstyleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(CSSstyleProp);
	if (y == undefined) return '';
	return y;
}

function em2px (HTMLobj,emval) {
	var fontSize = parseInt(getStyle(wrapper,"fontSize"));
	return parseInt(fontSize * emval);
}

addEvent(window,'load', function() {

		var content = document.getElementById(scroll_target);
		var wrapper = document.getElementById(scroll_wrapper);
		var computedWidth = getStyle(wrapper,"width");

		if (computedWidth.substring( computedWidth.length - 2, computedWidth.length ) == "em") {
			var maxWidth = em2px(wrapper,parseFloat(computedWidth));
		} else {
			var maxWidth = parseInt(computedWidth);
		}

		var right = content.offsetWidth + content.offsetLeft;

		if (content.offsetWidth > maxWidth) {

			content.move = {

				HTMLobj: null,
				originalWidth: null,
				originalLeft: null,
				maxWidth: null,
				scrolled: 0,
				interval: null,

				init: function(target,maxWidth) {

					this.HTMLobj = target;
					this.originalWidth = maxWidth;
					this.maxWidth = target.offsetWidth - this.originalWidth;
					this.originalLeft = parseInt(getStyle(target,'left')) ? parseInt(getStyle(target,'left')) : 0;
					target.style.overflow = 'hidden';
					target.style.position = "absolute";
					this.to(0);

				},

				to: function(position) {

					if (position  > this.maxWidth) position = this.maxWidth;
					else if (position < 0) position = 0;

//					this.HTMLobj.style.width = (this.originalWidth + position) + "px";
					this.HTMLobj.style.left = (this.originalLeft - position) + "px";
//					                    alert('rect(0px, ' + (position + this.originalWidth) + 'px, 101px, ' + position + 'px)');
					this.HTMLobj.style.clip = 'rect(0px, ' + (position + this.originalWidth) + 'px, 101px, ' + position + 'px)';
					this.scrolled = position;

				},

				by: function(speed) {
					this.to(this.scrolled + speed);
				},

				start: function(speed) {

					if (this.interval != null) this.stop();
					this.interval = setInterval("document.getElementById('" + this.HTMLobj.id + "').move.by(" + speed + ");",10);

				},

				stop: function() {

					clearInterval(this.interval);
					this.interval = null;

				}

			}

			var div = document.createElement('div');
			div.id = 'private_scroller';
			div.style.left = wrapper.offsetLeft + controller_left + 'px';
			div.style.top = wrapper.offsetTop + controller_top + 'px';
			for (s in controller_styles) {
				div.style[s] = controller_styles[s];
			}

			var left = document.createElement('img');
			left.src = left_src;
			left.id = left.value = left.name = 'up';
			left.onmouseover = function() {document.getElementById(scroll_target).move.start(-3);};
			for (s in left_styles) {
				left.style[s] = left_styles[s];
			}
			div.appendChild(left);

			var right = document.createElement('img');
			right.src = right_src;
			right.id = right.value = right.name = 'down';
			right.onmouseover = function() {document.getElementById(scroll_target).move.start(3);};
			for (s in right_styles) {
				right.style[s] = right_styles[s];
			}
			div.appendChild(right);

			var stop = function() {document.getElementById(scroll_target).move.stop();};
			addEvent(right,'mouseup',stop);
			addEvent(left,'mouseup',stop);
			addEvent(right,'mouseout',stop);
			addEvent(left,'mouseout',stop);
			addEvent(right,'onkeyup',stop);
			addEvent(left,'onkeyup',stop);

			left.onkeydown = right.onkeydown = function(e) {

				if (!e) e = window.event;
				if (e.keyCode == 13 || e.keyCode == 32) this.onmousedown();

			}

			wrapper.style.overflow = "hidden";
//			wrapper.appendChild(div);
wrapper.parentNode.insertBefore(div,wrapper);
//wrapper.insertBefore(div,wrapper.firstNode);
			content.move.init(content,maxWidth);

		} else {
			content.style.width = maxWidth + 'px';
		}

	}
);

addEvent(window,'load', function() {

		/*var links = document.getElementById("scroll").getElementsByTagName("A");

		for (var a in links) {

			links[a].savedhref = links[a].href;
			links[a].href = "#";

			links[a].onclick = function() {

					document.getElementById("display_anchor").href = this.savedhref;

				}

		}*/

		rolloverdiv = document.createElement("div");
		rolloverdiv.id = "rolloverdiv";
		rolloverdiv.style.color = "#fff";
		rolloverdiv.style.border = "0.09em solid #fff";
		rolloverdiv.style.padding = "0.73em 0.55em";
		rolloverdiv.style.fontSize = "0.69em";
		rolloverdiv.style.lineHeight = "1.45em";
		rolloverdiv.style.width = "9.82em";
		rolloverdiv.style.display = "none";
		rolloverdiv.style.position = "absolute";
		rolloverdiv.style.backgroundColor = "#000";
		rolloverdiv.style.opacity = 0.6;
		rolloverdiv.style.mozOpacity = 0.6;
		if(rolloverdiv.style) {
			rolloverdiv.style['filter'] = "alpha(opacity=60)";
		}
		rolloverdiv.style.left = 0;
		rolloverdiv.style.top = 0;
		rolloverdiv.innerHTML = "&#187; Click to see details";
		document.body.appendChild(rolloverdiv);
		document.getElementById("display_anchor").title = null;

		var mousein = function(e) {
				var xy = getMouseXY(e);
				rolloverdiv.style.display = "block";
				rolloverdiv.style.left = (xy[0] + 10) + "px";
				rolloverdiv.style.top = (xy[1] + 10) + "px";
			};
		var mouseout = function(e) {
				rolloverdiv.style.display = "none";
			};

		addEvent(document.getElementById("display_anchor"),'mousemove', mousein
		);

		addEvent(document.getElementById("display_anchor"),'mouseout', mouseout
		);

		var scroll = document.getElementById("scroll");
		var links = scroll.getElementsByTagName("A");
		for (anchor in links) {
			addEvent(links[anchor],'mousemove',mousein);
			addEvent(links[anchor],'mouseout',mouseout);
		}

		fader = setFader(document.getElementById("display_image"));
		fader.speed = 80;
		imgswapper.initialize(fader);
	}
);

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{
	if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
	if (e)
	{
		if (e.pageX || e.pageY)
		{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
			var mousex = e.pageX;
			var mousey = e.pageY;
			var algor = '[e.pageX]';
			if (e.clientX || e.clientY) algor += ' [e.clientX] '
		}
		else if (e.clientX || e.clientY)
		{ // works on IE6,FF,Moz,Opera7
			var mousex = e.clientX + document.body.scrollLeft;
			var mousey = e.clientY + document.body.scrollTop;
			var algor = '[e.clientX]';
			if (e.pageX || e.pageY) algor += ' [e.pageX] '
		}
	}
	return new Array(mousex,mousey);
}