/**
 *  エレメントにドラッグ処理を加えます
 *  Class ElementDrug(
 *      String element    1.ドラッグしたいエレメントのID属性
 *  )
 */
var ElementDrug = Class.create();
ElementDrug.prototype = {
    /**
     *  変数定義
     */
    _self : null,  // thisの静的エイリアス
    _element : '',  // 対象エレメント
    _offsetX : 0,  // オフセットX座業
    _offsetY : 0,  // オフセットY座標

    /**
     *  コンストラクタ
     */
    initialize : function(element) {
        /** オブジェクトの静的化 */
        _self = this;
        _self._element = $(element);

        /** マウスダウンイベントセット */
        if (_self._element) {
            Event.observe(_self._element, 'mousedown', _self._mouseDownHandler);
        }
    },

    /**
     *  マウスダウンイベントハンドラ
     */
    _mouseDownHandler : function(e) {
        _self._element = Event.element(e);

        /** マウス座標更新 */
        _self._offsetX = Event.pointerX(e) - _self._element.offsetLeft;
        _self._offsetY = Event.pointerY(e) - _self._element.offsetTop;

        /** マウスアップイベント設定 */
        Event.observe(document, 'mouseup', _self._mouseUpHandler);

        /** マウスムーブイベント設定 */
        Event.observe(document, 'mousemove', _self._mouseMoveHandler);
    },

    /**
     *  マウスアップイベントハンドラ
     */
    _mouseUpHandler : function(e) {
        /** マウスアップイベント削除 */
        Event.stopObserving(document, 'mouseup', _self._mouseUpHandler);

        /** マウスムーブイベント削除 */
        Event.stopObserving(document, 'mousemove', _self._mouseMoveHandler);
    },

    /**
     *  マウスムーブイベントハンドラ
     */
    _mouseMoveHandler : function(e) {
        var element = $(_self._element);

        /** マウス座標取得 */
        var posX = Event.pointerX(e);
        var posY = Event.pointerY(e);

        /** 移動しますよ？ */
        element.style.top = posY - _self._offsetY + 'px';
        element.style.left = posX - _self._offsetX + 'px';

    }
}