var vp_elem = null;
var x=0,y=0,prevX=0,prevY=0,w=0,h=0;
var vp=null;
var pad=5;
var startW,startH,prevScale=1.00;
function vp_grab(ref,event) {
 vp = document.getElementById('viewport');
 if(!event)event=window.event;
 if(!event)return false;
 vp_elem=ref;
 prevX=event.clientX;
 prevY=event.clientY;
 event=null;
 return false;
}
function vp_drag(event) {
 if(vp_elem==null)return;
 if(!event)event=window.event;
 if(!event)return false;
 x-=prevX-event.clientX;
 y-=prevY-event.clientY;
 if(x>pad)x=pad;
 if(y>pad)y=pad;
// if(x<vp.clientWidth-vp_elem.clientWidth-pad)x=vp.clientWidth-vp_elem.clientWidth-pad;
// if(y<vp.clientHeight-vp_elem.clientHeight-pad)y=vp.clientHeight-vp_elem.clientHeight-pad;
 vp_elem.style.left=''+(x)+'px';
 vp_elem.style.top=''+(y)+'px';
 prevX=event.clientX;
 prevY=event.clientY;
 event=null;
 return false;
}
function vp_drop() {
 vp_elem=null;
}
function util_selectStart(event) {
 if(!event)event=window.event;
 if(!event)return false;
 event.cancelBubble = true;
 event.returnValue = false;
 return false;
}
function vp_fit(ref){
 if(ref==null)return;
 vp = document.getElementById('viewport');
 if(w==0&&h==0) {
  w=ref.clientWidth;
  h=ref.clientHeight;
   newW=(vp.clientWidth-pad-pad);
   newH=(vp.clientHeight-pad-pad);
  if(w/newW > h/newH){//image is proportionally wider
   newH=h/(w/newW);
  }else{
   newW=w/(h/newH);
  }
  ref.style.width=''+newW+'px';
  ref.style.height=''+newH+'px';
  ref.style.top=''+pad+'px';
  ref.style.left=''+pad+'px';
 } else {
  ref.style.width=''+w+'px';
  ref.style.height=''+h+'px';
  ref.style.top=''+0+'px';
  ref.style.left=''+0+'px';
  w=0;
  h=0;
 }
}
function vp_scale(f){
	var o=document.getElementById('dragImg');
	var p=document.getElementById('drag');
	
	o.width=f*startW;
	o.height=f*startH;
	
	x=x*f/prevScale;
	y=y*f/prevScale;
	p.style.left=o.style.left=''+(x)+'px';
	p.style.top =o.style.top =''+(y)+'px';

	p.style.width=o.width+'px';
	p.style.height=o.height+'px';
}
function vp_init(){
	document.onmousemove=vp_drag;
	document.onmouseup=vp_drop;
	document.getElementById('viewport_').id='viewport';
	document.getElementById('controls').style.display='block';
	var o=document.getElementById('dragImg');
	var p=document.getElementById('cover');
	startW=o.width;
	startH=o.height;
	p.style.width=o.width+'px';
	p.style.height=o.height+'px';
	//p.style.backgroundImage='url("'+o.src+'")';
	//o.style.display='none';

	window.onresize=vp_resize;
	
	vp_resize();
	vp_scale(0.33);
}
function vp_resize(){
	o=document.getElementById('viewport');
	o.style.height=document.body.clientHeight-40+'px';
	o.style.width=document.body.clientWidth-230+'px';
}