// globals - used by pans
var td_width=new Array();
var td_height=new Array();
var pan_td_id=new Array();
var pan_xpos=new Array();
var pan_old_px=new Array();
var pan_dir=new Array();
var pan_image=new Array();

function kgpanorama(n,img) {
        // get the image info
        getPan(n,img);
        // write the table
	writePan(n,img); 
	// this loads up the pan
	loadPan(n,img);
	// this starts the pan moving
	startPan(n);
}
function getPan(n,img) {
	var pan_td="pan"+n;
	pan_image[n] = new Image();
	pan_image[n].src = img;
        // need to manually load the image so it show up on the screen
	td_width[n]=pan_image[n].width;
	td_height[n]=pan_image[n].height;
}
function startPan(n) {
	pan_td_id[n].onmousemove=pan_scroller;
	pan_td_id[n].onclick=pan_pause;
        pan_dir[n]=-1;
	pan_xpos[n]=0;
	pan_old_px[n]=0;
	pan_drift(n);
}
function writePan(n) {
        var hh=td_height[n];
        if (hh==null||hh<=0) td_height[n]=401; 
	document.write('<table width="80%" height="'+td_height[n]+'" border="0">');
	document.write('<tr><td height=height="'+td_height[n]+'" id="pan'+n+'">&nbsp;</td></tr></table>');
}

// function to load image into the table background
function loadPan(n,td_img) {
	var pan_td="pan"+n;
        pan_td_id[n]=document.getElementById(pan_td);
	if (pan_td_id[n]==null) {
		//alert("huh??? 1");
		return;
	}
    // set the background for the td
	pan_td_id[n].background=td_img;
	pan_td_id[n].style.backgroundImage="url("+td_img+")";
	// check to see if loaded.
	if (pan_td_id[n].background==null) {
		//alert("huh??? 2");
		return;
	}
	// got the loop
    	// now we have everything we need
	pan_td_id[n].style.backgroundRepeat="repeat-x";
	pan_td_id[n].style.backgroundPosition= "0px 0px";
	pan_td_id[n].height=td_height[n];
	pan_td_id[n].style.height=td_height[n];
}
function get_who(e) {
	if (document.all) {
                who=event.srcElement;
	} else {
                who=e.target;
	}
        var wid=""+who.id;
        wid=wid.substring(3);
        return wid-0;
     

}
function pan_pause(e) {
   // click the button and this is executed
    var n=get_who(e);
 	if (pan_dir[n]!=0) {
		pan_dir[n]=0;
	} else {
		pan_dir[n]=-1;
		setTimeout("pan_drift("+n+")",50);
	}
}
function pan_drift(n) {
// check to see if there is a new height to the picture
        var hh=pan_image[n].height;
        if (hh!=null&&hh>0&&pan_td_id[n].height==401) {
		// finally got a size - resize the table
		td_height[n]=pan_image[n].height;
		pan_td_id[n].height=td_height[n];
		pan_td_id[n].style.height=td_height[n];
		td_width[n]=pan_image[n].width;
        }
// drifts to right
 	if (pan_dir[n]==0) {
	 	return;
	}
// calculate drift position
	pan_xpos[n]=pan_xpos[n]+(pan_dir[n]*2);
	if (pan_xpos[n]>=td_width[n]) {
		pan_xpos[n]=pan_xpos[n]-td_width[n];
	}
	if (pan_xpos[n]<=0) {
		pan_xpos[n]=pan_xpos[n]+td_width[n];
	}
	var posit=""+pan_xpos[n]+"px 0px"; 
	pan_td_id[n].style.backgroundPosition=posit; 
	setTimeout("pan_drift("+n+")",50);
}
// button stuff
function pan_scroller(e) {
	var px;
        var n=get_who(e);
	if (document.all) {
		px = event.clientX;
	} else {
		px = e.pageX;
	}
	if (pan_old_px[n]==0) {
		pan_old_px[n]=px;
		return;
	}
	var new_px=pan_old_px[n]-px;
        if (new_px>20||new_px<-20) {
		pan_old_px[n]=px;
		return;
        }
	pan_old_px[n]=px;
 	if (pan_dir[n]==0) {
	 	return;
	}
	if (new_px<0) { pan_dir[n]=1;} else {pan_dir[n]=-1;}
	pan_xpos[n]=pan_xpos[n]-(new_px*5);
	if (pan_xpos[n]>=td_width[n]) {
		pan_xpos[n]=pan_xpos[n]-td_width[n];
	}
	if (pan_xpos[n]<=0) {
		pan_xpos[n]=pan_xpos[n]+td_width[n];
	}
	
	var posit=""+pan_xpos[n]+"px 0px"; 
	pan_td_id[n].style.backgroundPosition=posit; 
}