var top_dif;
var left_dif;
var outframe_pos;
var inframe;
var outframe;
var image_left_offset = 0;
var image_top_offset  = 0;
var img;

function stopDefaultAndPropagation(e) {


	if(e.stopPropagation) {
        e.stopPropagation();
    }
    if(window.event) {
        window.event.cancelBubble = true;
    }
    if(e.preventDefault) {
        e.preventDefault();
    }
    if(window.event) {
        window.event.returnValue = false;
    }
}

function dragStart(e) {

	outframe_pos = getElemPos(outframe);
    var pos = getElemPos(inframe);

    left_dif = e.clientX - pos.x;
    top_dif = e.clientY - pos.y;

    addListener(document, 'mousemove', moveElem, false);
    addListener(document, 'mouseup', dragEnd, false);
    stopDefaultAndPropagation(e);
    return false;
}

function dragEnd(e) {
    if(e.preventDefault) e.preventDefault();
    removeListener(document, 'mousemove', moveElem, false);
    removeListener(document, 'mouseup', dragEnd, false);
    dragging = false;
    stopDefaultAndPropagation(e);
    return false;
}

function moveElem(e) {
	inframe = document.getElementById(inframeId);
	if(
        (navigator.appName == 'Netscape' && navigator.userAgent.indexOf("Safari") < 0 ) ||
        navigator.userAgent.indexOf("Opera") >= 0
    ) {
        if(
            e.clientX >= window.innerWidth - 20 || e.clientX <= 10 ||
            e.clientY >= window.innerHeight - 30 || e.clientY <= 10
        ) {
            dragEnd(e);
            return false;
        }
    }



	image_x = e.clientX - outframe_pos.x - left_dif;
	image_y = e.clientY - outframe_pos.y - top_dif;
	//画像を止める
	size_x = -1 * image_width + 708;
	size_y = -1 * image_height + 400;

	// 左
	if(image_x > 0){
        inframe.style.left = '0px';
        if(image_y > 0){
        	inframe.style.top = '0px';
      		return false;
        }else if(image_y < size_y){
        	inframe.style.top = size_y + 'px';
      		return false;
        }else{
            inframe.style.top  = image_y + 'px'; 	
        }
        return false;
    }

	// 上
	if(image_y > 0){
	    
    	inframe.style.top = '0px';
        if(image_x > 0){
        	inframe.style.left = '0px';
      		return false;
        }else if(image_x < size_x){
        	inframe.style.left = size_x + 'px';
      		return false;
        }else{
            inframe.style.left  = image_x + 'px';        	
        }
    	return false;
    }

	// 右
	if(image_x < size_x){
        inframe.style.left = size_x + 'px';
        if(image_y < size_y){
        	inframe.style.top = size_y + 'px';
      		return false;
        }
        else{
            inframe.style.top  = image_y + 'px';	
        }
    	return false;
    }

	// 下

	if(image_y < size_y){
		inframe.style.top = size_y + 'px';

		if(image_x > 0){
			inframe.style.left = '0px';

			return false;
		}else if(image_x < size_x){
			inframe.style.left = size_x + 'px';
			return false;
		}else{
			inframe.style.top = size_y + 'px';
			inframe.style.left  = image_x + 'px';
		}
    	return false;
    }
    inframe.style.top  = image_y + 'px';
    inframe.style.left = image_x + 'px';
  
    stopDefaultAndPropagation(e);
    return false;
}

function getElemPos(elem) {
    var obj = new Object();
    obj.x = elem.offsetLeft;
    obj.y = elem.offsetTop;
    while(elem.offsetParent) {
       elem = elem.offsetParent;
       obj.x += elem.offsetLeft;
       obj.y += elem.offsetTop;
    }
    return obj;
}

function getTargetNode(e) {
    var target_node;
    if(e.target) {
      target_node = e.target;
    } else {
      target_node = e.srcElement;
    }
    if (target_node.nodeType == 3) {
        target_node = target_node.parentNode;
    }
    return target_node;
}

function removeListener(elem, eventType, func, cap) {
    if(elem.removeEventListener) {
        elem.removeEventListener(eventType, func, cap);
    } else if(elem.detachEvent) {
        elem.detachEvent('on' + eventType, func);
    }
}

function addListener(elem, eventType, func, cap) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, func, cap);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, func);
    } else {
        alert('This browser is not supported.');
        return false;
    }
}