/**
 * Based on Mike Hall's Generic Drag http://www.brainjar.com/dhtml/drag/
 */

var isIe = document.attachEvent != null;
var oDrag = {};

var sInitedClass  = "design-preview design-preview-inited";
var sDragginClass = "design-preview design-preview-inited drag";

function dragStart(event, id) {

	var cursorPos = getCursorPos(event);

	oDrag.eDraggable = getEventTarget(event);

	if (oDrag.eDraggable.nodeName == 'H3')
		oDrag.eDraggable = oDrag.eDraggable.parentNode;

	// Save starting positions of cursor and element.

	oDrag.cursorStartX = cursorPos.x;
	oDrag.cursorStartY = cursorPos.y;
	oDrag.elStartLeft  = parseInt(oDrag.eDraggable.style.left, 10);
	oDrag.elStartTop   = parseInt(oDrag.eDraggable.style.top,  10);

	if (isNaN(oDrag.elStartLeft)) oDrag.elStartLeft = 0;
	if (isNaN(oDrag.elStartTop))  oDrag.elStartTop  = 0;

	oDrag.eDraggable.style.zIndex = ++oDrag.zIndex;
	addClass(oDrag.eDraggable, 'drag');

  // Capture mousemove and mouseup events on the page.
	attachEvent(document, "mousemove", dragGo, true);
	attachEvent(document, "mouseup", dragStop, true);

	tweakEvents(event);
}

function dragGo(event) {

  var cursorPos = getCursorPos(event);

  // Move drag element by the same amount the cursor has moved.

  var newLeft = oDrag.elStartLeft + cursorPos.x - oDrag.cursorStartX;
  var newTop  = oDrag.elStartTop  + cursorPos.y - oDrag.cursorStartY

//  newLeft = Math.max(0, newLeft);
  newTop = Math.max(newTop, -25);
  newTop = Math.min(newTop, eFooter.offsetTop - eContent.offsetTop - oDrag.eDraggable.offsetHeight);
  
  oDrag.eDraggable.style.left = newLeft + "px";
  oDrag.eDraggable.style.top  = newTop + "px";

	tweakEvents(event);
}

function dragStop(event) {
	removeClass(oDrag.eDraggable, 'drag');

	detachEvent(document, 'mousemove', dragGo, true);
	detachEvent(document, 'mouseup', dragStop, true);
}


function highlightPreview(event){
	var eLink = getEventTarget(event);
	var sId = eLink.getAttribute('id').match(/^(.*)\-link$/)[1];

	var ePreview = document.getElementById(sId + '-preview');
	if (ePreview) {
		var iOldIndex = ePreview.style.zIndex;
		ePreview.style.zIndex = oDrag.zIndex + 1;
		addClass(ePreview, 'drag');
		attachEvent(eLink, 'mouseout', function() {
			ePreview.style.zIndex = iOldIndex;
			removeClass(ePreview, 'drag');
		})
	}
}


function highlightNavigationLink(event){
	var ePreview = getEventTarget(event);

	// If it's not the top "div.design-preview", take parent
	while (!hasClass(ePreview, 'design-preview'))
		ePreview = ePreview.parentNode;

	var sId = ePreview.getAttribute('id').match(/^(.*)\-preview$/)[1];

	var eLink = document.getElementById(sId + '-link');
	if (eLink) {
		addClass(eLink, 'hover');
		attachEvent(ePreview, 'mouseout', function() {
			removeClass(eLink, 'hover');
		})
	}
}



function getEventTarget(event){
	var e;
	if (isIe)
		e = window.event.srcElement;
	else
		e = event.target;

	// If this is a text node, use its parent element.
	if (e.nodeType == 3)
		e = e.parentNode;

	return e;
}


function getCursorPos(event){
	if (isIe)
		return {
			x: window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft,
			y: window.event.clientY + document.documentElement.scrollTop  + document.body.scrollTop
		}
	else
		return {
			x: event.clientX + window.scrollX,
			y: event.clientY + window.scrollY
		}
}


function attachEvent(e, s, f, c){
	if(e.addEventListener) {
		e.addEventListener(s, f, c);
	} else if(e.attachEvent) {
		e.attachEvent('on' + s, f);
	}
}

function detachEvent(e, s, f, c){
	if(e.removeEventListener) {
		e.removeEventListener(s, f, c);
	} else if(e.detachEvent) {
		e.detachEvent('on' + s, f);
	}
}

function tweakEvents(event){
	if (isIe) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	} else {
		event.preventDefault();
	}
}

function hasClass(e, s){
	return (' ' + e.className + ' ').match(' ' + s + ' ') != null;
}

function addClass(e, s){
	if (!hasClass(e, s))
		e.className += ((e.className != '') ? ' ' : '') + s;
}

function removeClass(e, s){
	var	aClasses = e.className.split(' '),
	    i;

	for (i in aClasses) {
		if (aClasses[i] == s){
			aClasses.splice(i, 1);
		}
	}

	e.className = aClasses.join(' ');
}


var eContent,
    eFooter;


function initPreviews(){
	eContent = document.getElementById("content");
	eFooter  = document.getElementById("footer");

	var aPreviewDivs = eContent.getElementsByTagName("div");
	var l = oDrag.zIndex = aPreviewDivs.length;

	for(var i = 0; i < l; i++){
		var ePreview = aPreviewDivs[i];

		if (ePreview.parentNode == eContent && ePreview.className == "design-preview"){
			addClass(ePreview, "design-preview-inited");

			ePreview.style.left = Math.round((document.documentElement.offsetWidth - eContent.offsetLeft - ePreview.offsetWidth) * Math.random() / 1.5 - 50) + 'px'; 
			ePreview.style.top  = Math.round(((window.innerHeight ? eFooter.offsetTop : (document.documentElement.clientHeight - eFooter.clientHeight)) - eContent.offsetTop - ePreview.offsetHeight) * Math.random()) + 'px';
//			alert((document.documentElement.clientHeight - eFooter.clientHeight - eContent.offsetTop - ePreview.clientHeight) + ' ' + ePreview.style.top);

			ePreview.style.zIndex = l - i;

			

			attachEvent(ePreview.getElementsByTagName('h3')[0], "mousedown", dragStart);

			var sId = ePreview.getAttribute('id');
			if (sId != null && sId.match(/\-preview$/)){
				attachEvent(ePreview, "mouseover", highlightNavigationLink);
			}
		}
	}

	initNavigationHovers();
}



function initNavigationHovers(){
	var aLinks = document.getElementById("sidebar").getElementsByTagName("a");
	var l = aLinks.length;

	for(var i = 0; i < l; i++){
		var sId = aLinks[i].getAttribute('id');
		if (sId && sId.match(/\-link$/)){
			attachEvent(aLinks[i], "mouseover", highlightPreview);
		}
	}
}