//http://boring.youngpup.net/2001/domdrag/

/**
 * Base class of Drag
 * 可拖拽 Element 的原形，用來將 event 綁定到各個鉤子，這部分市比較通用的，netvibes 也是基本完全相同的實現，這部分推薦看 dindin 的這個，也會幫助理解，http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
 * @example:
 * Drag.init( header_element, element );
 */
var Drag = {
	// 對這個element的引用，一次只能拖拽一個Element
	obj: null , 
	/**
	 * @param: elementHeader	used to drag..
	 * @param: element			used to follow..
	 */
	init: function(elementHeader, element) {
		// 將 start 綁定到 onmousedown 事件，按下鼠標觸發 start
		elementHeader.onmousedown = Drag.start;
		// 將 element 存到 header 的 obj 里面，方便 header 拖拽的時候引用
		elementHeader.obj = element;
		// 初始化絕對的坐標，因為不是 position = absolute 所以不會起什么作用，但是防止后面 onDrag 的時候 parse 出錯了
		if(isNaN(parseInt(element.style.left))) {
			element.style.left = "0px";
		}
		if(isNaN(parseInt(element.style.top))) {
			element.style.top = "0px";
		}
		// 掛上空 Function，初始化這幾個成員，在 Drag.init 被調用后才幫定到實際的函數
		element.onDragStart = new Function();
		element.onDragEnd = new Function();
		element.onDrag = new Function();
	},
	// 開始拖拽的綁定，綁定到鼠標的移動的 event 上
	start: function(event) {
		var element = Drag.obj = this.obj;
		// 解決不同瀏覽器的 event 模型不同的問題
		event = Drag.fixE(event);
		// 看看是不是左鍵點擊
		if(event.which != 1){
			// 除了左鍵都不起作用
			return true ;
		}
		// 參照這個函數的解釋，掛上開始拖拽的鉤子
		element.onDragStart();
		// 記錄鼠標坐標
		element.lastMouseX = event.clientX;
		element.lastMouseY = event.clientY;
		// 綁定事件
		document.onmouseup = Drag.end;
		document.onmousemove = Drag.drag;
		return false ;
	}, 
	// Element正在被拖動的函數
	drag: function(event) {
		event = Drag.fixE(event);
		if(event.which == 0 ) {
		 	return Drag.end();
		}
		// 正在被拖動的Element
		var element = Drag.obj;
		// 鼠標坐標
		var _clientX = event.clientY;
		var _clientY = event.clientX;
		// 如果鼠標沒動就什么都不作
		if(element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
			return	false ;
		}
		// 剛才 Element 的坐標
		var _lastX = parseInt(element.style.top);
		var _lastY = parseInt(element.style.left);
		// 新的坐標
		var newX, newY;
		// 計算新的坐標：原先的坐標+鼠標移動的值差
		newX = _lastY + _clientY - element.lastMouseX;
		newY = _lastX + _clientX - element.lastMouseY;
		// 修改 element 的顯示坐標
		element.style.left = newX + "px";
		element.style.top = newY + "px";
		// 記錄 element 現在的坐標供下一次移動使用
		element.lastMouseX = _clientY;
		element.lastMouseY = _clientX;
		// 參照這個函數的解釋，掛接上 Drag 時的鉤子
		element.onDrag(newX, newY);
		return false;
	},
	// Element 正在被釋放的函數，停止拖拽
	end: function(event) {
		event = Drag.fixE(event);
		// 解除事件綁定
		document.onmousemove = null;
		document.onmouseup = null;
		// 先記錄下 onDragEnd 的鉤子，好移除 obj
		var _onDragEndFuc = Drag.obj.onDragEnd();
		// 拖拽完畢，obj 清空
		Drag.obj = null ;
		return _onDragEndFuc;
	},
	// 解決不同瀏覽器的 event 模型不同的問題
	fixE: function(ig_) {
		if( typeof ig_ == "undefined" ) {
			ig_ = window.event;
		}
		if( typeof ig_.layerX == "undefined" ) {
			ig_.layerX = ig_.offsetX;
		}
		if( typeof ig_.layerY == "undefined" ) {
			ig_.layerY = ig_.offsetY;
		}
		if( typeof ig_.which == "undefined" ) {
			ig_.which = ig_.button;
		}
		return ig_;
	}
};

var DragDrop = Class.create();
DragDrop.prototype = {
	initialize: function(elementHeader_id , element_id){
		var element = document.getElementById(element_id);
		var elementHeader = document.getElementById(elementHeader_id);
		this._dragStart = ((typeof this.start_Drag == "function") ? this.start_Drag : start_Drag);
		this._drag = ((typeof this.when_Drag == "function") ? this.when_Drag : when_Drag);
		this._dragEnd = ((typeof this.end_Drag == "function") ? this.end_Drag : end_Drag);
		this._afterDrag = ((typeof this.after_Drag == "function") ? this.after_Drag : after_Drag);
		this.isDragging = false;
		this.elm = element;
		this.header = $(elementHeader.id);
		this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 0;
		if( this.header) {
			this.header.style.cursor = "move";
			Drag.init( this.header, this.elm);
			this.elm.onDragStart = this._dragStart.bind(this);
			this.elm.onDrag = this._drag.bind(this);
			this.elm.onDragEnd = this._dragEnd.bind(this);
		}
	}
};

/**
 * four function for Drag..
 */
function start_Drag(){
	var position = Position.positionedOffset(this.elm);
	var offLeft = position[0];
	var offTop = position[1];
	var offW = this.elm.offsetWidth;
	this.elm.style.width = offW + "px";
	this.elm.style.position = "absolute";
	this.elm.style.zIndex = 100;
	this.elm.style.left = offLeft + "px";
	this.elm.style.top = offTop + "px";
	this.isDragging = false;
	return false 
}

function when_Drag(clientX , clientY){
}

function end_Drag(){
	if(this._afterDrag()){
	}
	return true;
}

function after_Drag(){
}