// ========================================================================================@ MTechno
//  Class_Draggable.js ---- JavaScript Common Library ver.1.0
// -------------------------------------------------------------------------------------------------
//  prototype.js 必須  (このスクリプトより前に読み込むこと)
// =================================================================================================
//   DRAGGABLE CLASS
//--------------------------------------------------------------------------------------------------
//   例 :
//   new DraggableMT( "div 等の ID" )
//--------------------------------------------------------------------------------------------------
var DraggableMT = Class.create();
DraggableMT.prototype = {
	initialize: function ( element ) {
		this.element = $( element );
		this.style = this.element.style;
		this.thisBaseX;
		this.thisBaseY;
		this.pageBaseX;
		this.pageBaseY;
		this.isMoving = false;
		this.observers = {};
		var html = this.getHTML();
		var thisObject = this;
		Event.observe( this.element, "mousemove", function () { if ( window.event ) window.event.returnValue = false; }, false );
		Event.observe( this.element, "mousedown", function ( event ) {
			if ( thisObject.isMoving ) return;
			var position = thisObject.getPosition();
			thisObject.thisBaseX = position["x"];
			thisObject.thisBaseY = position["y"];
			thisObject.pageBaseX = event.pageX || event.clientX;
			thisObject.pageBaseY = event.pageY || event.clientY;
			thisObject.isMoving = true;
			if ( !!event && !!event.preventDefault ) event.preventDefault();
		}, false );
		Event.observe( html, "mousemove", function ( event ) {
			if ( !thisObject.isMoving ) return;
			event = event || window.event;
			thisObject.setPosition( ( event.pageX || event.clientX ) - thisObject.pageBaseX + thisObject.thisBaseX, ( event.pageY || event.clientY ) - thisObject.pageBaseY + thisObject.thisBaseY );
		}, false );
		Event.observe( html, "mouseup", function ( event ) {
			if ( !thisObject.isMoving ) return;
			thisObject.isMoving = false;
		}, false );
	},
	destroy: function () {
		var html = this.getHTML();
		this.detach( this.element, "mousedown", this.observers["mousedown"] );
		this.detach( html, "mouseup", this.observers["mouseup"] );
		this.detach( html, "mousemove", this.observers["mousemove"] );
		this.element.onmousemove = null;
	},
	setPosition: function( x, y ) {
		this.style.left = x + 'px';
		this.style.top = y + 'px';
	},
	getPosition: function () {
		var x, y;
		if ( this.style.top == "" || this.style.left == "" ) {
			if ( this.element.currentStyle ) {
				x = this.element.currentStyle["left"];
				y = this.element.currentStyle["top"];
			} else {
				var computedStyle = document.defaultView.getComputedStyle( this.element, null );
				x = computedStyle["left"];
				y = computedStyle["top"];
			}
		} else {
			x = this.style.left;
			y = this.style.top;
		}
		return { "x": parseInt( x.replace( /px/, "" ) ) || 0, "y": parseInt( y.replace( /px/, "" ) ) || 0 };
	},
	getHTML: function () {
		return document.getElementsByTagName( 'html' ).item(0);
	}
};