var window_width=300;
var window_height=300;

var click_mouse_x=0;
var click_mouse_y=0;
var click_prevmouse_x=0;
var click_prevmouse_y=0;

var start_image_x=0;
var start_image_y=0;
var start_previmage_x=0;
var start_previmage_y=0;

var zoom_level=2;


function on_load(){
	getit('zoom_image').oncontextmenu=new Function('return false;');
	getit('preview_window').oncontextmenu=new Function('return false;');
}

function getit(strID){
	return document.getElementById(strID);
}

function prev_mousedrag(e,state){
	var current_mouse_x=e.clientX;
	var current_mouse_y=e.clientY;

	if(state==1){
		click_prevmouse_x=current_mouse_x;
		click_prevmouse_y=current_mouse_y;
	}
	
	if(state==0){
		if(click_prevmouse_x || click_prevmouse_y){
			new_image_x=start_previmage_x+current_mouse_x-click_prevmouse_x;
			new_image_y=start_previmage_y+current_mouse_y-click_prevmouse_y;
			
			new_image_x=new_image_x<0?0:new_image_x;
			new_image_y=new_image_y<0?0:new_image_y;
			
			new_image_x=new_image_x>(150-300/Math.pow(2,zoom_level))?(150-300/Math.pow(2,zoom_level)):new_image_x;
			new_image_y=new_image_y>(150-300/Math.pow(2,zoom_level))?(150-300/Math.pow(2,zoom_level)):new_image_y;
			
			getit('preview_box').style.left=new_image_x+'px';
			getit('preview_box').style.top=new_image_y+'px';
			
			start_image_x=-new_image_x*Math.pow(2,zoom_level)
			start_image_y=-new_image_y*Math.pow(2,zoom_level)
			
			getit('zoom_image').style.left=start_image_x;
			getit('zoom_image').style.top=start_image_y;
		}
	}

	if(state==-1){
		start_previmage_x=getit('preview_box').style.left.replace('px','')*1;
		start_previmage_y=getit('preview_box').style.top.replace('px','')*1;
		
		click_prevmouse_x=0;
		click_prevmouse_y=0;
	}
}

function mousedrag(e,state){
	var current_mouse_x=e.clientX;
	var current_mouse_y=e.clientY;
	
	var image_width=getit('zoom_image').width;
	var image_height=getit('zoom_image').height;
	
	var new_image_x=start_image_x;
	var new_image_y=start_image_y;
	
	if(state==1){
		click_mouse_x=current_mouse_x;
		click_mouse_y=current_mouse_y;
	}
	
	if(click_mouse_y>0 || click_mouse_y>0){
		if(state==0){
			if(click_mouse_x || click_mouse_y){
				new_image_x=start_image_x+current_mouse_x-click_mouse_x;
				new_image_y=start_image_y+current_mouse_y-click_mouse_y;

				new_image_x=new_image_x>0?0:new_image_x;
				new_image_y=new_image_y>0?0:new_image_y;
				new_image_x=new_image_x<window_width-image_width?window_width-image_width:new_image_x;
				new_image_y=new_image_y<window_height-image_height?window_height-image_height:new_image_y;

				getit('zoom_image').style.left=new_image_x+'px';
				getit('zoom_image').style.top=new_image_y+'px';
			}

			update_preview_window(new_image_x,new_image_y);
		}

		if(state==-1){
			start_image_x=getit('zoom_image').style.left.replace('px','')*1;
			start_image_y=getit('zoom_image').style.top.replace('px','')*1;

			if(current_mouse_x==click_mouse_x && current_mouse_y==click_mouse_y){
				var ratio=0;

				if((e.button?e.button:e.which)==1){
					if(zoom_level<max_zoom_level){
						zoom_level++;
						ratio=2;
					}
				}else{
					if(zoom_level>min_zoom_level){
						zoom_level--;
						ratio=0.5;
					}
				}
				
				update_zoom_buttons();
				
				if(ratio>0){
					var mouse_local_x=(e.layerX?e.layerX:e.offsetX)+start_image_x;
					var mouse_local_y=(e.layerY?e.layerY:e.offsetY)+start_image_y;
					new_image_x=mouse_local_x-((e.layerX?e.layerX:e.offsetX)*ratio);
					new_image_y=mouse_local_y-((e.layerY?e.layerY:e.offsetY)*ratio);
					image_width*=ratio;
					image_height*=ratio;
					
					getit('zoom_image').src=folder+zoom_file[zoom_level];
					
					new_image_x=new_image_x>0?0:new_image_x;
					new_image_y=new_image_y>0?0:new_image_y;
					new_image_x=new_image_x<window_width-image_width?window_width-image_width:new_image_x;
					new_image_y=new_image_y<window_height-image_height?window_height-image_height:new_image_y;
					
					getit('zoom_image').style.left=new_image_x;
					getit('zoom_image').style.top=new_image_y;
					
					start_image_x=getit('zoom_image').style.left.replace('px','')*1;
					start_image_y=getit('zoom_image').style.top.replace('px','')*1;
				}
			}

			update_preview_window(start_image_x,start_image_y);
			
			click_mouse_x=0;
			click_mouse_y=0;
		}
	}
	
	return false;
}

function static_zoom(direction){
	//var current_mouse_x=e.clientX;
	//var current_mouse_y=e.clientY;
	
	var image_width=getit('zoom_image').width;
	var image_height=getit('zoom_image').height;
	
	var new_image_x=start_image_x;
	var new_image_y=start_image_y;
	
	var ratio=0;

	if(direction==1){
		if(zoom_level<max_zoom_level){
			zoom_level++;
			ratio=2;
		}
	}else{
		if(zoom_level>min_zoom_level){
			zoom_level--;
			ratio=0.5;
		}
	}
	
	update_zoom_buttons();
	
	if(ratio>0){
		image_width*=ratio;
		image_height*=ratio;
		new_image_x=new_image_x*ratio;
		new_image_y=new_image_y*ratio;

		getit('zoom_image').src=folder+zoom_file[zoom_level];

		new_image_x=new_image_x>0?0:new_image_x;
		new_image_y=new_image_y>0?0:new_image_y;
		new_image_x=new_image_x<window_width-image_width?window_width-image_width:new_image_x;
		new_image_y=new_image_y<window_height-image_height?window_height-image_height:new_image_y;

		getit('zoom_image').style.left=new_image_x;
		getit('zoom_image').style.top=new_image_y;

		start_image_x=getit('zoom_image').style.left.replace('px','')*1;
		start_image_y=getit('zoom_image').style.top.replace('px','')*1;
		
		update_preview_window(start_image_x,start_image_y);
	}
}

function update_zoom_buttons(){
	var oZoomIn=getit('zoomin');
	var oZoomOut=getit('zoomout');
	
	if(zoom_level==max_zoom_level){
		oZoomIn.className='disabled';
	}else{
		oZoomIn.className='';
	}
	
	if(zoom_level==min_zoom_level){
		oZoomOut.className='disabled';
	}else{
		oZoomOut.className='';
	}
}

function update_preview_window(intXOffset,intYOffset){
	//zoom_level (1 x2 / 2 x4 / 3 x8 / 4 x16)
	//window_width  x  window_height
	
	window.status=intXOffset+','+intYOffset;
	
	getit('preview_box').style.width=Math.ceil(300/(Math.pow(2,zoom_level)))-4;
	getit('preview_box').style.height=Math.ceil(300/(Math.pow(2,zoom_level)))-4;
	
	getit('preview_box').style.left=-intXOffset/(Math.pow(2,zoom_level));
	getit('preview_box').style.top=-intYOffset/(Math.pow(2,zoom_level));
}