var Class = {
	create: function(){
		return function(){
			this.initialize.apply(this, arguments);
		}
	}
}

var ProdDetail = Class.create();
ProdDetail.prototype = {
	div: null,
	curDiv: null,
	id: null,
	
	initialize: function () {
		this.div = document.createElement('div');
		this.div.style.width = '250px';
		this.div.style.height = '250px';
		this.div.style.position = 'absolute';
		this.div.zIndex = '10';
	},
	
	onMouseOver: function (id){
		if (this.id == id) return;
		if (this.curDiv != null) this.onMouseOut(null);
		this.id = id;
		this.setPos();
		this.div.innerHTML = '<img src="/img/' + this.id + 'b.gif" />';
		this.curDiv = document.body.appendChild(this.div);
	},
	
	onMouseOut: function () {
		document.body.removeChild(this.div);
		this.curDiv = null;
		this.id = null;
	},
	
	setPos: function (){
		var obj = document.getElementById(this.id);
		this.div.style.left = (this.absPos(obj).x - obj.clientWidth*4.5) + 'px';
		var _top = (this.absPos(obj).y);
		if (_top < 300){
			this.div.style.top = _top + 'px';
		}else{
			this.div.style.top = (_top + 150 - 440) + 'px';
		}
	},
	
	absPos: function (obj) {
		var x = y = 0; 
		while(obj) { 
			x += obj.offsetLeft; 
			y += obj.offsetTop; 
			obj = obj.offsetParent; 
		} 
		return {x:x, y:y};
	}
}

var ScrollDiv = Class.create();
ScrollDiv.prototype = {
	obj: 0,
	posXY: 0,
	mouseX: 0,
	mouseY: 0,
	speed: 0,
	dy: 0,
	dx: 0,
	timer: 0,
	direction: 0,
	
	initialize: function (id, direction) {
		var _this = this;
		this.obj = document.getElementById(id);
		this.direction = direction;
		this.posXY = this.getPosXY(this.obj);
		this.timer = setInterval(function(){_this.timerEvent()}, 100);
		
		this.obj.onmouseover = function(e){_this.onMouseOver(e)};
		this.obj.onmouseout = function(e){_this.onMouseOut(e)};
		this.obj.onmousemove = function(e){_this.onMouseMove(e)};
	},
	
	getPosXY: function (obj) {
		var _left = _top = 0;
		if (obj.offsetParent) {
			_left = obj.offsetLeft;
			_top = obj.offsetTop;
			while (obj = obj.offsetParent) {
				_left += obj.offsetLeft;
				_top += obj.offsetTop;
			}
		}
		return {"_left":_left, "_top":_top};
	},

	onMouseOver: function (e) {
		this.speed = 0.5;
		this.timerEvent = this.doScroll;
	},
	
	onMouseOut: function (e) {
		this.timerEvent = this.doSlowDown;
	},
	
	onMouseMove: function (e) {
		e = e || window.event;
		if (this.direction == 'v') this.mouseY = (e.pageY || e.y) - this.posXY._top;
		else this.mouseX = (e.pageX || e.X) - this.posXY._left;
	},
	
	doScroll: function(){
		if (this.direction == 'v'){
			this.dy = this.mouseY - this.obj.offsetHeight/2;
			//alert(this.dy);
			this.obj.scrollTop += this.dy/10*this.speed;
		}else{
			this.dx = this.mouseX - this.obj.offsetWidth/2;
			this.obj.scrollLeft += this.dx/10*this.speed;
		}
		//document.getElementById('output').innerHTML = this.mouseX + ' : ' + this.mouseY + ' : ' + this.dy;		
	},
	
	doSlowDown: function(){
		if (this.direction == 'v'){
			this.obj.scrollTop += this.dy/10*this.speed;
			this.speed -= 0.1;
		}else{
			this.obj.scrollLeft += this.dx/10*this.speed;
			this.speed -= 0.1;
		}
		if (this.speed < 0){
			this.timerEvent = this.doNothing;
		}
	},
	
	timerEvent: function () {},
	doNothing: function() {},
}

var pd = new ProdDetail();

var area_div = document.createElement('div');
area_div.style.width = '250px';
area_div.style.height = '250px';
area_div.style.position = 'absolute';
area_div.zIndex = '20';
	
function on_area_mouse_over(id){
	var knits = document.getElementById("knits");
	area_div.style.left = (absPos(knits).x + knits.offsetWidth) + 'px';
	area_div.style.top = (absPos(knits).y) + 125 + 'px';
	area_div.innerHTML = '<img src="/img/prod/knit_' + id + '.gif" />';
	document.body.appendChild(area_div);
}

function on_area_mouse_out(){
	document.body.removeChild(area_div);
}

function absPos (obj) {
	var x = y = 0; 
	while(obj) { 
		x += obj.offsetLeft; 
		y += obj.offsetTop; 
		obj = obj.offsetParent; 
	} 
	return {x:x, y:y};
}

function onLoad(){
	if (document.getElementById('prod_scroll'))
		var scrollDiv = new ScrollDiv('prod_scroll', 'v');
	if (document.getElementById('prod_items_horiz'))
		var scrollDiv2 = new ScrollDiv('prod_items_horiz', 'h');
}

/*
function onEvent(evt) {
	evt = evt || window.event;
	var target = evt.target || evt.srcElement;
}
*/