//Box Transition Fader Ver 2.0
	//Author: James Dalgarno
	//DOC: 6th March 2009
	//DLM: 7th January 2010
	//Tested on;
    //PC : Safari 4.0.4, Mozilla FireFox 3.5.7, MS Internet Explorer 8, Google Chrome 3.0.195.38, Opera 10.10
    //MAC : Safari 4.0.4, Mozilla FireFox 2.0.0.13
    //LINUX : FireFox 3 (no extensive checks have been made)
	//MS Internet Explorer 6 is not supported although images will still switch
	
/*CSS Code required for image box
.transition_box {
	margin: 0px;
	padding: 0px;
	clear: both;
	float: left;
	height: 432px;
	width: 871px;
	position: relative;
}
.transition_box .image_tile {
	height: 342px;
	width: 871px;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	display: none;
}*/

/*HTML code required for image box
 <div class="transition_box" id="transition_box">
  <div class="image_tile"><a href="/link_if_required"><img src="/image_path.png" width="871" height="342" alt="image"></a></div>
  <div class="image_tile"><img src="/image_path.png" width="871" height="342" alt="image"></div>
  <div class="image_tile"><img src="/image_path.png" width="871" height="342" alt="image"></div>
  <div class="image_tile"><img src="/image_path.png" width="871" height="342" alt="image"></div>
  <div class="image_tile"><img src="/image_path.png" width="871" height="342" alt="image"></div>
  <div class="image_tile">...</div>
 </div>
*/
	
	//To start use start_transition(true,10); to stop use start_transition(false,10); where 10 can be between 4 and 20 (or more)

	var TransitionFadeTimer;
	var layerTransTimer;
	var tempLayer = 0;
	var transFaderValue = 0;
	var transTotal = 0;
	var transElements = Array();
	var transition_time = 1;
	var browserBrand = "";
	var transition_starting_image = 1;
	var currentLayer = transition_starting_image;
	
	function start_transition(state,transitionTime)
	{

		if(browserBrand == ""){
			if(typeof checkbrowser == 'function'){
				browserBrand = checkbrowser();
			}
			else{
				alert("Can't transition image box, missing idbrowser.js,\n this is needed to identify the users browser and correct MSIE bugs");
				clearInterval(TransitionFadeTimer);
				clearInterval(layerTransTimer);
			}
		}
		
		if(browserBrand == "IE") transition_starting_image--; //IE compensated bug
		
		if(state){
			if(transition_time < 4) transition_time = 5;
		  	var transBox = document.getElementById('transition_box');
		  	var transElements_toSort = transBox.childNodes;
  
		  	for(var n in transElements_toSort)
		  	{
			  	if(transElements_toSort[n].nodeType == 1){
					transElements_toSort[n].id = 'slide_' + (transTotal + 1);
				  	transElements_toSort[n].style.zIndex = transTotal + 1;
				  	transElements_toSort[n].style.display = 'block';
				  	transElements.push(transElements_toSort[n]);
				  	transTotal++;
					transElements_toSort[transition_starting_image].style.zIndex = (transTotal + 1);
			  	}
		  	}
		  	layerTransTimer = setInterval("transition_layer_selector()", transition_time * 1000); //the show must go on
		}
		else{
			clearInterval(TransitionFadeTimer);
			clearInterval(layerTransTimer);
		}
	}


	function transition_layer_selector()
	{
		if(currentLayer < transTotal) currentLayer++;
		else{
			currentLayer = 1;
			for(var n in transElements){
				transElements[n].style.zIndex = n;
				transElements[n].style.opacity = "1.0";
				transElements[n].style.filter = "alpha(opacity=100)";
				transElements[n].style.MozOpacity = "1.0";
			}			
		}		
		for(var n in transElements){
			if(n != currentLayer  && n != tempLayer){
				transElements[currentLayer -1].style.zIndex = n;
				transElements[n].style.opacity = "1.0";
				transElements[n].style.filter = "alpha(opacity=100)";
				transElements[n].style.MozOpacity = "1.0";
				
			}
		}
		tempLayer = currentLayer;
		TransitionFadeTimer = setInterval("fade_in('"+ tempLayer + "')", transition_time); //the show must go on
	}


	function fade_in(CurrentSlide)
	{
		transFaderValue += 1;
		var div_transFaderValue = transFaderValue / 100;
		var ms_transFaderValue = transFaderValue * 5;
		document.getElementById('slide_' + CurrentSlide).style.zIndex = transTotal + 1;
		document.getElementById('slide_' + CurrentSlide).style.opacity = div_transFaderValue;
		document.getElementById('slide_' + CurrentSlide).style.filter = "alpha(opacity=" + ms_transFaderValue + ")";
		document.getElementById('slide_' + CurrentSlide).style.MozOpacity = div_transFaderValue;
		
		if(browserBrand == 'IE'){
			if(transFaderValue >= 20){
				clearInterval(TransitionFadeTimer);
				transFaderValue = 0;
				document.getElementById('slide_' + CurrentSlide).style.zIndex = transTotal + 1;
				document.getElementById('slide_' + CurrentSlide).style.filter = "alpha(opacity=100)";
			}			
		}
		else{
			if(transFaderValue >= 100){
				clearInterval(TransitionFadeTimer);
				transFaderValue = 0;
				document.getElementById('slide_' + CurrentSlide).style.zIndex = transTotal + 1;
				document.getElementById('slide_' + CurrentSlide).style.opacity = "1.0";
				document.getElementById('slide_' + CurrentSlide).style.MozOpacity = "1";				
			}
		}
	}