/*implement image rollovers for input buttons*/
function prepareRollovers()
{
/*		checks if browser recognises DOM  */
	if (document.getElementById)
	{
		
		/*===		- find every reference -  img   on page calling this 
					- asking it to look at html tag  IMG
		 			- eg  <img src="xxx.gif  ======= */
		
		var _inputs = document.getElementsByTagName('img');

		/*		FOR LOOP ==============================
    	
		for (var=startvalue;var<=endvalue;var=var+increment)
		
		-	defines a loop that starts with i=0. 
	 	The loop will continue to run as long as i is less than, number of imgs in the document. 
	 	i will increase by 1 each time the loop runs
		
		.LENGTH===========
		**** 	Array object is length. The length of an array represents the actual number of elements 
				the array has
		******	alternatively if it referes to string
				The length method returns the length of a particular string as a number
		
		*/		
		for (x=0; x<_inputs.length; x++)
		{
			
			var _input = _inputs[x];
			// input = inputs [0]  then loops through all img reference so reach final img reference so if 10 img ref final inputs[9]
			
			/*	EG.  greater 0 part string img string return character number 
			CLASNAME REFERES TO THE CSS attribute eg in html<img src="xx.gif" class ="portfolioImage1 picRef" >
			in the css ==== .classname {setting:value;}
			
			INDEXOF====================
			check for a character or even a small string within the current string, 
			and returns the position at which your character or string begins
			if the character or combination is not present in the string, indexOf gives -1
			EG so if test returns a value greater -1 than picRef is present
			*/
			
			if (_input.className.indexOf("picRef") > -1)  
			{
				
				/*	
				<img src="xxxx.gif"
				
				if already in rollover do apply code  - just incase any server side*/
				if (_input.src.indexOf("_rollover") < 0)
				{
					//add event handler
					// mouseover anonymous function to an action
					_input.onmouseover = function ()
					{
						//this refers to the source cause the eevent
						//put value particaular iamge called  in _file
						
						var _file = this.src;
						//looking for the final dot before extension eg name.gif
						var i = _file.lastIndexOf(".");
						if (i > -1)
						{
							
							//adds _rollover to the image thats created the event =====================
							//var the_substring = the_string.substring(from, to);
							
							
							_filename = _file.substring(0, i);
							_fileext = "." + _file.substring(i + 1, _file.length);
							this.src = _filename + '_rollover' + _fileext;
						}
						// return false? returns false to prevent the browser following the link in the href
						return false;
					}
					_input.onmouseout = function ()
					{
						var _file = this.src;
						var i = _file.lastIndexOf("_rollover");
						if (i > -1)
						{
							_filename = _file.substring(0, i);
							i = _file.lastIndexOf(".");
							_fileext = "." + _file.substring(i + 1, _file.length);
							this.src = _filename + _fileext;
						}
						return false;
					}
					
// still part of function ===========================================			
//preload image - 
// 1--------------  test browser if understands replace method - if so than do code
//   					implement a form of Browser Detection or Object Detection to keep from


//	2---------- javascript allows to start loading the images in the HEAD section of your page





					
					if (_input.src.replace)
					{
						var _image = new Image();
// defines a new image object,  in brackets can give it giving it a width and a height					
						
						
						
// ===========================						
		/* The replace function is a method of the String object.

      		string.replace(regExpr,newString)

			where regExpr is either a quoted string ("a string") or a regular 
			expression (/pattern/) and newString is a string.

			The replace method searches the string for a piece of text which matches 
		regExpr (either a direct match for the string or a pattern match when using 
		a regular expression).*/
						_image.src = _input.src.replace(".gif", "_rollover.gif");
						
						/*

image.src = name.gif where your replacing .gif part to creatre new string name_rollover.gif
image.src defines the url of the image

*/
					}
				}
			}
		}
	}
}

/*function splitFileName(_file)
{
	var _filearr, _filename, _fileext;
	if (_file != null && _file != "")
	{
		_filearr = _file.split(".");
		return _filearr;
	}
	else
	{
		return null;
	}
}*/


/* part below registers functions event handlers - onload - load EG LOADS THE JAVASCRIPT FUNCTION for DOM way and microsoft way ======
		
		DOM - Document Object Model -  standard w3c compliant  way
 		again browser detection   - see if recognises the event type
*/


if (window.addEventListener)  // if DOM compliant browser it will recognise this code
{
	window.addEventListener('load',prepareRollovers,false)
}
else if (window.attachEvent) // if microsoft broswer it will recognise this code
{
	window.attachEvent('onload',prepareRollovers)
}
//this will over-write any previously defined "onload" event
//window.onload = prepareRollovers;
	// register event handlers
	// ---------------------------------
	//  - addEventListener has three arguments: the event type, the function to be executed and a boolean (true or false)
		
		/*
		event type
		==========
		
		indicating the formal event type, which is the event name without the "on" prefix (i.e., just click instead of onclick)
		
		boolean
		======
		
		Boolean value that determines whether the node should "listen" for the event in the capture portion of event propagation
		
		
		*/
		
		// - true or false that is the last argument of addEventListener, it is meant to 
		//  - state whether the event handler should be  bubbled  or cpatured
		// BUBBLING refers inheriting event only if parent has same event 
		
		// IF THIS LING CONTAINED WITHIN ANOTHER TAG that contains a link the containing tag will not inherit  event???????
		//==================================
		
		

// microsoft way
else if (window.attachEvent)


	// To register an event handler, use : - attach    it to the element:
	// object.attachEvent(eventName, eventHandlingFunction)
	// IE need onLoad, OnClick etc putting just load will not work
{
	window.attachEvent('onload',changeBorders)
}
//this will over-write any previously defined "onload" event
//window.onload = prepareRollovers;

/*

http://www.oreillynet.com/pub/a/javascript/synd/2001/09/07/DOM-2.html?page=3
*/