var top_dif;         
var left_dif;        
var outframe_pos;  

var inframe;        
var outframe;     
var slide;       
var slidebutton;       
var slideup;       
var slidedown;       
var sliderposition=100;       
var per;       
var lop=0;
var mes;       
var center;       


var defatltW=500;
var defaultH=500;


var naviinframe;    
var navioutframe;    
var src;
var frame;
var movelarge;       

var re_w =500;
var re_h =500;
var left2;
var top2;
var navileft2;
var navitop2;


var count_t=0;
var timerID = 0; 

var image_width = 500; 
var image_height = 500; 

var image2_width = 100;  
var image2_height = 100;  



var image_left_offset = 0;  
var image_top_offset  = 0;  

var image2_left_offset = -78;  
var image2_top_offset  = -58; 



function setSRC(fa) {
	src = fa;
	addListener(window, 'load', setListeners, false);
    return false;
}

function showCenter() {
	setTimeout('notshowCenter()',500);
	center.style.display = "block";
}

function notshowCenter() {
	center.style.display = "none";
}

function resizeImage(e) {
//	center.style.display = "none";
//	centermove.style.display = "block";
	showCenter();
	clearInterval(timerID);
    var delta;
    if(window.event && window.event.wheelDelta) {
        delta = window.event.wheelDelta;
    } else if(e.wheelDalta) {
        delta = e.wheelDelta;
    } else {
        delta = e.detail;
        delta = delta * -1;
    }
    var img = document.getElementById('img');
    var w = img.width;
    var h = img.height;

    if(delta > 0) {
        re_w = Math.round(w * 0.8);
    } else {
        re_w = Math.round(w * 1.2);
    }
    re_h = Math.round(re_w * image_height / image_width);
    outframe_pos = getElemPos(outframe);
    var inframe_pos = getElemPos(inframe);
    var mouse_x;
    var mouse_y;
    if(e.wheelDalta && e.clientX && e.clientY) {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    } else {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
    var x_rate = Math.abs(mouse_x - inframe_pos.x) / w;
    var y_rate = Math.abs(mouse_y - inframe_pos.y) / h;
    var left_diff = mouse_x - Math.round( inframe_pos.x + ( re_w * x_rate ) );
    var top_diff  = mouse_y - Math.round( inframe_pos.y + ( re_h * y_rate ) );
    var now_left = parseInt(inframe.style.left);
    var now_top  = parseInt(inframe.style.top);
    if(re_w<=500)
    {
    	img.width=500;
    	img.height=500;
		now_left=0;
		now_top=0;
    }else if(re_w>=1500)
    {
    	img.width=1500;
    	img.height=1500;
		re_w=1500;
		re_h=1500;
    }else
    {
		img.width = re_w;
		img.height = re_h;
	}
	var flagx=0;
	var flagy=0;
	if(now_left>=0)
	{
		flagx=3;
		if(w<re_w)
		{
			var test_left = (w-re_w)/2 + parseInt(inframe.style.left);
			if(test_left>=0)
			{
				now_left=0;
			}else
			{
				flagx=2;
				now_left=test_left;
			}	
		}else
		{
			now_left=0;
		}
	}else if(((re_w-w)/2)+w+now_left<=500)
	{
		now_left=-(re_w-500);
		flagx=1;
	}else
	{
		var now = now_left;
		now_left = (re_w/w)*(now-250)+250;

	}
	if(now_top>=0)
	{
		flagy=3;
		if(h<re_h)
		{
			var test_top = (h-re_h)/2 + parseInt(inframe.style.top);
			if(test_top>=0)
			{
				now_top=0;
			}else
			{
				flagy=2;
				now_top=test_top;
			}				
		}else
		{
			now_top=0;
		}
	}else if(((re_h-h)/2)+h+now_top<=500)
	{
		now_top=-(re_h-500);
		if(now_top>=0)
		{
			now_top=0;
		}
		flagy=1;
	}else{
		var now = now_top;
		now_top = (re_h/h)*(now-250)+250;
	}
	
	
	if(now_left>=0)
	{
		now_left=0;
	}
	if(now_top>=0)
	{
		now_top=0;
	}
	
	inframe.style.left = now_left + 'px';
    inframe.style.top  = now_top + 'px';	
	var navi_re_w = Math.round(50000/re_w);
	var navi_re_h = Math.round(50000/re_h);
	
	if(navi_re_w >=100)
	{
		naviinframe.style.width=100 + 'px';
		naviinframe.style.height=100 + 'px';
		naviinframe.style.left=0 + 'px';
		naviinframe.style.top=0 + 'px';
	}else
	{
		var old_navi_w=Math.round(50000/w);
		var old_navi_h=Math.round(50000/h);
		naviinframe.style.width=Math.round(50000/re_w) + 'px';
		naviinframe.style.height=Math.round(50000/re_h) + 'px';

	
		var navi_re_w = Math.round(50000/re_w);
		var navi_re_h = Math.round(50000/re_h);

		if(flagx==1)
		{
 			naviinframe.style.left=(100-parseInt(naviinframe.style.width)) + 'px';
		}else if(flagx==2)
		{
			naviinframe.style.left = (old_navi_w-navi_re_w)/2 + parseInt(naviinframe.style.left) + 'px';
		}else if(flagx==3)
		{
			naviinframe.style.left=0 +'px';
		}else
		{
//			alert(naviinframe.style.left);
			var oldnavileft=naviinframe.style.left;
			naviinframe.style.left=(old_navi_w-navi_re_w)/2 + parseInt(oldnavileft) + 'px';
			now_left = (re_w/w)*(now-250)+250;
		}
		if(flagy==1)
		{
 			naviinframe.style.top=(100-parseInt(naviinframe.style.height)) + 'px';
		}else if(flagx==2)
		{
				naviinframe.style.top = (old_navi_h-navi_re_h)/2 + parseInt(naviinframe.style.top) + 'px';
		}else if(flagx==3)
		{
				naviinframe.style.top=0 +'px';
		}else
		{
			var oldnavitop=naviinframe.style.top;
			naviinframe.style.top=(old_navi_h-navi_re_h)/2 + parseInt(oldnavitop) + 'px';
		}

	}
	if(parseInt(naviinframe.style.left)<=0)
	{
		naviinframe.style.left=0 +'px';
	}
	if(parseInt(naviinframe.style.top)<=0)
	{
		naviinframe.style.top=0 +'px';
	}

    per.childNodes[0].nodeValue=Math.ceil(((re_w-500)/1000)*100);
	lop=Math.ceil((re_w/1500)*100);

	if(lop>100){
    	per.childNodes[0].nodeValue=lop + "*";
		mes.style.display = "block";
    }else
    {
		mes.style.display = "none";
    }


	if(re_w>=1500){
		slidebutton.style.top='0' + 'px';
	}else if (re_w<=500)
	{
		slidebutton.style.top= '100' + 'px';
    	per.childNodes[0].nodeValue=0;

	}else
	{
		slidebutton.style.top = 100-Math.abs((re_w-500)/10) + 'px';
	}



    stopDefaultAndPropagation(e);
    return false;
}


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;
    }
	if( navigator.userAgent.match( "Safari" ) ){
		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;
	var top3 = parseInt(inframe.style.top);

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



function sliderreSize(e) {
	center.style.display = "block";
    addListener(document, 'mousemove', slmoveElem, false);
  	addListener(document, 'mouseup', sldragEnd, false);
    stopDefaultAndPropagation(e);
    return false;
}

function sldragEnd(e) {
    if(e.preventDefault) e.preventDefault();
	mes.style.display = "none";
    removeListener(document, 'mousemove', slmoveElem, false);
    removeListener(document, 'mouseup', sldragEnd, false);
	resizeSL();
	center.style.display = "none";
    stopDefaultAndPropagation(e);
    return false;
}

function getMouseY(e){
  if(window.opera)   
          return e.clientY
  else if(document.all)   
		  return window.scrollY+e.clientY;
//          return event.clientY
  else if(document.layers||document.getElementById)
          return e.pageY
}



function resizeSL(e){
    var img = document.getElementById('img');
    var w = parseInt(img.width);
    var h = parseInt(img.height);
	re_w=1500-(100*(Math.round(top2*0.1)));
    re_h = re_w;
    if(re_w>1500)
    {
    	re_w=1500;
    	re_h=1500;
    }
    if(re_w<=500)
    {
    	re_w=500;
    	re_h=500;
		now_left=0;
		now_top=0;
    }
    else
    {
	}
	var flagx=0;
	var flagy=0;

    outframe_pos = getElemPos(outframe);
    var inframe_pos = getElemPos(inframe);
    var now_left = parseInt(inframe.style.left);
    var now_top  = parseInt(inframe.style.top);

	var flagx=0;
	var flagy=0;
	if(now_left>=0)
	{
		flagx=3;
		if(w<re_w)
		{
			var test_left = (w-re_w)/2 + parseInt(inframe.style.left);
			if(test_left>=0)
			{
				now_left=0;
			}else
			{
				flagx=2;
				now_left=test_left;
			}	
		}else
		{
			now_left=0;
		}
	}else if(((re_w-w)/2)+w+now_left<=500)
	{
		now_left=-(re_w-500);
		flagx=1;
	}else
	{
		var now = now_left;
		now_left = (re_w/w)*(now-250)+250;

	}
	if(now_top>=0)
	{
		flagy=3;
		if(h<re_h)
		{
			var test_top = (h-re_h)/2 + parseInt(inframe.style.top);
			if(test_top>=0)
			{
				now_top=0;
			}else
			{
				flagy=2;
				now_top=test_top;
			}				
		}else
		{
			now_top=0;
		}
	}else if(((re_h-h)/2)+h+now_top<=500)
	{
		now_top=-(re_h-500);
		if(now_top>=0)
		{
			now_top=0;
		}
		flagy=1;
	}else{
		var now = now_top;
		now_top = (re_h/h)*(now-250)+250;
	}
	
	
	if(now_left>=0)
	{
		now_left=0;
	}
	if(now_top>=0)
	{
		now_top=0;
	}
	
	inframe.style.left = now_left + 'px';
    inframe.style.top  = now_top + 'px';	
	img.width = re_w;
	img.height = re_h;
	var navi_re_w = Math.round(50000/re_w);
	var navi_re_h = Math.round(50000/re_h);
	
	if(navi_re_w >=100)
	{
		naviinframe.style.width=100 + 'px';
		naviinframe.style.height=100 + 'px';
		naviinframe.style.left=0 + 'px';
		naviinframe.style.top=0 + 'px';
	}else
	{
		var old_navi_w=Math.round(50000/w);
		var old_navi_h=Math.round(50000/h);
		naviinframe.style.width=Math.round(50000/re_w) + 'px';
		naviinframe.style.height=Math.round(50000/re_h) + 'px';

	
		var navi_re_w = Math.round(50000/re_w);
		var navi_re_h = Math.round(50000/re_h);

		if(flagx==1)
		{
 			naviinframe.style.left=(100-parseInt(naviinframe.style.width)) + 'px';
		}else if(flagx==2)
		{
			naviinframe.style.left = (old_navi_w-navi_re_w)/2 + parseInt(naviinframe.style.left) + 'px';
		}else if(flagx==3)
		{
			naviinframe.style.left=0 +'px';
		}else
		{
			var oldnavileft=naviinframe.style.left;
			naviinframe.style.left=(old_navi_w-navi_re_w)/2 + parseInt(oldnavileft) + 'px';
			now_left = (re_w/w)*(now-250)+250;
		}
		if(flagy==1)
		{
 			naviinframe.style.top=(100-parseInt(naviinframe.style.height)) + 'px';
		}else if(flagx==2)
		{
				naviinframe.style.top = (old_navi_h-navi_re_h)/2 + parseInt(naviinframe.style.top) + 'px';
		}else if(flagx==3)
		{
				naviinframe.style.top=0 +'px';
		}else
		{
			var oldnavitop=naviinframe.style.top;
			naviinframe.style.top=(old_navi_h-navi_re_h)/2 + parseInt(oldnavitop) + 'px';
		}

	}
	if(parseInt(naviinframe.style.left)<=0)
	{
		naviinframe.style.left=0 +'px';
	}
	if(parseInt(naviinframe.style.top)<=0)
	{
		naviinframe.style.top=0 +'px';
	}

//    per.childNodes[0].nodeValue=Math.ceil((re_w/1500)*100);
    per.childNodes[0].nodeValue=Math.ceil(((re_w-500)/1000)*100);

	if(re_w>=1500){
		slidebutton.style.top='0' + 'px';
	}else if (re_w<=500)
	{
		slidebutton.style.top= '100' + 'px';
    	per.childNodes[0].nodeValue=0;
	}

    if(slidebutton.style.top=="100px")
    {
    	img.width=500;
    	img.height=500;
		now_left=0;
		now_top=0;
		naviinframe.style.width=100 + 'px';
		naviinframe.style.height=100 + 'px';
		naviinframe.style.left=0 + 'px';
		naviinframe.style.top=0 + 'px';
	}		

	sliderposition=top2;
	center.style.display = "none";
//    stopDefaultAndPropagation(e);
    return false;
}



function slmoveElem(e) {
    removeListener(document, 'mousemove', moveElem, false);
    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;
        }
    }
//	top2 = e.clientY - sliderposition - 100;

	myY = 16; 
//	top2=getMouseY(e)-240;



    if(navigator.userAgent.match( /safari/ )) {
		top2 = e.clientY-250 + window.pageYOffset  ;
	}else
	{
		top2 = e.clientY-250 + document.body.scrollTop;
	}
	if(top2>=100)
	{
		top2=100;
		sldragEnd;
	}else if(top2<=0)
	{
		top2=0;
		sldragEnd;
	}
	
    movelarge=parseInt(top2)-parseInt(sliderposition);

    slidebutton.style.top  = top2  + 'px';
	
    stopDefaultAndPropagation(e);
    return false;
}



function sliderDown(e) {
	showCenter();

    removeListener(document, 'mousemove', moveElem, false);

	clearInterval(timerID);
    var img = document.getElementById('img');
    var w = img.width;
    var h = img.height;
    re_w = Math.round(w * 0.8);
	if(re_w<=500)
	{
		re_w=500;
	}
    re_h = Math.round(re_w * image_height / image_width);
    outframe_pos = getElemPos(outframe);
    var inframe_pos = getElemPos(inframe);
    var mouse_x;
    var mouse_y;
    if(e.wheelDalta && e.clientX && e.clientY) {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    } else {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
    var x_rate = Math.abs(mouse_x - inframe_pos.x) / w;
    var y_rate = Math.abs(mouse_y - inframe_pos.y) / h;
    var left_diff = mouse_x - Math.round( inframe_pos.x + ( re_w * x_rate ) );
    var top_diff  = mouse_y - Math.round( inframe_pos.y + ( re_h * y_rate ) );
    var now_left = parseInt(inframe.style.left);
    var now_top  = parseInt(inframe.style.top);
    if(re_w<=500)
    {
    	img.width=500;
    	img.height=500;
		now_left=0;
		now_top=0;
    }else
    {
		img.width = re_w;
		img.height = re_h;
	}
	var flagx=0;
	var flagy=0;
	if(now_left>=0)
	{
		flagx=3;
		if(w<re_w)
		{
			var test_left = (w-re_w)/2 + parseInt(inframe.style.left);
			if(test_left>=0)
			{
				now_left=0;
			}else
			{
				flagx=2;
				now_left=test_left;
			}	
		}else
		{
			now_left=0;
		}
	}else if(((re_w-w)/2)+w+now_left<=500)
	{
		now_left=-(re_w-500);
		flagx=1;
	}else
	{
		var now = now_left;
		now_left = (re_w/w)*(now-250)+250;

	}
	if(now_top>=0)
	{
		flagy=3;
		if(h<re_h)
		{
			var test_top = (h-re_h)/2 + parseInt(inframe.style.top);
			if(test_top>=0)
			{
				now_top=0;
			}else
			{
				flagy=2;
				now_top=test_top;
			}				
		}else
		{
			now_top=0;
		}
	}else if(((re_h-h)/2)+h+now_top<=500)
	{
		now_top=-(re_h-500);
		if(now_top>=0)
		{
			now_top=0;
		}
		flagy=1;
	}else{
		var now = now_top;
		now_top = (re_h/h)*(now-250)+250;
	}
	
	
	if(now_left>=0)
	{
		now_left=0;
	}
	if(now_top>=0)
	{
		now_top=0;
	}
	
	inframe.style.left = now_left + 'px';
    inframe.style.top  = now_top + 'px';	
	var navi_re_w = Math.round(50000/re_w);
	var navi_re_h = Math.round(50000/re_h);
	
	if(navi_re_w >=100)
	{
		naviinframe.style.width=100 + 'px';
		naviinframe.style.height=100 + 'px';
		naviinframe.style.left=0 + 'px';
		naviinframe.style.top=0 + 'px';
	}else
	{
		var old_navi_w=Math.round(50000/w);
		var old_navi_h=Math.round(50000/h);
		naviinframe.style.width=Math.round(50000/re_w) + 'px';
		naviinframe.style.height=Math.round(50000/re_h) + 'px';

	
		var navi_re_w = Math.round(50000/re_w);
		var navi_re_h = Math.round(50000/re_h);

		if(flagx==1)
		{
 			naviinframe.style.left=(100-parseInt(naviinframe.style.width)) + 'px';
		}else if(flagx==2)
		{
			naviinframe.style.left = (old_navi_w-navi_re_w)/2 + parseInt(naviinframe.style.left) + 'px';
		}else if(flagx==3)
		{
			naviinframe.style.left=0 +'px';
		}else
		{
//			alert(naviinframe.style.left);
			var oldnavileft=naviinframe.style.left;
			naviinframe.style.left=(old_navi_w-navi_re_w)/2 + parseInt(oldnavileft) + 'px';
			now_left = (re_w/w)*(now-250)+250;
		}
		if(flagy==1)
		{
 			naviinframe.style.top=(100-parseInt(naviinframe.style.height)) + 'px';
		}else if(flagx==2)
		{
				naviinframe.style.top = (old_navi_h-navi_re_h)/2 + parseInt(naviinframe.style.top) + 'px';
		}else if(flagx==3)
		{
				naviinframe.style.top=0 +'px';
		}else
		{
			var oldnavitop=naviinframe.style.top;
			naviinframe.style.top=(old_navi_h-navi_re_h)/2 + parseInt(oldnavitop) + 'px';
		}

	}
	if(parseInt(naviinframe.style.left)<=0)
	{
		naviinframe.style.left=0 +'px';
	}
	if(parseInt(naviinframe.style.top)<=0)
	{
		naviinframe.style.top=0 +'px';
	}

//    per.childNodes[0].nodeValue=Math.ceil((re_w/1500)*100);
    per.childNodes[0].nodeValue=Math.ceil(((re_w-500)/1000)*100);


	if(re_w>=1500){
		slidebutton.style.top='0' + 'px';
	}else if (re_w<=500)
	{
		slidebutton.style.top= '100' + 'px';
    	per.childNodes[0].nodeValue=0;
	}else
	{
		slidebutton.style.top = 100-Math.abs((re_w-500)/10) + 'px';
	}

    stopDefaultAndPropagation(e);
    return false;

}

function sliderUp(e) {
	showCenter();
    removeListener(document, 'mousemove', moveElem, false);

	clearInterval(timerID);
    var img = document.getElementById('img');
    var w = img.width;
    var h = img.height;
    re_w = Math.round(w * 1.2);
	if(re_w>=1500)
	{
		re_w=1500;
	}
    re_h = Math.round(re_w * image_height / image_width);
    outframe_pos = getElemPos(outframe);
    var inframe_pos = getElemPos(inframe);
    var mouse_x;
    var mouse_y;
    if(e.wheelDalta && e.clientX && e.clientY) {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    } else {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
    var x_rate = Math.abs(mouse_x - inframe_pos.x) / w;
    var y_rate = Math.abs(mouse_y - inframe_pos.y) / h;
    var left_diff = mouse_x - Math.round( inframe_pos.x + ( re_w * x_rate ) );
    var top_diff  = mouse_y - Math.round( inframe_pos.y + ( re_h * y_rate ) );
    var now_left = parseInt(inframe.style.left);
    var now_top  = parseInt(inframe.style.top);
    if(re_w<=500)
    {
    	img.width=500;
    	img.height=500;
		now_left=0;
		now_top=0;
    }else
    {
		img.width = re_w;
		img.height = re_h;
	}
	var flagx=0;
	var flagy=0;
	if(now_left>=0)
	{
		flagx=3;
		if(w<re_w)
		{
			var test_left = (w-re_w)/2 + parseInt(inframe.style.left);
			if(test_left>=0)
			{
				now_left=0;
			}else
			{
				flagx=2;
				now_left=test_left;
			}	
		}else
		{
			now_left=0;
		}
	}else if(((re_w-w)/2)+w+now_left<=500)
	{
		now_left=-(re_w-500);
		flagx=1;
	}else
	{
		var now = now_left;
		now_left = (re_w/w)*(now-250)+250;

	}
	if(now_top>=0)
	{
		flagy=3;
		if(h<re_h)
		{
			var test_top = (h-re_h)/2 + parseInt(inframe.style.top);
			if(test_top>=0)
			{
				now_top=0;
			}else
			{
				flagy=2;
				now_top=test_top;
			}				
		}else
		{
			now_top=0;
		}
	}else if(((re_h-h)/2)+h+now_top<=500)
	{
		now_top=-(re_h-500);
		if(now_top>=0)
		{
			now_top=0;
		}
		flagy=1;
	}else{
		var now = now_top;
		now_top = (re_h/h)*(now-250)+250;
	}
	
	
	if(now_left>=0)
	{
		now_left=0;
	}
	if(now_top>=0)
	{
		now_top=0;
	}
	
	inframe.style.left = now_left + 'px';
    inframe.style.top  = now_top + 'px';	
	var navi_re_w = Math.round(50000/re_w);
	var navi_re_h = Math.round(50000/re_h);
	
	if(navi_re_w >=100)
	{
		naviinframe.style.width=100 + 'px';
		naviinframe.style.height=100 + 'px';
		naviinframe.style.left=0 + 'px';
		naviinframe.style.top=0 + 'px';
	}else
	{
		var old_navi_w=Math.round(50000/w);
		var old_navi_h=Math.round(50000/h);
		naviinframe.style.width=Math.round(50000/re_w) + 'px';
		naviinframe.style.height=Math.round(50000/re_h) + 'px';

	
		var navi_re_w = Math.round(50000/re_w);
		var navi_re_h = Math.round(50000/re_h);

		if(flagx==1)
		{
 			naviinframe.style.left=(100-parseInt(naviinframe.style.width)) + 'px';
		}else if(flagx==2)
		{
			naviinframe.style.left = (old_navi_w-navi_re_w)/2 + parseInt(naviinframe.style.left) + 'px';
		}else if(flagx==3)
		{
			naviinframe.style.left=0 +'px';
		}else
		{
//			alert(naviinframe.style.left);
			var oldnavileft=naviinframe.style.left;
			naviinframe.style.left=(old_navi_w-navi_re_w)/2 + parseInt(oldnavileft) + 'px';
			now_left = (re_w/w)*(now-250)+250;
		}
		if(flagy==1)
		{
 			naviinframe.style.top=(100-parseInt(naviinframe.style.height)) + 'px';
		}else if(flagx==2)
		{
				naviinframe.style.top = (old_navi_h-navi_re_h)/2 + parseInt(naviinframe.style.top) + 'px';
		}else if(flagx==3)
		{
				naviinframe.style.top=0 +'px';
		}else
		{
			var oldnavitop=naviinframe.style.top;
			naviinframe.style.top=(old_navi_h-navi_re_h)/2 + parseInt(oldnavitop) + 'px';
		}

	}
	if(parseInt(naviinframe.style.left)<=0)
	{
		naviinframe.style.left=0 +'px';
	}
	if(parseInt(naviinframe.style.top)<=0)
	{
		naviinframe.style.top=0 +'px';
	}
//    per.childNodes[0].nodeValue=Math.ceil((re_w/1500)*100);
    per.childNodes[0].nodeValue=Math.ceil(((re_w-500)/1000)*100);

	if(re_w>=1500){
		slidebutton.style.top='0' + 'px';
	}else if (re_w<=500)
	{
		slidebutton.style.top= '100' + 'px';
    	per.childNodes[0].nodeValue=0;
	}else
	{
		slidebutton.style.top = 100-Math.abs((re_w-500)/10) + 'px';
	}

    stopDefaultAndPropagation(e);
    return false;

}






function smoothMove() {
    removeListener(document, 'mousemove', moveElem, false);
	clearInterval(timerID);
	timerID=setInterval('upMove()',5);
    removeListener(document, 'mousemove', moveElem, false);
    count_t=0;
    return false;
}

function smoothMove2() {
    removeListener(document, 'mousemove', moveElem, false);
	clearInterval(timerID);
	timerID=setInterval('downMove()',5);
    removeListener(document, 'mousemove', moveElem, false);
    count_t=0;
    return false;
}


function smoothMove3() {
    removeListener(document, 'mousemove', moveElem, false);
	clearInterval(timerID);
	timerID=setInterval('rightMove()',5);
    removeListener(document, 'mousemove', moveElem, false);
    count_t=0;
    return false;
}

function smoothMove4() {
    removeListener(document, 'mousemove', moveElem, false);
	clearInterval(timerID);
	timerID=setInterval('leftMove()',5);
    removeListener(document, 'mousemove', moveElem, false);
    count_t=0;
    return false;
}




function upMove() {
	var top2 = parseInt(inframe.style.top);
	var navitop4 = parseInt(naviinframe.style.top);
	top3 = parseInt(top2) + 10;
	count_t+=1;

    navitop5=(-1)*((100*top3)/re_h);

	if(count_t>20)
	{
		clearInterval(timerID);
	}
	if(top2<0)
	{
		inframe.style.top=top3 + "px";	
		naviinframe.style.top  = navitop5  + 'px';
	}else
	{
		clearInterval(timerID);
	}

	return false;
}	

function downMove() {
	var top2 = parseInt(inframe.style.top);
	var navitop4 = parseInt(naviinframe.style.top);
	top3 = parseInt(top2) - 10;

	count_t+=1;
    navitop5=(-1)*((100*top3)/re_h);

	count_t+=1;
	if(count_t>40)
	{
		clearInterval(timerID);
	}
	if(top2>(-1)*(re_h-500))
	{
		inframe.style.top=top3 + "px";	
		naviinframe.style.top  = navitop5  + 'px';
	}else
	{
		clearInterval(timerID);
	}
	return false;
}	

function rightMove() {
	var top2 = parseInt(inframe.style.left);
	var navileft5 = parseInt(naviinframe.style.top);
	top3 = parseInt(top2) - 10;
	count_t+=1;
	navileft5= (-1)*((100*top2)/re_w);
	if(count_t>20)
	{
		clearInterval(timerID);
	}
	if(top2>-re_h+500)
	{
		inframe.style.left=top3 + "px";	
		naviinframe.style.left  = navileft5  + 'px';
	}else
	{
		clearInterval(timerID);
	}
	return false;
}	


function leftMove() {
	var top2 = parseInt(inframe.style.left);
	var navileft5 = parseInt(naviinframe.style.top);
	top3 = parseInt(top2) + 10;
	navileft5= (-1)*((100*top2)/re_w);
	count_t+=1;
	if(count_t>20)
	{
		clearInterval(timerID);
	}
	if(top2<0)
	{
		inframe.style.left=top3 + "px";	
		naviinframe.style.left  = navileft5  + 'px';
	}else
	{
		clearInterval(timerID);
	}
	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) {
if(img.width<=500){
    stopDefaultAndPropagation(e);
    return false;

}else{
	
	clearInterval(timerID);
    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;
        }
    }


    left2 = e.clientX - outframe_pos.x - left_dif;
	top2 = e.clientY - outframe_pos.y - top_dif;

	navileft2 = -((100*left2)/re_w);
	navitop2 = -((100*top2)/re_h);
	


	if(left2 >= 0){
		left2=0;
		navileft2=0;
	}
	if(re_w+left2<495)
	{
		left2=-(re_w-495);
		navileft2=(100*(re_w-500)/re_w);
	}
	if(re_h+top2<495)
	{
		top2=-(re_h-495);
		navitop2=(100*(re_h-500)/re_h);
	}

	if(top2 >=0)
	{	
		top2=0;
		navitop2=0;

	}

    inframe.style.left = left2 + 'px';
    inframe.style.top  = top2  + 'px';

	
	naviinframe.style.left = navileft2 + 'px';
	naviinframe.style.top  = navitop2  + 'px';
	
    stopDefaultAndPropagation(e);
    return false;
}
}

function sdragStart(e) {
    outframe_pos = getElemPos(navioutframe);
    var pos = getElemPos(naviinframe);
    left_dif = e.clientX - pos.x;
    top_dif = e.clientY - pos.y;
	var top3 = parseInt(naviinframe.style.top);

    addListener(document, 'mousemove', smoveElem, false);
  	addListener(document, 'mouseup', sdragEnd, false);
    stopDefaultAndPropagation(e);
    return false;
}

function eTouka(e) {
	navitoukaframe.style.display = "block";
	naviinframe.style.display = "none";
	naviinframe.style.display = "block";
    stopDefaultAndPropagation(e);
    return false;
}

function eToukaout(e) {
	navitoukaframe.style.display = "none";
    stopDefaultAndPropagation(e);
    return false;
}

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

function smoveElem(e) {

if(img.width<=500){
    stopDefaultAndPropagation(e);
    return false;

}else{

	clearInterval(timerID);
    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;
        }
    }


    navileft2 = e.clientX - outframe_pos.x - left_dif;
	navitop2 = e.clientY - outframe_pos.y - top_dif;

	left2 = ((-1)*(navileft2*re_w))/100;
	top2 = ((-1)*(navitop2*re_h))/100;
	


	if(left2 >= 0){
		left2=0;
		navileft2=0;
	}
	if(re_w+left2<495)
	{
		left2=-(re_w-495);
		navileft2=(100*(re_w-500)/re_w);
	}
	if(re_h+top2<495)
	{
		top2=-(re_h-495);
		navitop2=(100*(re_h-500)/re_h);
	}

	if(top2 >=0)
	{	
		top2=0;
		navitop2=0;

	}

    inframe.style.left = left2 + 'px';
    inframe.style.top  = top2  + 'px';

	
	naviinframe.style.left = navileft2 + 'px';
	naviinframe.style.top  = navitop2  + '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 Bai(){
	showCenter();
	re_w=1500;
	re_h=1500;
	img.width=1500;
	img.height=1500;
	inframe.style.left="-500px";
	inframe.style.top="-500px";
    per.childNodes[0].nodeValue=100;
	slidebutton.style.top='0' + 'px';
	naviinframe.style.width=33 + 'px';
	naviinframe.style.height=33 + 'px';
	naviinframe.style.left="33px";
	naviinframe.style.top="33px";
}



function setBlock(dspObj,vType){
	document.getElementById(dspObj).style.display = vType;
	document.getElementById('slideup').style.display = vType;
	document.getElementById('slidedown').style.display = vType;
}

function setBlock2(dspObj,vType){
	document.getElementById('up').style.display = vType;
	document.getElementById('down').style.display = vType;
	document.getElementById('right_m').style.display = vType;
	document.getElementById('left_m').style.display = vType;
}

function setListeners(e) {
    outframe = document.getElementById('outframe');
    inframe = document.getElementById('inframe');

    var img = document.createElement('img');
    img.id = 'img';
	img.src =src;
	img.galleryimg='no';
    inframe.appendChild(img);
    img.width = image_width;
    img.height = image_height;
    inframe.style.left = image_left_offset + 'px';
    inframe.style.top  = image_top_offset  + 'px';


    addListener(outframe, 'mousedown', dragStart, false);
    addMouseWheelListener(outframe, resizeImage, false);


    navioutframe = document.getElementById('navioutframe');
    naviinframe = document.getElementById('naviinframe');
    var img2 = document.createElement('img');
    img2.id = 'img2';
	img2.src=src;
    navioutframe.appendChild(img2);
    img2.width = image2_width;
    img2.height = image2_width;
	navioutframe.style.overflow='hidden';
	naviinframe.style.overflow='hidden';
	naviinframe.style.width=100 + 'px';
	naviinframe.style.height=100 + 'px';
	naviinframe.style.left=0 + 'px';
	naviinframe.style.top=0 + 'px';

    addListener(naviinframe, 'mousedown', sdragStart, false);
    addListener(navioutframe, 'mouseover', eTouka, false);
    addListener(navioutframe, 'mouseout', eToukaout, false);
    addMouseWheelListener(navioutframe, resizeImage, false);

    if(window.addEventListener) {
		up = document.getElementById('up');
        down = document.getElementById('down');
		right_m = document.getElementById('right_m');
        left_m = document.getElementById('left_m');
    } 

    addListener(up, 'mousedown', smoothMove, false);
    addListener(down, 'mousedown', smoothMove2, false);
    addListener(right_m, 'mousedown', smoothMove3, false);
    addListener(left_m, 'mousedown', smoothMove4, false);


    slide = document.getElementById('slide');
    slidebutton = document.getElementById('slidebutton');
    slideup = document.getElementById('slideup');
    slidedown = document.getElementById('slidedown');
    var simg = document.createElement('img');
    simg.id = 'simg';
    simg.src = 'http://www3.kyohaku.go.jp/test/images/sl1.gif';
    slidebutton.appendChild(simg);
	slidebutton.style.overflow='hidden';
    addListener(slidebutton, 'mousedown', sliderreSize, false);
    addListener(slideup, 'mousedown', sliderUp, false);
    addListener(slidedown, 'mousedown', sliderDown, false);

    frame = document.getElementById('db');

    per = document.getElementById('per');
    mes = document.getElementById('mes');
    center = document.getElementById('center');
}

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

function addMouseWheelListener(elem, func, cap) {
    if(navigator.userAgent.match( "Safari" )) {
		document.getElementById('outframe').onmousewheel = func;
	}else if(elem.addEventListener) {
        elem.addEventListener('DOMMouseScroll', func, cap); 
        elem.addEventListener('mousewheel', func, cap); 
    } else if(elem.attachEvent) {
        elem.attachEvent("onmousewheel", 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('Not support this browser!');
        return false;
    }
}