//----------------------------------------------------------
// constants
//----------------------------------------------------------
var TOP					= 20;
var SLIDE_WIDTH			= 700;
var ARROW_WIDTH			= 400;
var HEADER_LOGO_WIDTH	= 520;
var INDEX_TOP			= 22;
var INDEX_SHIFT			= 140;

//---------------------------------
// DOM Elements
//---------------------------------
//var aboutLink			= null;
var backward			= null;
var forward				= null;
var slideContainer		= null;
var slide				= null;
var previousData		= null;
var nextData			= null;
var slideHTML			= [];

//--------------------------------------
// some variables
//--------------------------------------
var windowRight			= 0;
var windowBottom		= 0;
var browserWidth		= 0;
var browserHeight		= 0;
var centerX				= 0;
var currentSlide		= 0;
var numSlides			= 0;
var normalLeftHandX		= 0;
var normalRightHandX	= 0;
var pointingLeftHandX	= 0;
var pointingRightHandX	= 0;


//----------------------------------------------------------------------
function InitializeLecture()
{
	var body = document.getElementsByTagName( "body" )[0];


	//-----------------------------------------------------------
	//  button
	//-----------------------------------------------------------
	backward = document.createElement( "div" );
	backward.style.position = "absolute";
	backward.style.top  = TOP;
	backward.style.left = 0;
	backward.innerHTML = "<img src = backward.jpg border = 0 ></img>"
	body.appendChild( backward );
   	backward.setAttribute( "onmouseover", "rollOverBackwardButton();" );
   	backward.setAttribute( "onmouseout",  "rollOutBackwardButton();" );
   	backward.setAttribute( "onmousedown", "goToPreviousSlide();" );


	//-----------------------------------------------------------
	// forward button
	//-----------------------------------------------------------
	forward = document.createElement( "div" );
	forward.style.position = "absolute";
	forward.style.top  	= TOP;
	forward.style.left 	= 0;
	forward.innerHTML 	= "<img src = forward.jpg border = 0 ></img>"
	body.appendChild( forward );
   	forward.setAttribute( "onmouseover", "rollOverForwardButton();" );
   	forward.setAttribute( "onmouseout",  "rollOutForwardButton();" );
   	forward.setAttribute( "onmousedown", "goToNextSlide();" );


	//-----------------------------------------------------------
	// Previous data
	//-----------------------------------------------------------
	previousData = document.createElement( "div" );
	previousData.style.position = "absolute";
	previousData.style.top  = INDEX_TOP;
	previousData.style.left = 0;
	previousData.innerHTML = ""
	body.appendChild( previousData );

	//-----------------------------------------------------------
	// Next data
	//-----------------------------------------------------------
	nextData = document.createElement( "div" );
	nextData.style.position = "absolute";
	nextData.style.top  = INDEX_TOP;
	nextData.style.left = 0;
	nextData.innerHTML = ""
	body.appendChild( nextData );



	//-----------------------------------------------------------
	// Slide
	//-----------------------------------------------------------
	slide = document.createElement( "div" );
	slide.style.position = "absolute";
	slide.style.top  = 120;
	slide.style.left = 0;
	slide.style.width = "100%";
	slide.innerHTML = ""
	slide.style.textAlign = "center";
	body.appendChild( slide );

	//-----------------------------------------------------------------------------------------------------
	// this is necessary to get things positioned right (this also gets invoked when the user resizes the window)
	//-----------------------------------------------------------------------------------------------------
	arrangeElementsAccordingToBrowserWidthAndHeight();

	//---------------------------------------------
	// this is where all the content is specified
	//---------------------------------------------
	configureSlideHTMLStuff()

	//---------------------------------------------
	// once here to get it started...
	//---------------------------------------------
	updateSlide();

}//----------------------------------------------------------------------



//-------------------------------------------------
// include the required JavaScripts....
//-------------------------------------------------
var head = document.getElementsByTagName('head')[0];	

script = document.createElement('script');
script.src = 'Slides.js';
script.type = 'text/javascript';
head.appendChild(script)

//----------------------------------------------------------------------
function rollOverForwardButton()
{
	forward.style.left = pointingRightHandX;

}//----------------------------------------------------------------------

//----------------------------------------------------------------------
function rollOutForwardButton()
{
	forward.style.left = normalRightHandX;

}//----------------------------------------------------------------------

//----------------------------------------------------------------------
function rollOverBackwardButton()
{
	backward.style.left = pointingLeftHandX;

}//----------------------------------------------------------------------

//----------------------------------------------------------------------
function rollOutBackwardButton()
{
	backward.style.left = normalLeftHandX;

}//----------------------------------------------------------------------



//----------------------------------------------------------------------
function goToPreviousSlide()
{
	if ( currentSlide > 0 )
	{
		currentSlide --;
		updateSlide();
	}
	
}//----------------------------------------------------------------------


//----------------------------------------------------------------------
function goToNextSlide()
{
	if ( currentSlide < numSlides )
	{
		currentSlide ++;
		updateSlide();
	}
	
}//----------------------------------------------------------------------



//----------------------------------------------------------------------
function updateSlide()
{

console.log( currentSlide );

	//-------------------------------------------------
	// update the slide
	//-------------------------------------------------
	slide.innerHTML = slideHTML[ currentSlide ];

/*
	var index = currentSlide + 1;
	var previousString  = ( index - 1	).toString();
	var nextString		= ( index + 1	).toString();
	var numString		= ( numSlides	).toString();

	previousData.innerHTML	= "<font size = 4 face='arial' color=#999999>" + previousString	+ "</font>";
	nextData.innerHTML		= "<font size = 4 face='arial' color=#999999>" + nextString		+ " of " + numString + "</font>";
*/


	//-------------------------------------------------
	// show or hide buttons
	//-------------------------------------------------
	if ( currentSlide == 0 )
	{
		backward.style.visibility		= 'hidden';
		previousData.style.visibility	= 'hidden';
		forward.style.visibility		= 'visible';
	}
	else
	{
		backward.style.visibility		= 'visible';
		previousData.style.visibility	= 'visible';
		
		if ( currentSlide == numSlides - 1 )
		{
console.log( "hide" );

		
			forward.style.visibility	= 'hidden';
			nextData.style.visibility	= 'hidden';
		}
		else
		{
			forward.style.visibility	= 'visible';
			nextData.style.visibility	= 'visible';
		}
	}
	
}//----------------------------------------------------------------------



//----------------------------------------------------------------------
function ResizeLecture()
{
	arrangeElementsAccordingToBrowserWidthAndHeight();

}//----------------------------------------------------------------------



//----------------------------------------------------------------------
function arrangeElementsAccordingToBrowserWidthAndHeight()
{
	browserWidth	= document.body.clientWidth;
	browserHeight	= document.body.clientHeight;

	centerX = browserWidth / 2;
	
	normalLeftHandX		= centerX - HEADER_LOGO_WIDTH / 2 - ARROW_WIDTH;
	normalRightHandX	= centerX + HEADER_LOGO_WIDTH / 2;
	
	pointingLeftHandX	= normalLeftHandX	- 10;
	pointingRightHandX	= normalRightHandX	+ 10;
	
	backward.style.left = normalLeftHandX;
	forward.style.left	= normalRightHandX;
	
	previousData.style.left	= centerX - HEADER_LOGO_WIDTH / 2 - INDEX_SHIFT - 10;
	nextData.style.left		= centerX + HEADER_LOGO_WIDTH / 2 + INDEX_SHIFT;

}//----------------------------------------------------------------------