// JavaScript Document
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
var imgx = 0;
var imgy = 0;
var imgp;
var middlex=0;
var middley=0;
var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function initpic()
{
	var i = new Image();
	i.src = imgp;

	imgx = i.width;
	imgy = i.height;
	
	document.getElementById('mainpanelpic').width=imgx;
	document.getElementById('mainpanelpic').height=imgy;
	document.getElementById('mainpanelpic').style.cursor = "pointer";
	
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)
}

function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  dragobj.style.zIndex = 1100; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  orix = dragobj.offsetLeft;
  oriy = dragobj.offsetTop;
  elex = orix;
  eley = oriy;
  update();
}
function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
	elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);

	if (middlex - elex > imgx )
		elex = middlex - imgx;
	if (middley - eley > imgy )
		eley = middley - imgy;
	if (elex > 0) elex =0;
	if (eley > 0) eley =0;
	
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  } 
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}
function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}
function zoomin(){
	imgx = imgx*2;
	imgy = imgy*2;
	var dpic = document.getElementById('mainpanelpic');
	dpic.height=imgy;
	dpic.width=imgx;
}
function zoomout(){
	if (imgx > middlex && imgy > middley){
		imgx = imgx/2;
		imgy = imgy/2;
		if (imgx < middlex){
			imgx = middlex;
			imgy = imgy * middlex / imgx;
		}
		if (imgy < middley){
			imgy = middley;
			imgx = imgx * middley / imgy;
		}
		var dpic = document.getElementById('mainpanelpic');
		dpic.height=imgy;
		dpic.width=imgx;

		var topM = dpic.style.top.replace(/px/, "");
		var leftM = dpic.style.left.replace(/px/, "");

		if (leftM + imgx < middlex)
			dpic.style.left = (0 - imgx + middlex).toString(10) + 'px';
		if (topM + imgy < middley)
			dpic.style.top = (0 - imgy + middley).toString(10) + 'px';

	}
}
var zoomImgBox_LIST = new Array();
var zoomImgBox_DIR = '/bin/jscript/zoomImgBox/';

// Constructor
// this version ITMessageBox( instanceName, title, imgpath, width,height, **NO USE**  )
function zoomImgBox( instanceName, title, imgPath, width, height, framsworkWidth  ){
	this.name = instanceName;
	this.imgPath = imgPath;
	imgp = imgPath;
	this.width = width; 
	this.height = height;
	this.title = title;
	this.frameworkWidth = framsworkWidth;
	
	// Register to global message box list.
	zoomImgBox_LIST[ this.name ] = this;
	
	// Assign Function
	this.initial = __zoomImgBox_initial;
	this.change = __zoomImgBox_change;
	this.resetPos = __zoomImgBox_resetMsgBoxPos;
	this.closeDialog = __zoomImgBox_closeMsgBox;
	this.showMsg = __zoomImgBox_showMsgBox;

	return this;
}

// Class Methods
function __zoomImgBox_change(title, img){
	this.title = title;
	this.imgPath = imgp = img;
	if ( document.getElementById( this.name ) ){
		if (document.getElementById('mainpanelpic') != null){
			document.getElementById('mainpanelpic').src = img;
			//mousex = mousey = grabx = graby = orix = oriy = elex = eley = algor = imgx = imgy = 0;
			//dragobj = null;
			initpic();
			document.getElementById('mainpanelpic').style.left=0;
			document.getElementById('mainpanelpic').style.top=0;
		}
	}
}
function __zoomImgBox_initial(){
	if ( document.getElementById( this.name ) ){
		alert( "[Error] The name of Message Box already in used~!!!" );
	}
	
	if ( document.getElementById( this.name + "Shadow" ) == null ){
		var objBg = document.createElement('div');
		objBg.id = this.name + "Shadow";
		objBg.style.position = "absolute";
		objBg.style.display = "none";
		objBg.style.top = '0px';
		objBg.style.left = '0px';
		objBg.style.backgroundColor = '#000000';
		objBg.style.opacity = '0.3';
		objBg.style.filter = 'alpha(opacity=30)';
		objBg.style.cursor = 'pointer';
		//objBg.onclick = new Function('zoomImgBox_LIST["'+ this.name +'"].closeDialog();'); 
		objBg.style.zIndex = 999;
		document.body.appendChild(objBg);
	}
	if ( document.getElementById( this.name ) == null ){
		var obj = document.createElement('div');
		obj.id =  this.name;
		obj.style.position = "absolute";
		obj.style.display = "none";
		obj.style.top = '0px';
		obj.style.left = '0px';
		obj.style.width = this.width + 'px';
		obj.style.height = this.height + 'px';
		obj.style.background = "#FFFFFF";
		obj.style.zIndex = 1000;
		obj.valign='bottom';

		obj.innerHTML = "<table border='0' cellpadding='0' cellspacing='0'><tr><td style='padding-left:18px;padding-top:"+(this.height - 40+10)+"px;'><font style=\"font-family:Arial, Helvetica, sans-serif; font-size: 12px;\">"+this.title+"</font></td></tr></table>";
		document.body.appendChild(obj);
	}
	if ( document.getElementById( this.name+"MiddlePanel" ) == null ){
		var objMid = document.createElement('div');
		objMid.id =  this.name+"MiddlePanel" ;
		objMid.style.position = "absolute";
		objMid.style.display = "none";
		objMid.style.top = '0px';
		objMid.style.left = '0px';
		objMid.style.width = (this.width -18-18)+ 'px';
		objMid.style.height = (this.height-40-40) + 'px';
		objMid.style.background = "#FFFFFF";
		objMid.style.zIndex = 1001;
		objMid.style.overflow='hidden';

	middlex = this.width -18-18;
	middley = this.height-40-40;

		objMid.innerHTML = "<img src='"+this.imgPath +"' id='mainpanelpic' onmousedown='grab(this)'/>";
		document.body.appendChild(objMid);
	}
	if ( document.getElementById( this.name+"closebtn" ) == null ){
		var objCloseBtn = document.createElement('div');
		objCloseBtn.id =  this.name+"closebtn" ;
		objCloseBtn.style.position = "absolute";
		objCloseBtn.style.display = "none";
		objCloseBtn.style.top = '0px';
		objCloseBtn.style.left = '0px';
		objCloseBtn.style.width = '20px';
		objCloseBtn.style.height = '20px';
		objCloseBtn.onclick = new Function('zoomImgBox_LIST["'+ this.name +'"].closeDialog();'); 
		objCloseBtn.style.zIndex = 1002;

		objCloseBtn.innerHTML = "<img src='"+zoomImgBox_DIR +"close.gif' style='cursor:pointer;'/>";
		document.body.appendChild(objCloseBtn);
	}
	if ( document.getElementById( this.name+"zoomout" ) == null ){
		var objzoomoutBtn = document.createElement('div');
		objzoomoutBtn.id =  this.name+"zoomout" ;
		objzoomoutBtn.style.position = "absolute";
		objzoomoutBtn.style.display = "none";
		objzoomoutBtn.style.top = '0px';
		objzoomoutBtn.style.left = '0px';
		objzoomoutBtn.style.width = '20px';
		objzoomoutBtn.style.height = '20px';
		objzoomoutBtn.onclick = new Function('zoomout()'); 
		objzoomoutBtn.style.zIndex = 1003;

		objzoomoutBtn.innerHTML = "<img src='"+zoomImgBox_DIR +"zoomout.gif' style='cursor:pointer;'/>";
		document.body.appendChild(objzoomoutBtn);
	}
	if ( document.getElementById( this.name+"zoomin" ) == null ){
		var objzoominBtn = document.createElement('div');
		objzoominBtn.id =  this.name+"zoomin" ;
		objzoominBtn.style.position = "absolute";
		objzoominBtn.style.display = "none";
		objzoominBtn.style.top = '0px';
		objzoominBtn.style.left = '0px';
		objzoominBtn.style.width = '20px';
		objzoominBtn.style.height = '20px';
		objzoominBtn.onclick = new Function('zoomin()'); 
		objzoominBtn.style.zIndex = 1004;

		objzoominBtn.innerHTML = "<img src='"+zoomImgBox_DIR +"zoomin.gif' style='cursor:pointer;'/>";
		document.body.appendChild(objzoominBtn);
	}
}

function __zoomImgBox_resetMsgBoxPos(){
	var selfObj = document.getElementById( this.name );
	
	if ( selfObj ){
		if (selfObj.style.display == 'block'){
			selfObj.style.left = ((document.body.clientWidth - this.width)/2) + 'px';
			selfObj.style.top = (document.body.scrollTop + (document.body.clientHeight - selfObj.offsetHeight)/2) + 'px';
			
			if((parseFloat(document.body.scrollTop + (document.body.clientHeight - selfObj.offsetHeight)/2)) < 0)
				selfObj.style.top = "0px";
			
			var shadow = document.getElementById(this.name + 'Shadow');
			shadow.style.width = (document.body.clientWidth < this.frameworkWidth) ? this.frameworkWidth : document.body.clientWidth;
			shadow.style.height = document.body.scrollHeight;
		}
	}
}

function __zoomImgBox_closeMsgBox(){
	if (document.getElementById( this.name )){
		document.getElementById( this.name ).style.display='none';
	}else{
		alert(this + ' not found.');
	}
	document.getElementById( this.name + 'Shadow').style.display='none';
	document.getElementById( this.name + 'MiddlePanel').style.display='none';
	document.getElementById( this.name + 'closebtn').style.display='none';
	document.getElementById( this.name + 'zoomin').style.display='none';
	document.getElementById( this.name + 'zoomout').style.display='none';
	
	var obj_all = document.getElementsByTagName("SELECT");
	
	for(i=0;i<obj_all.length;i++)
		obj_all[i].style.visibility = "visible";
}

function __zoomImgBox_showMsgBox( ){
	if ( document.getElementById( this.name ) == null ){
		this.initial();
	}
	
	var obj = document.getElementById( this.name );
	obj.style.display = 'block';
	var left = (document.body.clientWidth - this.width)/2;
	var top = document.body.scrollTop + (document.body.clientHeight - obj.offsetHeight)/2;
	obj.style.left = left + 'px';
	obj.style.top = top + 'px';

	var shadow = document.getElementById( this.name + 'Shadow');
	shadow.style.width = document.body.scrollWidth;
	shadow.style.height = document.body.scrollHeight;
	shadow.style.display = 'block';
	
	var mid = document.getElementById( this.name + 'MiddlePanel');
	mid.style.left = (left + 18) + "px";
	mid.style.top = (top + 40) + "px";
	mid.style.display = 'block';

	var closebtn = document.getElementById( this.name + 'closebtn');
	closebtn.style.left = (left + this.width -18-10-20) + "px";
	closebtn.style.top = (top+10) + "px";
	closebtn.style.display = 'block';

	var zoominbtn = document.getElementById( this.name + 'zoomin');
	zoominbtn.style.left = (left + this.width -18-10-20-20-10-20-10) + "px";
	zoominbtn.style.top = (top+10) + "px";
	zoominbtn.style.display = 'block';
	
	var zoomoutbtn = document.getElementById( this.name + 'zoomout');
	zoomoutbtn.style.left = (left + this.width -18-10-20-20-10) + "px";
	zoomoutbtn.style.top = (top+10) + "px";
	zoomoutbtn.style.display = 'block';
	
	var obj_all = document.getElementsByTagName("SELECT");
	
	for(i=0;i<obj_all.length;i++)
		obj_all[i].style.visibility = "hidden";
initpic();

		var dpic = document.getElementById('mainpanelpic');
		while(true){
			imgy = dpic.height;
			imgx = dpic.width;
			zoomout();
			newimgy = dpic.height;
			newimgx = dpic.width;
			if (newimgy == imgy && newimgx == imgx)
				break;
		}
}


// Global funciton
function resetMsgBoxPos(){
	for ( dialog in zoomImgBox_LIST ){
		dialog.resetPos();
	}
}