window.addEvent('domready', init);

// global vars
var galleryImageWidth = 900;
//var galleryImgFrame = 0;
//var galleryMaxImages = 15;	// defined and written out in PHP in containing page.
var galleryImgVisible = 1;
var galleryTimer;
var galleryTimerFadeDuration = 1000;
var galleryTimerInterval = 7500;
var galleryImageFadeTransition = 'sine';
var galleryImageFadeTransitionStyle = 'crossfade';

var suppressEvents = 0;
var controlPanelVisible = 0;
var controlPanelVisibleTimer;
var controlPanelVisibleDuration = 3000;


function startGalleryTimer() { galleryTimer = setTimeout('swapGalleryImg()', galleryTimerInterval); }
	
function swapGalleryImg() {
	galleryImgFrame = (galleryImgFrame < (galleryMaxImages-1)) ? galleryImgFrame+1 : 0;	// increment by 1 until Max-1 then reset to 1
				
	var fxIN = galleryImageFadeTransition + ':in';
	var fxOUT = galleryImageFadeTransition + ':out';

	if (galleryImgVisible == 1) {
		// load up img2 and fade in 2 and fade out 1
		$('img2').setStyle('background', 'url(hotels/' + hotelArray[galleryImgFrame] + '/0.jpg) top left no-repeat');
		
		var myFade1 = new Fx.Morph('img1', {duration: galleryTimerFadeDuration, transition: fxOUT});
		var myFade2 = new Fx.Morph('img2', {duration: galleryTimerFadeDuration, transition: fxIN});		
				
		if (galleryImageFadeTransitionStyle == 'crossfade') {
	 		myFade1.start({'opacity': 0});
	 		myFade2.start({'opacity': 1});		
			}
		else {
	 		//CHAIN_FADE:: 
	 		myFade1.start({'opacity': 0}).chain(function() {myFade2.start({'opacity': 1})});	
			}
		galleryImgVisible = 2;
		}
	else {
		// load up img1 and fade in 1 and fade out 2
		$('img1').setStyle('background', 'url(hotels/' + hotelArray[galleryImgFrame] + '/0.jpg) top left no-repeat');		
			
		var myFade1 = new Fx.Morph('img1', {duration: galleryTimerFadeDuration, transition: fxIN});
		var myFade2 = new Fx.Morph('img2', {duration: galleryTimerFadeDuration, transition: fxOUT});
		
		if (galleryImageFadeTransitionStyle == 'crossfade') {
	 		myFade2.start({'opacity': 0});
	 		myFade1.start({'opacity': 1});		
			}
		else {
	 		//CHAIN_FADE:: 
	 		myFade2.start({'opacity': 0}).chain(function() {myFade1.start({'opacity': 1})});		
			}
		
		galleryImgVisible = 1;
		}
	
	startGalleryTimer();
	}

function setSuppressEvents(aValue) { suppressEvents = aValue; }
function setControlPanelVisible(aValue) { controlPanelVisible = aValue; }
function resetControlPanelVisibleTimer() {
	clearTimeout(controlPanelVisibleTimer);
	controlPanelVisibleTimer = setTimeout('hideControlPanel()', controlPanelVisibleDuration);
	}

function showControlPanel() {
	if ((suppressEvents == 0) && (controlPanelVisible ==0)) {
		setSuppressEvents(1);
		var aDiv = $('imageRotatorControlPanel');
		var myFx = new Fx.Tween(aDiv);
		myFx.start('top', 405, 365 ).chain(function() { 
			setSuppressEvents(0); 
			setControlPanelVisible(1);
			controlPanelVisibleTimer = setTimeout('hideControlPanel()', controlPanelVisibleDuration);
			} );
		}
	else {
		resetControlPanelVisibleTimer();		// just reset the visible timer
		}
	}


function hideControlPanel() {
	if ((suppressEvents == 0) && (controlPanelVisible==1)) {
		clearTimeout(controlPanelVisibleTimer);
		setSuppressEvents(1);
		var aDiv = $('imageRotatorControlPanel');
		var myFx = new Fx.Tween(aDiv);
		myFx.start('top', 365, 405 ).chain(function() { 
			setControlPanelVisible(0);
			setSuppressEvents(0); 
			} );
		}
	}
	
function galleryImageClick() {	
	window.location = 'main.php?genre_id=' + genreArray[galleryImgFrame] + '&hc=1&cm=' + cm;	
	}

function init(e) {
	// basic initialisation routines
	get_dimensions();

	// setup for current featured city (image, selection circle and caption.
	//$('fs' + currentCity).setStyle('background-image', 'url(images/filledcircle.gif)');
	$('ft' + currentCity).setStyle('display', 'block');	
	for (var j=0; j<featuredCities.length; j++) { if (featuredCities[j] == currentCity) { i = j; } }
	$('featuredCityCaption').set('text', featuredCityCaptions[i]);
	

	$('img2').fade(0);	
	$('imageRotatorControlPanel').fade(0.75);	
	startGalleryTimer();
	
	
	//*<>************* mouse over and out event handlers for showing and hiding the slideshow control panel ***********************
	$('imageRotatorControlPanel').addEvent('mouseover', function(event) { 
		event.stop();
		resetControlPanelVisibleTimer();
		});
		
	$('imageRotatorControlPanel').addEvent('mouseout', function(event) { 
		event.stop();
		resetControlPanelVisibleTimer();
		});

	$('irc0').addEvent('mouseover', function(event) { 
		event.stop();
		showControlPanel();
		});

	$('btnBack').addEvent('click', function(event) {
		//alert('control panel button clicked');					
		});
		
	$('btnPause').addEvent('click', function(event) {
		$('btnPause').setStyle('display', 'none');
		$('btnPlay').setStyle('display', 'block');
		clearTimeout(galleryTimer);			
		});

	$('btnPlay').addEvent('click', function(event) {
		$('btnPlay').setStyle('display', 'none');
		$('btnPause').setStyle('display', 'block');
		swapGalleryImg();
		});

	$('btnNext').addEvent('click', function(event) {
		//alert('control panel button clicked');				
		});
		
	$('img1').addEvent('click', function(event) {
		event.stop();
		galleryImageClick();		
		});
		
	$('img2').addEvent('click', function(event) {
		event.stop();
		galleryImageClick();	
		});
	//*><************* mouse over and out event handlers for showing and hiding the slideshow control panel ***********************

	}