/*
 * gallery.js - Functions for operation of the skistays.com gallery.
 *
 * Copyright 2007 The Lodging Company
 *
 * This file is split into three sections, by functionality:
 * 	1. Changing and blending images
 * 	2. Controlling auto-play
 * 	3. Scrolling thumbnail images
 */

/*
 * Changing and blending images
 */

// changeOpac() and blendimage() are from brainerror.net

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function blendimage(divid, imageid, captionid, imagefile, comment, copyright, millisec) {
	++blendSerial;

	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

	//make image transparent
	changeOpac(0, imageid);

	window.setTimeout( "if ( blendSerial == " + blendSerial + " ) { finishBlend( '" + divid + "', '" + imageid + "', '" + captionid + "', '" + imagefile.replace( /\'/g, '\\\'' ) + "', '" + comment.replace( /\'/g, '\\\'' ) + "', '" + copyright.replace( /\'/g, '\\\'' ) + "', " + millisec + ", " + blendSerial + " ) }", 1 );
}

var blendSteps = 20;
function finishBlend( divid, imageid, captionid, imagefile, comment, copyright, millisec, mySerial ) {
	var speed = Math.round(millisec / blendSteps);
	var stepSize = 100 / blendSteps;
	var timer = 0;

	//make new image
	document.getElementById(imageid).src = imagefile;
	document.getElementById(imageid).title = "Copyright: " + copyright;
	if ( captionid ) {
		document.getElementById(captionid).innerHTML = comment;
	}

	//fade in image
	for ( i = 0; i <= 100; i += stepSize ) {
		window.setTimeout("if ( blendSerial == " + mySerial + " ) { changeOpac(" + i + ",'" + imageid + "') }",(timer * speed));
		timer++;
	}

	// When it's all done, set the new image as background
	// window.setTimeout( "if ( blendSerial == " + mySerial + " ) { document.getElementById('" + divid + "').style.backgroundImage = 'url( " + imagefile + ")' }", ( ( timer - 1 ) * speed ) );
}

var loaded = new Array();

function preloadImages( extras ) {
	var i;

	for ( i = 0; i < images.length; ++i ) {
		loaded[i] = new Image();
		loaded[i].src = imagesBase + '/' + images[i].main_file;
	}

	for ( ; i < images.length + extras.length; ++i ) {
		loaded[i] = new Image();
		loaded[i].src = extras[ i - images.length ];
	}
}

function setImage( which ) {
	if ( which == 'next' ) {
		// wrap
		if ( ++curImage >= images.length ) {
			curImage = 0;
		}
	}
	else if ( which == 'prev' ) {
		// wrap
		if ( --curImage < 0 ) {
			curImage = images.length - 1;
		}
	}
	else {
		curImage = which;
		// cap
		if ( curImage >= images.length ) {
			curImage = images.length - 1;
		}
		else if ( curImage < 0 ) {
			curImage = 0;
		}
	}

	checkThumbScroll( 'detailsgallery-thumbslider', curImage, blendDuration );
	moveSelector( 'detailsgallery-thumbselector', curImage, blendDuration );
	blendimage( 'detailsgallery-imagewrapper', 'detailsgallery-image', 'detailsgallery-caption', imagesBase + '/' + images[ curImage ].main_file, images[ curImage ].description, images[ curImage ].copyright, blendDuration );
}

function nextImage() {
	setImage( 'next' );
}


/*
 * Controlling auto-play
 */

function startAutoPlayGoNow() {
	startAutoPlay( 1 );
}

function startAutoPlay( goNow ) {
	var startstop = document.getElementById( 'detailsgallery-startstop' );
	rmvEvent( startstop, 'click', startAutoPlayGoNow );
	addEvent( startstop, 'click', stopAutoPlay );

	document.getElementById( 'detailsgallery-startstopbutton' ).src = '/webimages/skistays/body/pause.png';
	document.getElementById( 'detailsgallery-startstoptext' ).innerHTML = 'PAUSE';

	intervalObj = window.setInterval( 'nextImage()', autoPlayInterval );

	if ( goNow ) {
		nextImage();
	}
}

function stopAutoPlay() {
	var startstop = document.getElementById( 'detailsgallery-startstop' );
	rmvEvent( startstop, 'click', stopAutoPlay );
	addEvent( startstop, 'click', startAutoPlayGoNow );

	document.getElementById( 'detailsgallery-startstopbutton' ).src = '/webimages/skistays/body/play.png';
	document.getElementById( 'detailsgallery-startstoptext' ).innerHTML = 'PLAY';

	intervalObj = window.clearInterval( intervalObj );
}

function syncAutoPlay() {
	if ( intervalObj ) {
		stopAutoPlay();
		startAutoPlay();
	}
}


/*
 * Scrolling thumbnails
 */

function enableScrollButton( id ) {
	var buttonStyle = document.getElementById( id ).style;
	buttonStyle.zIndex = 2;
	buttonStyle.visibility = 'hidden';
	buttonStyle.display = 'none';
}

function disableScrollButton( id ) {
	var buttonStyle = document.getElementById( id ).style;
	buttonStyle.zIndex = 8;
	buttonStyle.visibility = 'visible';
	buttonStyle.display = 'block';
}

function calcScrollMargin( posn ) {
	return ( 0 - posn ) * scrollStep;
}

function scrollUp() {
	moveScroll( '', scrollPosition - 1, 1000 );
}

function scrollDown() {
	/* Enable top button when scrolling down & margin was >= 0. */
	if ( sliderMargin >= 0 ) {
		enableScrollButton( 'detailsgallery-thumbsup-mask' );
	}

	/* Scroll if we can. */
	if ( sliderMargin > ( 0 - scrollStep ) * scrollMax ) {
		sliderMargin -= scrollStep;
		var slider = document.getElementById( 'detailsgallery-thumbslider' );
		slider.style.marginTop = sliderMargin + "px";
	}

	/* Disable bottom button when scrolling down & margin becomes <= scrollMax * ( 0 - scrollStep ). */
	if ( sliderMargin <= scrollMax * ( 0 - scrollStep ) ) {
		disableScrollButton( 'detailsgallery-thumbsdown-mask' );
	}
}

function setSliderMargin( sliderid, margin ) {
	document.getElementById( sliderid ).style.marginTop = margin + "px";
}

var scrollSerial = 0;
function moveScroll( sliderid, posn, duration ) {
	// First, correct invalid values.
	if ( posn < 0 ) {
		posn = 0;
	}
	else if ( posn > scrollMax ) {
		posn = scrollMax;
	}

	if ( posn < scrollPosition ) {
		// Scrolling "up"--backward; reducing the negative margin.
		if ( scrollPosition == scrollMax ) {
			enableScrollButton( 'detailsgallery-thumbsdown-mask' );
		}
		if ( posn == 0 ) {
			disableScrollButton( 'detailsgallery-thumbsup-mask' );
		}
	}
	else if ( posn > scrollPosition ) {
		// Scrolling "down"--forward down the thumbs; increasing the negative margin.
		if ( scrollPosition == 0 ) {
			enableScrollButton( 'detailsgallery-thumbsup-mask' );
		}
		if ( posn == scrollMax ) {
			disableScrollButton( 'detailsgallery-thumbsdown-mask' );
		}
	}
	else {
		// Same position; nothing to do.
		return;
	}

	/* Now apply the change. */
	var from = calcScrollMargin( scrollPosition );
	var to = calcScrollMargin( posn );
	var timer = 0;
	var i;

	++scrollSerial;

	// Move the slider a pixel at a time.
	if ( to < from ) {
		var interval = Math.round( duration / ( from - to ) );
		// Moving backward.
		for ( i = from - 1; i >= to; --i ) {
			window.setTimeout( "if ( scrollSerial == " + scrollSerial + " ) { setSliderMargin( '" + sliderid + "'," + i + " ) }", ( timer * interval ) );
			timer++;
		}
	}
	else {	
		var interval = Math.round( duration / ( to - from ) );
		// Moving forward.
		for ( i = from + 1; i <= to; ++i ) {
			window.setTimeout( "if ( scrollSerial == " + scrollSerial + " ) { setSliderMargin( '" + sliderid + "'," + i + " ) }", ( timer * interval ) );
			timer++;
		}
	}

	sliderMargin = to;
	scrollPosition = posn;
}

function checkThumbScroll( sliderid, posn, duration ) {
	var lastShown = scrollPosition + 3;

	if ( posn < scrollPosition ) {
		moveScroll( sliderid, posn, duration );
	}
	else if ( posn > lastShown ) {
		moveScroll( sliderid, posn - 3, duration );
	}
}

function placeSelector( posn, selectorid ) {
	var selectorStyle = document.getElementById( selectorid ).style;
	selectorStyle.top = posn + 'px';
}

var selectorSerial = 0;
function moveSelector( selectorid, dest, duration ) {
	var from = 1 + selectorPosition * scrollStep;
	var to = 1 + dest * scrollStep;

	if ( to == from ) {
		return;
	}

	var timer = 0;
	var i;

	++selectorSerial;

	// Move the selector a pixel at a time.
	if ( to < from ) {
		var interval = Math.round( duration / ( from - to ) );
		// Moving backward.
		for ( i = from - 1; i >= to; --i ) {
			window.setTimeout( "if ( selectorSerial == " + selectorSerial + " ) { placeSelector( " + i + ",'" + selectorid + "' ) }", ( timer * interval ) );
			timer++;
		}
	}
	else {	
		var interval = Math.round( duration / ( to - from ) );
		// Moving forward.
		for ( i = from + 1; i <= to; ++i ) {
			window.setTimeout( "if ( selectorSerial == " + selectorSerial + " ) { placeSelector( " + i + ",'" + selectorid + "' ) }", ( timer * interval ) );
			timer++;
		}
	}

	selectorPosition = dest;
}