var eeP360 = {	
							// Over-writeable per image default values
					x360View : false,	
					y360View : false,	
			  viewPortResize : true,	
		  onLoadStart360view : true,	
		  
		  					// Global eeP360 settings
			  stepIncrements : 1,
	   viewPortWidthInPixels : window.innerWidth,
	  viewPortHeightInPixels : window.innerHeight,
   refreshRateInMilliseconds : 20,

	
					   debug : false,

						loadedImages : {},
					url2divIdMapping : {}, /* set during init */
					   mouseOverGrid : '',
					   bStartMove360 : false,
							matrixDim: 9, // 5x5
							gridSize : 0,
							b360Count: 0,
							curSec	 : (new Date()).getTime(),
							

		init : function (){
			// Initialize images variables
			var tmp, url, img, nowQueryString;
		
						
			eeP360.bStartMove360 = false;
			for( var divId in eeP360.images) {
			
				tmp = {
					deltaX		: 0,  	
					deltaY 		: 0,
					xPosition 	: 0,
					yPosition	: 0,
					xDirection	: 0,
					yDirection	: 0,
					width		: 0,
					height		: 0,
					loaded		: false,
					oImg		: null,
					url			: eeP360.images[ divId ][ 'url' ],
					urlQS		: '',
					oDivWrapper : document.getElementById( divId ),
					
					// set default values for the image from main 
					// settings where it maybe over-written in the 
					// next block
		 		    'viewPortWidthInPixels' : eeP360.viewPortWidthInPixels,
				    'viewPortHeightInPixels': eeP360.viewPortHeightInPixels,
					'x360View'				: eeP360.x360View,
					'y360View'				: eeP360.y360View,
					'viewPortResize'		: eeP360.viewPortResize,
					'onLoadStart360view'	: eeP360.onLoadStart360view

				};
					
					
				///////////////////////////////////////
				// build url2divIdMapping
				// and copy existing image
				// variables into tmp vars
				//
				for( var i in eeP360.images[ divId ] ) {
				
					if( i == 'url' ) {
					
						url = tmp[ i ] ;

						// Add a querystring to imageUrl to insure that
						// onload event will function properly.
						nowQueryString = '';
						if ( ! /\?/.test( url ) ) nowQueryString = '?';
						if ( nowQueryString != '?' 
						&& ! /\?$/.test( url  ) ) nowQueryString += '&';
				
						nowQueryString += 't' + ( /\?.*t=/.test( url  ) 
									  ? eeP360.curSec : '' ) + '=' + eeP360.curSec;
			
						tmp[ 'urlQS' ] = url + nowQueryString ;
						eeP360.url2divIdMapping[ tmp[ 'urlQS' ].toLowerCase() ] = divId;
					}
					else if ( i != 'urlQS' ) 
						tmp[ i ] = eeP360.images[ divId ][i];
					
				} // for( var i in images[ divId ])
				
				eeP360.images[ divId ] = tmp;
				
				eeP360.insertDivInContainers( divId );
				
			} // for( var divId in images )
			
			
		}, // init : function()
	

	//--------------------------------------------------------------------------
	//
	insertDivInContainers: function( divId ) {
	
		img = eeP360.images[ divId ];

		//------------------------------------------------
		// Build the inner html for the div tag
		// where we will insert an image tag and 
		// some div layers for OnMouseOver event
		//
		// For image we append querystring to 
		// insure that the image is reloaded
		//

	
		
		var oDiv = eeP360.images[ divId ].oDivWrapper;
		
		var imageUrl = eeP360.images[ divId ][ 'urlQS' ] ,
			lCaseImgUrl = imageUrl.toLowerCase();

		var innerHTML = '<div style="position:absolute;background-image:url('
						+ imageUrl +');"></div>'
						+ eeP360.buildMouseOverGrid( divId );
						
		if (oDiv.style.position == '' 
		|| oDiv.style.position == 'static' ) 
			oDiv.style.position = 'relative' ;
			
		oDiv.innerHTML = innerHTML;

		// Manually call OnImageLoad event if the image is cached
		eeP360.images[ divId ][ 'oImg' ] = new Image();
		if( eeP360.isTrue( eeP360.loadedImages[ lCaseImgUrl ] ) ) {
			eeP360.images[ divId ][ 'oImg' ].src = imageUrl;
			eeP360.OnImageLoad( eeP360.loadedImages[ lCaseImgUrl ].width,
								eeP360.loadedImages[ lCaseImgUrl ].height, 
								lCaseImgUrl );
		}
		else {
			eeP360.loadedImages[ lCaseImgUrl ] = {};
			var expr = 'eeP360.OnImageLoad( null, null, "' + lCaseImgUrl + '");' ;

			var f = 'function(){' + expr + '}';
			
			eval( "eeP360.images[ divId ][ 'oImg' ].onload =" + f );
			eeP360.images[ divId ][ 'oImg' ].src = imageUrl;
				
		
		}
			
	}, // insertDivInContainers()
	

	//--------------------------------------------------------------------------
	//
	buildMouseOverGrid:function( divId ) {
		if( eeP360.mouseOverGrid == '' ) {
		
			var x, y;
	
			// Make sure we have an odd number of
			// grids, so that image can stop when mouse
			// is in the middle
			while ( eeP360.matrixDim < 100 
				  && ( eeP360.matrixDim % 2 == 0  ) ) eeP360.matrixDim += 1;
		
			if( eeP360.matrixDim >=100 ) {alert( 'inalid matrix size. Aborting' ); return;}
		
			eeP360.gridSize = Math.floor( 100 / eeP360.matrixDim );
		
			eeP360.mouseOverGrid = '';
			for( y=0; y<100; y+=eeP360.gridSize ) {
				for( x=0; x<100; x+=eeP360.gridSize ) {
					eeP360.mouseOverGrid  += '<div style="position:absolute;'
									+ ( eeP360.debug ? 'border:1px solid #ccc;' : '' )
									+'top:'		+ y + '%;'
									+'left:'	+ x + '%;'
									+'height:'	+ (eeP360.gridSize) + '%;'
									+'width:'	+ (eeP360.gridSize) + '%;" '
									+'oveflow:hidden;" '
									+'onmouseover="eeP360.matrixMouseOver(this,'
									+ x + ',' + y + ');">' 
									+ ( eeP360.debug ? y+',' + x : '' ) 
									+'</div>\n';
					
				} //for( x=0;
			} // for( y=0;
		
			if ( eeP360.debug ) 
				eeP360.mouseOverGrid += '<div id="Panorama360_debug_' + divId + '" '
						+ 'style="position:absolute;'
						+ 'border:1px solid #000;' 
						+ 'background-color:yellow;top:'
						+ ( eeP360.gridSize / 2 ) + '%;left:4%"></div>\n';
			
		
		}
		return( eeP360.mouseOverGrid );
		
	}, // buildMouseOverGrid()
	
	
	//--------------------------------------------------------------------------
	//
	isTrue:function( p ) {
		return( typeof( p ) != 'undefined' && p );
	},
		
	//--------------------------------------------------------------------------
	//
	OnImageLoad : function ( width, height, imgUrl ) {

		var divId = eeP360.url2divIdMapping[ imgUrl.toLowerCase() ];
		var	img = eeP360.images[ divId ];

		eeP360.loadedImages[ imgUrl ].width = width==null ? img[ 'oImg' ].width : width;
		eeP360.loadedImages[ imgUrl ].height = height==null ? img[ 'oImg' ].height : height;
		eeP360.loadedImages[ imgUrl ].loaded = true;

		img.loaded	=  true;
		img.height	= eeP360.loadedImages[ imgUrl ].height;
		img.width 	= eeP360.loadedImages[ imgUrl ].width;
		
		var oDiv	= img.oDivWrapper,
			divWidth = oDiv.style.width,
			divHeight= oDiv.style.height;

		oDiv.childNodes[0].style.width = img.width * 2 + 'px';
		oDiv.childNodes[0].style.height= img.height * 2 + 'px';
		
		divWidth = ( divWidth.length > 2 ? divWidth.substring( 0, divWidth.length - 2 ) : 0 );
		divHeight = ( divHeight.length > 2 ? divHeight.substring( 0, divHeight.length - 2 ) : 0 );

		oDiv.style.width=  (( img.viewPortWidthInPixels >= img.width ) 
							? img.width	: img.viewPortWidthInPixels 	) + 'px'  ;

		oDiv.style.height=  (( img.viewPortHeightInPixels >= img.height ) 
							? img.height : img.viewPortHeightInPixels ) + 'px'  ;

		oDiv.style.overflow = 'hidden';
		oDiv.style.position = 'relative';
			
		if( img.onLoadStart360view )
			img.deltaX = img.deltaY = img.xDirection = img.yDirection = -1;
			
		if ( ! img.bMove360Started ) img.bMove360Started = true;
		
		if ( !eeP360.bStartMove360 ) {
			eeP360.bStartMove360 = true;
			if( eeP360.b360Count < 1 ) { ++eeP360.b360Count; eeP360.move360()};
		}
			
		
	}, // OnImageLoad


	//--------------------------------------------------------------------------
	//
	matrixMouseOver : function( o, x, y ) {

		var divId = o.parentNode.getAttribute( 'id' ),
			middleCell = Math.floor( eeP360.matrixDim / 2 ),
			cellX = x / eeP360.gridSize,
			cellY = y / eeP360.gridSize,
			img = eeP360.images[ divId ];

		if( cellX == middleCell ) img.xDirection = 0;
		else img.xDirection = ( cellX < middleCell ) ? -1 : 1;

		if( cellY == middleCell ) img.yDirection = 0;
		else img.yDirection = ( cellY < middleCell ) ? -1 : 1;

		img.deltaX = eeP360.stepIncrements * Math.pow( 2, Math.abs( cellX - middleCell ) )  * -img.xDirection;
		img.deltaY = eeP360.stepIncrements * Math.abs( cellY - middleCell )  * -img.yDirection;
					
	}, // matrixMouseOver()
	




	//--------------------------------------------------------------------------
	//
	move360 : function () {

		if ( eeP360.b360Count > 1 ) {--eeP360.b360Count; return;}

		if( !eeP360.bStartMove360 ) {
			setTimeout( "eeP360.move360();"	, 300 );
			return;
		}
		
		for( var divId in eeP360.images ) {

			var img = eeP360.images[ divId ];
			

			img.xPosition += img.deltaX;
			img.yPosition += img.deltaY;
	
			// Wrap horizontal view 
			var maxOffset = img.width - img.viewPortWidthInPixels;
			if ( maxOffset < 0 ) {
				img.xPosition = 0;	// view port is wider than the image
			}
			else {
				if ( img.x360View ) {
					if ( img.xPosition < - img.width) img.xPosition =0;
					else if ( img.xPosition > 0 ) img.xPosition = -1 * img.width;
				}
				else {
					if ( img.xPosition > 0 ) img.xPosition = 0;
					else if( img.width + img.xPosition < img.viewPortWidthInPixels )
							img.xPosition = img.viewPortWidthInPixels - img.width;
				}
			}
	
			// Wrap vertical view
			var maxOffset = img.height - img.viewPortHeightInPixels;
			if ( maxOffset < 0 ) {
				img.yPosition = 0;	// viewport is taller than the image
			}
			else{ 
				if ( img.y360View ) {
					if ( img.yPosition < -img.height ) img.yPosition =0;
					else if ( img.yPosition > 0 ) img.yPosition = -1 * img.height;
				}
				else {
					if ( img.yPosition > 0 ) img.yPosition = 0;
					else if( img.height + img.yPosition < img.viewPortHeightInPixels )
							img.yPosition = img.viewPortHeightInPixels - img.height;
				}
			}
	

			var oImagesWrapperStyle = img.oDivWrapper.childNodes[0].style;
			oImagesWrapperStyle.top = img.yPosition + 'px';
			oImagesWrapperStyle.left = img.xPosition + 'px';
			
			if( eeP360.debug ) {
				document.getElementById( 'Panorama360_debug_' + divId ).innerHTML 
					= 'deltaX=' + img.deltaX 
					+ ('<br> deltaY=' + img.deltaY )
					+ '<br>xDirection=' + img.xDirection 
					+ '<br> yDirection=' + img.yDirection
					+ '<br> img.xPosition=' + img.xPosition 
					+ '<br> img.yPosition=' + img.yPosition
					+ '<br> img.width=' + img.width 
					+ '<br> img.height=' + img.height
					+ '<br> img.viewPortWidthInPixels=' + img.viewPortWidthInPixels
					+ '<br> img.viewPortHeightInPixels=' + img.viewPortHeightInPixels
					+ '<br> refreshRate=' + eeP360.refreshRateInMilliseconds;
			}
	
						
		} // for( var divId in images )
		
		if( eeP360.bStartMove360 )
			setTimeout( "eeP360.move360();"	, eeP360.refreshRateInMilliseconds );
		else	--eeP360.b360Count;
	} // move360

} // eeP360