var top_dif;           
var left_dif;          
var outframe_pos;      

var inframe;         
var outframe;        

var oyp_width = 124; 		
var oyp_height = 140;		
var oyp_rows    = 50; 	
var oyp_columns = 50;	 	
var imgdir = 'images144/';  
var start_x = -1640;   		
var start_y = -4660;   			

var loaded_oyps = new Array();  
var outframe_width;    
var outframe_height;  

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) {
    removeListener(document, 'mousemove', moveElem, false);
    removeListener(document, 'mouseup', dragEnd, false);
    stopDefaultAndPropagation(e);
    return false;
}

function moveElem(e) {
    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;
        }
    }
    var x = e.clientX - outframe_pos.x - left_dif;
    var y = e.clientY - outframe_pos.y - top_dif;
    inframe.style.left = x + 'px';
    inframe.style.top  = y  + 'px';
    loadImage(x, y);
    pre_mouse_x = e.clientX;
    pre_mouse_y = e.clientY;
    stopDefaultAndPropagation(e);
    return false;
}

function loadImage(x, y) {
    var columns_s = 0;
    if(x < 0) {
        columns_s =  Math.floor( Math.abs(x) / oyp_width );
    }
    var columns_e =  Math.ceil( (outframe_width - x) / oyp_width );
    if(columns_e > oyp_columns - 1)  {
        columns_e = oyp_columns - 1;
    }
    var row_s = 0;
    if(y < 0) {
        row_s =  Math.floor( Math.abs(y) / oyp_height );
    }
    var row_e =  Math.ceil( (outframe_height - y) / oyp_height );
    if(row_e > oyp_rows - 1)  {
        row_e = oyp_rows - 1;
    }
    for(r = row_s; r <= row_e; r ++) {
        for(c = columns_s; c <= columns_e; c ++) {
            var oyp_div_id = 'oyp' + c + '_' + r;
            if(loaded_oyps[oyp_div_id] == true) {
                continue;
            }
            var oyp_div = document.getElementById(oyp_div_id);
            var img = document.createElement('img');
            img.width = oyp_width;
            img.height = oyp_height;
            img.src = imgdir + oyp_div_id + '.jpg'; 
            oyp_div.appendChild(img);
            loaded_oyps[oyp_div_id] = true;
        }
    }
}

function initInframe() {
    var r;
    for(r = 0; r < oyp_rows; r ++) {
        var row_div = document.createElement('div');
        row_div.id = 'row' + r;
        row_div.style.width = ( (oyp_width + 2) * oyp_columns ) + 'px';
        row_div.style.height = oyp_height + 'px';
        var c;
        for(c = 0; c < oyp_columns; c ++) {
            var oyp_div = document.createElement('div');
            oyp_div.id = 'oyp' + c + '_' + r;
            oyp_div.style.width = oyp_width + 'px';
            oyp_div.style.height = oyp_height + 'px';
            oyp_div.style.styleFloat = 'left'; 
            oyp_div.style.cssFloat = 'left'; 
            
            row_div.appendChild(oyp_div);
        }
        inframe.appendChild(row_div);
    }
    outframe_width = outframe.offsetWidth;
    outframe_height = outframe.offsetHeight;
    inframe.style.left = start_x + 'px';
    inframe.style.top  = start_y + 'px';
    loadImage(start_x, start_y);
}

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 setListeners(e) {
    outframe = document.getElementById('outframe');
    inframe = document.getElementById('inframe');
    initInframe();
    addListener(outframe, 'mousedown', dragStart, false);
}

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('ご利用のブラウザーはサポートされていません。');
        return false;
    }
}

addListener(window, 'load', setListeners, false);