var dragObject  = null;
var mouseOffset = null;
var resizeObject = null;
var resizeOrientation = null;
var eImageId = null;
var imagesOnPicture = new Array();

function makeClickable(object){
	object.onmousedown = function(){
		dragObject = this;
	}
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	
	if (document.documentElement)
		return {
			x:ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
			y:ev.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop
		};
	else if (document.body)
		return {
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop  - document.body.clientTop
		};
	else
		return {
			x:ev.clientX,
			y:ev.clientY
		};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;
	
	var docPos    = getOffsetPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getOffsetPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		if(e.style.marginLeft) left -= parseInt(e.style.marginLeft);
		top  += e.offsetTop;
		if(e.style.marginTop) top -= parseInt(e.style.marginTop);
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	if(dragObject){//dragObject.innerHTML = '' + dragObject.style.top;
		dragObject.style.position = 'absolute';
		dragObject.style.top      = (mousePos.y - mouseOffset.y) + 'px';
		dragObject.style.left     = (mousePos.x - mouseOffset.x) + 'px';

		return false;
	}
	
	if(resizeObject){
		if(!resizeOrientation)
			return false;
		if(resizeOrientation.indexOf('d')>-1){
			resizeObject.parentNode.style.height = (mousePos.y - mouseOffset.y - parseInt(resizeObject.parentNode.style.top)) + 'px';
		}
		if(resizeOrientation.indexOf('r')>-1){
			resizeObject.parentNode.style.width = (mousePos.x - mouseOffset.x - parseInt(resizeObject.parentNode.style.left)) + 'px';
		}
		return false;
	}
}
function mouseUp(ev){
	if(dragObject){
		dragObject.onmouseup(ev);
		dragObject.className = '';//alert(parseInt(dragObject.style.zIndex)+1000);
		dragObject = null;
	}
	//alert(resizeObject);
	resizeObject = null;
	resizeOrientation = null;
}

function draggableOnMouseDown(ev, item){
		if(resizeObject)
			return false;
		dragObject  = item;
		item.className = 'draggableImage';
		mouseOffset = getMouseOffset(item, ev);
		if(!parseInt(item.style.zIndex))
			item.style.zIndex = 0;
		//alert(parseInt(this.style.zIndex)+1000);
		item.style.zIndex = parseInt(item.style.zIndex) + 1000;
		return false;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		if(resizeObject)
			return false;
		dragObject  = this;
		this.className = 'draggableImage';
		mouseOffset = getMouseOffset(this, ev);
		var eImagepos = getPosition(document.getElementById('eImage'));
		mouseOffset.x += eImagepos.x;
		mouseOffset.y += eImagepos.y;
		if(!parseInt(this.style.zIndex))
			this.style.zIndex = 0;
		//alert(parseInt(this.style.zIndex)+1000);
		this.style.zIndex = parseInt(this.style.zIndex) + 1000;
		return false;
	}
}

function isAboveParent(ev, parent){
	if(!parent) return;
	if(!ev) return;
	var mcoord = mouseCoords(ev);
	var ppos = getPosition(parent);
	var pwidth = parseInt(parent.style.width);
	var pheight = parseInt(parent.style.height);
//	alert('' + mcoord.x + ' ' + ppos.x + ' ' + mcoord.y + ' ' + ppos.y)
	if(mcoord.x >= ppos.x && mcoord.y >= ppos.y)
		if(mcoord.x <= ppos.x + pwidth && mcoord.y <= ppos.y + pheight)
			return true;
	return false;
}

function isAboveDiv(ev, id){
	if(!id) return;
	if(!ev) return;
//	alert(id);
	var div = document.getElementById(id);
	var mcoord = mouseCoords(ev);
	var dpos = getPosition(div);
	var dwidth = parseInt(div.style.width);
	var dheight = parseInt(div.style.height);
	if(!dwidth)
		try{dwidth = parseInt(div.parentNode.style.width);}catch(e){}
	if(!dheight)
		try{dheight = parseInt(div.parentNode.style.height);}catch(e){}
//	alert(mcoord.x + '>=' + dpos.x + ' && ' + mcoord.y + '>=' + dpos.y)
//	alert(mcoord.x +'<='+ dpos.x +'+'+ dwidth +'&&'+ mcoord.y +'<='+ dpos.y +'+'+ dheight);
	if(mcoord.x >= dpos.x && mcoord.y >= dpos.y)
		if(mcoord.x <= dpos.x + dwidth && mcoord.y <= dpos.y + dheight)
			return true;
	return false;
}

function registerImageOnPicture(item){
	for(i in imagesOnPicture){
		if(imagesOnPicture[i] == item){
			unregisterImageOnPicture(item);
			break;
		}
	}
	imagesOnPicture[imagesOnPicture.length] = item;
	item.style.zIndex=100+imagesOnPicture.length;
}

function unregisterImageOnPicture(item){
	for(i in imagesOnPicture)
		if(imagesOnPicture[i] == item){
			imagesOnPicture.splice(i, 1);
			break;
		}
	
}

function makeInBox(item){
	if(!item) return;
	item.onmouseup = function(ev){
		if(!dragObject)
			return;
		ev = ev || window.event;
		var parent = item.parentNode.parentNode;
		item.style.zIndex = parseInt(dragObject.style.zIndex) - 1000;
		if(!isAboveDiv(ev, 'eImageIMG')){
			unregisterImageOnPicture(item);
			document.getElementById('eImage').removeChild(this);
		}else{
			for(i in item.childNodes){
				child = item.childNodes[i];
				if(child.title == 'Resizer')
					child.style.display = 'block';
			}
			registerImageOnPicture(item);document.getElementById('imageList').style.heigth = '0px';
		}
		for(i in imagesOnPicture){
			imagesOnPicture[i].style.zIndex = ''+(100+parseInt(i));
		}
	}
}

function makeResizer(item, orientation){
	if(!item || !orientation)
		return;
	if(resizeObject)
		return;
	
	item.onmousedown = function(ev){
		resizeObject = this;
		resizeOrientation = orientation;
		dragObject = null;
		mouseOffset = getMouseOffset(this, ev);
		var eImagepos = getPosition(document.getElementById('eImage'));
		mouseOffset.x += eImagepos.x;
		mouseOffset.y += eImagepos.y;
		mouseOffset.x = mouseOffset.x - parseInt(resizeObject.style.width);
		return false;
	}
}

function makeCopyable(item){
	if(!item)
		return;
	item.onmousedown = function(ev){
		/*
		for(i in imagesOnPicture){
			if(this.id==imagesOnPicture[i].id)
				return;
		}
		*/
		var eImage = document.getElementById('eImage');
		var clone = this.cloneNode(true);
		clone.onmouseover=function(){};
		clone.onmousedown=function(){};
		makeDraggable(clone);
		makeInBox(clone);
		var eImagepos = getPosition(eImage);
		var thispos = getPosition(this);
//		alert(thispos.x+' '+eImagepos.x);
		clone.style.left = (thispos.x - eImagepos.x) + 'px';
		clone.style.top = (thispos.y - eImagepos.y) + 'px';
		clone.style.width = this.style.width;
		clone.style.height = this.style.height;
		clone.style.position = 'absolute';
		eImage.appendChild(clone);
		if(resizeObject)
			return false;
		dragObject  = clone;
		clone.className = 'draggableImage';
		mouseOffset = getMouseOffset(clone, ev);
		mouseOffset.x += eImagepos.x;
		mouseOffset.y += eImagepos.y;
		
		if(!parseInt(clone.style.zIndex))
			clone.style.zIndex = 0;
		clone.style.zIndex = parseInt(clone.style.zIndex) + 1000;
		for(i in clone.childNodes){
			var child = clone.childNodes[i];
			if(child.title == 'Resizer'){
				child.style.display = 'block';
			}
		}
		return false;

	}
}

function moveList(where){
	var div = document.getElementById('imageList');
	
	if(where == 0){
		div.style.left = (parseInt(div.style.left) + 146) + 'px';
	}else if(where == 1){
		div.style.left = (parseInt(div.style.left) - 146) + 'px';
	}
}

function checkFields(){
	var form = document.step1form;
	var error = '';
	if(form.yname.value == '' || form.yname.value == null)
		error = 'Your name';
	if(form.yemail.value == '' || form.yemail.value == null)
		error = 'Your e-mail';
	if(form.fname.value == '' || form.fname.value == null)
		error = 'Friends name';
	if(form.femail.value == '' || form.femail.value == null)
		error = 'Friends e-mail';
	if(form.message.value == '' || form.message.value == null)
		error = 'Personal message';
	if(error=='')
		return true;
	alert(error + ' is mandatory value');
	return false;
}

function nextStep(where, dontValidate){
	if(!dontValidate && !checkFields())
		return false;
	var url = where + '&step=1&action=generate&ID='+eImageId+'&no='+imagesOnPicture.length;
	var imgpos = getPosition(document.getElementById('eImageIMG'));
	var divpos = getPosition(document.getElementById('eImage'));
	var fixleft = imgpos.x - divpos.x;
	var fixtop = imgpos.y - divpos.y;
	for(i in imagesOnPicture){
		var tmpimg = imagesOnPicture[i];
		url+='&im.'+i+'.l='+(parseInt(tmpimg.style.left) - fixleft);
		url+='&im.'+i+'.t='+(parseInt(tmpimg.style.top) - fixtop);
		url+='&im.'+i+'.w='+parseInt(tmpimg.style.width);
		url+='&im.'+i+'.h='+parseInt(tmpimg.style.height);
		url+='&im.'+i+'.id='+(tmpimg.id.substring(9));
	}
	var form = document.step1form;
	url+='&yname='+form.yname.value;
	url+='&yemail='+form.yemail.value;
	url+='&fname='+form.fname.value;
	url+='&femail='+form.femail.value;
	url+='&message='+form.message.value;
//	alert(url);
	window.location = url;
}

function scrollListLeft(){
	var item = document.getElementById("imageListScroller");
	var left = parseInt(item.style.left);
	var width = parseInt(item.style.width);
	if(width+left<=100)
		return;
	left -= 100;
	item.style.left = left+"%";
}

function scrollListRight(){
	var item = document.getElementById("imageListScroller");
	var left = parseInt(item.style.left);
	if(left>=0)
		return;
	left += 100;
	item.style.left = left+"%";
}

function init(){
	document.onmousemove = mouseMove;
	document.onmouseup   = mouseUp;
}