/**** Instructions for adding images to pan and scan ****
	Variable imgList is an array of the images to be used inside 
	of the panScan object. It is actually an array of objects which
	requires 3 pieces of information:
		name: the relative path to the actual image
		dir:	A directional value of 1 through 4
		type: either "pan" or "scan".
		
	The dir variable is set to work in different ways depending on 
	the type:
		pan: 1=left to right
				2=right to left
				3=top to bottom
				4=bottom to top
				
		scan:	1=Southeast
					2=Northeast
					3=Southwest
					4=Northwest
				clarification: As the image "zooms in", it cannot
				remain centered; it's too shaky to try to compensate
				the zooms image. However, it views fine with minimal
				change to expand in certain directions.
	
	Page setup: window.onload calls panScan.selectImg(). This
	initiates the continual motion and fade of the image set. Once
	all images are cycled, it restarts. The target img element must
	be encased in a div with overflow set to hidden, an id of 
	panScanImg and starting opacity of 0.
		HTML code:			
			<div style="width:900px; height:300px; overflow:hidden;">
				<img src="blank.png" id="panScanImg" style="position:relative; filter:alpha(opacity=00)" />
			</div>			
	***********************************************/
		var panScan={
			curImg:0, spd:75, fade: 10, cap:125,
			 imgList:[
				{name:"images/banner1.jpg",dir:3,type:"pan", w:902, h:291},
				{name:"images/banner2.jpg",dir:2,type:"scan", w:902, h:291},
				{name:"images/banner3.jpg",dir:2,type:"pan", w:902, h:291},
				{name:"images/banner4.jpg",dir:4,type:"pan", w:902, h:291},
				{name:"images/banner5.jpg",dir:4,type:"scan", w:902, h:291},
				{name:"images/banner6.jpg",dir:2,type:"pan", w:902, h:291},
				{name:"images/banner7.jpg",dir:1,type:"scan", w:902, h:291}
			],
			//Function chooses the next image from set and handles it
			selectImg:function(){
				var img=byId("panScanImg");
				img.src="";
				img.style.visibility="hidden";
				var pic=panScan.imgList[panScan.curImg];
				img.style.width=pic.w;
				img.style.height=pic.h;
				img.style.top=0;
				img.style.left=0;
				img.o=0;
				
				switch(pic.type){
					case "pan": panScan.pan(pic.name,pic.dir); break;
					case "scan":panScan.scan(pic.name,pic.dir,0); break;
				}
				panScan.curImg++;
				if(panScan.curImg == panScan.imgList.length)
					panScan.curImg=0;
			},
			
			//Pan enlargens image and moves it across screen
			pan:function(imgSrc,dir){			
				//dir: 1: l to r; 2: r to l	; 3: t to b; 4: b to t;
				var img=byId("panScanImg");
				
				///////////// img.count is equaling null on vertical scroll
				if(!img.count){
					img.src=imgSrc;
					//get starting w/h
					var x=img.clientWidth;
					var y=img.clientHeight;
					
					//make it bigger
					img.style.width=x*1.25;
					img.style.height=y*1.25;
					
					//find the difference btwn norm/resized img
					var dX=img.clientWidth-x;
					var dY=img.clientHeight-y;
					var div=img.parentNode;
					var cX=(img.clientWidth-div.clientWidth)/-2;
					var cY=(img.clientHeight-div.clientHeight)/-2;
					
					var count;
					switch(dir){
						case 1: img.style.top=cY; count=dX; break;
						case 2: img.style.top=cY; img.style.left=dX*-1; count=dX; break;
						case 3: img.style.left=cX; count=dY; break;
						case 4: img.style.left=cX; img.style.top=dY*-1; count=dY; break;
					}
					
					img.count=count;
					img.inc=0;
					if(img.count > panScan.cap)img.count=panScan.cap;
					
				}else{ // animate sequence
					img.style.visibility="visible";
					img.inc++;
					switch(dir){
						case 1: img.style.left=img.inc*-1; break;
						case 2: img.style.left=-img.count+img.inc; break;
						case 3: img.style.top=img.inc*-1; break;
						case 4: img.style.top=-img.count+img.inc; break;
					}
					if(img.inc <= 100/panScan.fade || img.count-img.inc < 100/panScan.fade){
						if(img.inc <= 100/panScan.fade){ //Fade In
							img.o+=panScan.fade;
							if(document.all)
								img.filters.alpha.opacity=img.o;
							else
								img.style.opacity=img.o/100
						}else{	//Fade Out
							img.o-=panScan.fade;
							if(document.all)
								img.filters.alpha.opacity=img.o;
							else
								img.style.opacity=img.o/100;	
						}
					}
				}
				if(img.inc < img.count)
					setTimeout("panScan.pan('"+imgSrc+"',"+dir+")",panScan.spd);
				else{
					img.inc=null;
					img.count=null;
					panScan.selectImg()
				}	
			},
			
			
			
			//Function zooms in on images
			scan: function(imgSrc,dir,counter){
				counter++;
				var img=byId("panScanImg");
				if(!img.q){ //first runthrough per image
					img.style.visibility="visible";
					img.src=imgSrc;
					img.q=img.clientWidth/img.clientHeight;
				}
				img.style.width=img.clientWidth+2;
				img.style.height=img.clientHeight+1;
				//dir can only be used to move to one of the corners; anything else gets shaky
				switch(dir){
					case 1:	break;												//Expands SE
					case 2: img.style.top=counter*-1;	break;		//Expands NE
					case 3: img.style.left=counter*-1; break;		//Expands SW
					case 4:	img.style.top=counter*-1;				
								img.style.left=counter*-1; break;		//Expands NW
				}
				if(counter <= 100/panScan.fade || panScan.cap-counter < 100/panScan.fade){
					if(counter <= 100/panScan.fade){ //Fade In
						img.o+=panScan.fade;
						if(document.all)
							img.filters.alpha.opacity=img.o;
						else
							img.style.opacity=img.o/100
					}else{	//Fade Out
						img.o-=panScan.fade;
						if(document.all)
							img.filters.alpha.opacity=img.o;
						else
							img.style.opacity=img.o/100;	
					}
				}
				
				if(counter < panScan.cap){
					setTimeout("panScan.scan('"+imgSrc+"',"+dir+","+counter+")",panScan.spd);
				}
				else{
					img.q=null;
					panScan.selectImg();
				}
			}
		}
		
		function byId(x){
			return document.getElementById(x);
		}