var snap_size = 14;
var gl_z_index = 1;
var gl_x = 0;
var gl_y = 0;
var drag_enbled = 0;
var spaces = Array();
var spaces_obj = Array();
var snap = false;
var free_spaces = 0;
var stickers_pos = new Array();

var DragHandler = {

    // private property.
    _oElem : null,

    // public method. Attach drag handler to an element.
    attach : function(oElem) {
        oElem.onmousedown = DragHandler._dragBegin;
        return oElem;
    },


    // private method. Begin drag process.
    _dragBegin : function(e) {
        var oElem = DragHandler._oElem = this;
		var pos = getPosition(oElem);
        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = pos.x+15+'px'; }
        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = pos.y+'px'; }
        
		// add new free space
		if (isNaN(parseInt(oElem.style.width))) {
			free_spaces++;
			spaces.push(Array(pos.x+15, pos.y, 1, oElem.parentNode.id));
			spaces_obj.push(oElem);
			oElem.style.width = oElem.offsetWidth-30+'px';
		}
		for (var i=0; i<spaces_obj.length; i++) {
			if (i == oElem.old_obj_id) {
				free_spaces += !spaces[i][2] ? 1 : 0;
				spaces[i][2] = 1;
			}
		}
		
		
		oElem.style.position = 'absolute';
		
		
        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;
		
		gl_x_shift = e.clientX - x;
		gl_y_shift = e.clientY - y;
		
        if (drag_enbled) document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;
        return false;
    },


    // private method. Drag (move) element.
    _drag : function(e) {
		var oElem = DragHandler._oElem;
		e = e ? e : window.event;
		gl_x = e.clientX - gl_x_shift;
		gl_y = e.clientY - gl_y_shift;
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		snap = false;

		// check snapping
		for (var i=0; i<spaces.length && !snap; i++) {
			var sx = spaces[i][0];
			var sy = spaces[i][1];
			if ((sx>gl_x-snap_size && sx<gl_x+snap_size) && (sy>gl_y-snap_size && sy<gl_y+snap_size) && spaces[i][2] && oElem.offsetHeight==spaces_obj[i].offsetHeight) {
				snap = i+1; // snapping space number + 1
				i = spaces.length;
			}
		}
		
		e = e ? e : window.event;
		
		
		// snap to free space
		if (snap) {
			if (spaces_obj[snap-1]==oElem) oElem.parentNode.className = oElem.parentNode.className.replace(' dragging', '');
			oElem.className = oElem.className.replace(' no_bg', '');
			oElem.style.left = spaces[snap-1][0] + 'px';
			oElem.style.top =  spaces[snap-1][1] + 'px';
			oElem.style.zIndex = 1;
		}
		// dragging
		else {
			if (oElem.style.zIndex == 1) {x = gl_x; y = gl_y;}
			if (oElem.style.zIndex == 1 || oElem.style.zIndex != gl_z_index-1) oElem.style.zIndex = gl_z_index++;
			if (oElem.parentNode.className.search('dragging')==-1) oElem.parentNode.className += ' dragging';
			if (oElem.className.search('no_bg')==-1) oElem.className += ' no_bg';
			oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			oElem.style.top =  y + (e.clientY - oElem.mouseY) + 'px';
		}
		
		
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;
		
		//window.status = x+':'+y+' | '+gl_x+':'+gl_y+' | '+oElem.style.zIndex+':'+gl_z_index;
		
        return false;
    },


    // private method. Stop drag process.
    _dragEnd : function() {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);
		
		if (snap) {
			// save sticker position
			var parent = spaces[snap-1][3].replace(/sticker_([\d]+)/i,'$1');
			var sticker = oElem.parentNode.id.replace(/sticker_([\d]+)/i,'$1');
			
			pos = -1;
			for (var i=0; i<stickers_pos.length; i++) {
				if (stickers_pos[i] == parent) pos = i;
			}
			stickers_pos[pos] = sticker;
			
			setCookie('stickers', stickers_pos.join(','), 30);
			
			
			oElem.old_obj_id = snap-1;
			spaces[snap-1][2] = 0;
			free_spaces--;
		}
		//window.status = free_spaces+' || '+spaces.join(' | ');
		drag_enbled = 0;
		
        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;
        
        //window.status = stickers_pos;
        //try {console.log(stickers_pos);} catch(e) {}
    }

}


// get object position
function getPosition(obj_link)
{
	var x=0, y=0;
	var obj=obj_link;
	while(obj) {
		x+=obj.offsetLeft;
		y+=obj.offsetTop;
		obj=obj.offsetParent;
	}
	return {x:x, y:y};
}



function setCookie(name, value, days)
{
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function delCookie(name)
{
	createCookie(name,"",-1);
}



window.onload = function(){
	div_elems = document.getElementById('content').getElementsByTagName('div');
	for (var i = 0; i < div_elems.length; i++) {
		
		// drag & drop objects
		if (div_elems[i].className.search('drag_block')>=0) {
			var draggin = DragHandler.attach(div_elems[i].getElementsByTagName('div')[0]);
			stickers_pos.push(div_elems[i].id.replace(/sticker_([\d]+)/i,'$1'));
		}
		
		// fix hover & drag enabled
		else if (div_elems[i].className == 'head' || div_elems[i].className == 'hr_photo') {
			div_elems[i].onmousedown = function() {
				drag_enbled = 1;
			}
			div_elems[i].onmouseup = function() {
				drag_enbled = 0;
			}
			div_elems[i].onmouseover = function() {
				this.className += ' over'
			}
			div_elems[i].onmouseout = function() {
				this.className = this.className.replace(' over', '')
			}
		}
	}
}