// ================================================================
//  Drog & Drop Sample Standard & IE Version
// ================================================================
//  動作確認ブラウザ: 
//  ・Firefox 3.5
//  ・Google Chrome 3.0
//  ・Opera 10.0
//  ・Windows Safari 4.0
//  ・Internet Explorer 6.0
//  ・Internet Explorer 7.0
// ================================================================
// 

addEvent(window, 'load', init, false);

/**
 * onload時に実行
 * mouseover,mouseoutイベントハンドラに関数登録
 * 
 * @param  void
 * @return void
 */
function init() {
    var sample = document.getElementById('sample');
    addEvent(sample, 'mouseover', mouseover, false);
    addEvent(sample, 'mouseout',  mouseout,  false);
}

/**
 * mouseover時に、mousedownイベントハンドラに関数登録
 * 
 * @param  mouseover event
 * @return void
 */
function mouseover(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    addEvent(target, 'mousedown', mousedown, false);
}

/**
 * mouseout時に、mousedownイベントハンドラの関数を解除
 * 
 * @param  mouseout event
 * @return void
 */
function mouseout(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    removeEvent(target, 'mousedown', mousedown, false);
}

/**
 * mousedown時に、mousemove,mouseupイベントハンドラに関数登録
 * 
 * @param  mousedown event
 * @return void
 */
function mousedown(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    this.ex = evt.clientX - parseInt(target.style.left);
    this.ey = evt.clientY - parseInt(target.style.top);
    addEvent(target, 'mousemove', mousemove, false)
    addEvent(target, 'mouseup',   mouseup,   false)
}

/**
 * mousemove時に、発生イベントタグの座標を変更する
 * 
 * @param  mousemove event
 * @return void
 */
function mousemove(evt) {
    var evt = getEvent(evt);
    var target = getTarget(evt);
    var dx = evt.clientX - this.ex;
    var dy = evt.clientY - this.ey;
    if(dx < 0) {
        dx = 1;
    }
    if(dy < 0) {
        dy = 1;
    }
    target.style.left = dx + 'px';
    target.style.top  = dy + 'px';
}

/**
 * mouseup時に、mousemove,mouseupのイベントハンドラの関数を解除
 * 
 * @param  mouseup event
 * @return void
 */
function mouseup(evt) {
    var evt = evt || window.event;
    var target = getTarget(evt);
    removeEvent(target, 'mousemove', mousemove, false);
    removeEvent(target, 'mouseup',   mouseup,   false);
}



// ----------------------------------------
// Standard & IE イベントハンドラ共通処理
// ----------------------------------------
/**
 * addEventListenerの共通関数
 * 
 * @param{obj}     tag object
 * @param{String}  event type name
 * @param{func}    function
 * @param{boolean} capture
 * @return void
 */
function addEvent(obj, evtType, func, cap) {
    if (obj.addEventListener) {
        obj.addEventListener(evtType, func, cap);
    }
    else if (obj.attachEvent) {
        obj.attachEvent('on' + evtType, func);
    }
}

/**
 * removeEventListenerの共通関数
 * 
 * @param{obj}     tag object
 * @param{String}  event type name
 * @param{func}    function
 * @param{boolean} capture
 * @return void
 */
function removeEvent(obj, evtType, func, cap) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evtType, func, cap);
    }
    else if (obj.detachEvent) {
        obj.detachEvent('on' + evtType, func);
    }
}

/**
 * 発生イベント取得の共通関数
 * 
 * @param  event(Firfox,Safari...etc) or ''(IE)
 * @return event
 */
function getEvent(evt) {
    if (evt) {
        return evt;
    }
    else if (window.event) {
        return window.event;
    }
}

/**
 * 発生イベントタグ取得の共通関数
 * 
 * @param  event(Firfox,Safari...etc) or ''(IE)
 * @return event tag object
 */
function getTarget(evt) {
    if (evt.target) {
        return evt.target;
    }
    else if (evt.srcElement) {
        return evt.srcElement;
    }
}