/*
 * (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
 * Special thanks to Dan Webb's domready.js Prototype extension
 * and Simon Willison's addLoadEvent
 *
 * For more info, see:
 * http://www.thefutureoftheweb.com/blog/adddomloadevent
 * http://dean.edwards.name/weblog/2006/06/again/
 * http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
 * http://simon.incutio.com/archive/2004/05/26/addLoadEvent
 * 
 *
 * To use: call addDOMLoadEvent one or more times with functions, ie:
 *
 *    function something() {
 *       // do something
 *    }
 *    addDOMLoadEvent(something);
 *
 *    addDOMLoadEvent(function() {
 *        // do other stuff
 *    });
 *
 */
function $om(el) 
{
	return document.getElementById(el);
}

function urlencode(str) 
{
return escape(str).replace(/\+/g,'%2B').replace(/%20/g, '+').replace(/\*/g, '%2A').replace(/\//g, '%2F').replace(/@/g, '%40');
}



addDOMLoadEvent(function() 
{
	if ( window.innerHeight){
		win_ht = window.innerHeight;
		win_wid = window.innerWidth;
	} else {
		win_ht = document.documentElement.clientHeight;
		win_wid = document.documentElement.clientWidth;
	}
	bar_top = win_ht - 134;
	$om('nav_bar').style.top = bar_top+'px';
	
	// now add the events
	addEvent( $om('bar_toggle'), 'click', function(){
		//alert('toggle bar got called');	
		if ( $om('nav_bar').style.top != win_ht+'px' ) {
			$om('nav_bar').style.top = win_ht+'px';
			$om('gallery_opts').style.visibility = 'hidden';
			this.src = '/gallery-4/images/arrow_up_small.png'
		} else {
			$om('nav_bar').style.top = bar_top+'px';
			this.src = '/gallery-4/images/arrow_down_small.png'
		}
	});

});

function toggleGalleries() {
	if ( $om('gallery_opts').style.visibility == 'visible' ) {
		$om('gallery_opts').style.visibility = 'hidden';
		$om('toggleShow').innerHTML = 'More';
	} else {
		$om('gallery_opts').style.visibility = 'visible';
		$om('toggleShow').innerHTML = 'Hide';
	}
}


window.onload = function () 
{
	// must wait for the images to load to get the offsetheight
	os_ht = $om('gallery_opts').offsetHeight;
	// want to put the galleries in the place to 
	gal_top = win_ht-134-os_ht+16;
	$om('gallery_opts').style.top  = gal_top+'px';
	// x position is half window width - center - then what ever I want to add to get the the correct location
	gal_left = (win_wid /2)+80;
	$om('gallery_opts').style.left = gal_left+'px';
	//$om('gallery_opts').style.top = +'px';
};


addDOMLoadEvent( function() {
	// need to step one place to avoid the 0 returning false
	thumbRoller = new classSlideMe('thumb_container');
	thumbRoller.init();
	thumbRoller.num_steps = 12;
	var numb_thumbs = 0
	while( $om('thumb_' + numb_thumbs) ) {
		numb_thumbs++;	
	}
	
	
	thumbRoller.numThumbs = numb_thumbs;
	
	thumbRoller.presentLeft = 1;
	thumbRoller.distance = 120;
	// max left should be a number 
	thumbRoller.allowRoll = true;
	thumbRoller.pause = function() 
	{
		thumbRoller.allowRoll = false;
		var timeoutTime = ( (thumbRoller.num_steps * 30) + 100 ); // #steps * 30 ms + 100 ms
		setTimeout( function() {
			thumbRoller.allowRoll = true;
		}, timeoutTime);
		
	}
	addEvent( $om('prev_thumb'), 'click', function () { rollLeft();} );// add roll left to the arrow
	addEvent( $om('next_thumb'), 'click', function () { rollRight();} );// add roll left to the arrow
	browse_images.imgArray = Array(); 
	browse_images.maxImg = numb_thumbs; 
	browse_images.count = 0;
	browse_images.imgArray = Array();
	for ( var i=0; i<numb_thumbs; i++ ) {
		browse_images.imgArray[i] = Array($om('thumb_'+i).src, $om('thumb_'+i).alt) ;
		addEvent( $om('thumb_'+i), 'click', function () { switch_images(this.src, this.alt);} );// add roll left to the arrow		
	}
	// add the functions onto the browse buttons
	addEvent( $om('browse_next'), 'click', function() { browse_images('next'); });
	addEvent( $om('browse_back'), 'click', function() { browse_images('back'); });
	// this  loop stops the propagation of the link
	var thumbCount = 0;
	while ( $om('thumb_'+ thumbCount )  ){
		addEvent( $om('thumb_'+ thumbCount), 'click', function(ev){
			if (ev.stopPropagation ) {			
				ev.stopPropagation();
				ev.preventDefault();
			} else {
				var ev = window.event;
				ev.cancelBubble = true; 
			}
		});
		thumbCount++;	
	} // end while
	
	addEvent( $om('postcard_link'), 'click', function(ev) 
	{
		if (ev.stopPropagation ) {			
				ev.stopPropagation();
				ev.preventDefault();
		} else {
				var ev = window.event;
				ev.cancelBubble = true; 
		}
		var currentURL = 0;
		var current_gallery = urlencode( window.location.toString().split(/\//)[4] );
		// if the current gallery is empty assign it the default - which is cat_n
		// we default to Cat_N but this should never happen assuming the redirect happens in the PHP
		(current_gallery == '') ? ( current_gallery = 'Cat_N' ) : ( current_gallery );
		var current_image = urlencode( $om('main_image').src.split(/\//)[5] );
		//alert( current_image + "\n" + current_gallery);
		//return;
		window.location = '/gallery-4/postcard/?im=' + current_image + '&link=' + current_gallery + '/' + current_image;
										 
	});
});

function switch_images(src, title)
{
	$om('main_image').src = src;
	$om('img_title').innerHTML = title;
}
// this func allows someone to view images without the bar open
// it needs to know which way to got - and the array of images
function browse_images(way)
{
	// browse_images.count is set in the on dom ready. PHP echos the num thumbs instead of counting with js
	// doIt means - should I change the image or not
	var doIt = false;
	doIt = false;
	if (way == 'next') {
		( browse_images.count < (browse_images.maxImg-1) ) ? (doIt = true) : (doIt = false);
		( doIt ) ? (browse_images.count++ ) :( browse_images.count );
	} 
	if (way == 'back') {
		( browse_images.count > 0 ) ? ( doIt = true ) : ( doIt = false );
		( doIt ) ? ( browse_images.count-- ) : ( browse_images.count );
	}

	if ( doIt ) {
		var src = browse_images.imgArray[browse_images.count][0];
		var title = browse_images.imgArray[browse_images.count][1];
		$om('main_image').src = src;
		$om('img_title').innerHTML = title;
	}
}

/*
	steps
	when someone clicks on the button it will show them the next thumb nail. 
	have to know the ends of each side
	have to know where we are at this moment
	so the class needs a variable  that holds the pressent position

 */
function rollLeft() 
{
	// check for multiple clicks
	if ( !thumbRoller.allowRoll ) { //  if allow roll is false
		return;
	}
	// disallow another click for a moment
	thumbRoller.pause();
	// roll left actually means that the thumbs move to the right
	var goTo = (thumbRoller.presentLeft + thumbRoller.distance);
	thumbRoller.rollIt('', goTo);
	thumbRoller.presentLeft = goTo;

}
function rollRight() 
{
	// check for multiple clicks
	if ( !thumbRoller.allowRoll ) { //  if allow roll is false
		return;
	}
	// roll left actually means that the thumbs move to the left
	var goTo = (thumbRoller.presentLeft - thumbRoller.distance);
	thumbRoller.rollIt('', goTo);
	thumbRoller.presentLeft = goTo;

}