// JavaScript Document
	var anim_scroll	= null;
	var scroll_thumb_height = 98;
	var scroll_thumbs_height = 479;
	var scroll_thumbs_offset = 11;
	var scroll_thumbs_per_page = 5;
	var scroll_mode = 1;
	
	//move the thumbnail scroller up one page
	var scroll_up = function() {
		if(anim_scroll != null && anim_scroll.state != 1) { anim_scroll.jumpTo(1);}

		var offset = $('thumb_panel').cumulativeOffset();
		var parent_offset = $('thumb_container').cumulativeOffset();
		var top_start = offset.top - parent_offset.top;
		var top_end = top_start + ((scroll_mode == 0) ? scroll_thumb_height : scroll_thumbs_height + scroll_thumbs_offset);
		var top_max = 0;
		if(top_end <= top_max) { do_scroll(top_start, top_end); }
		return false;
	}
	
	//move the thumbnail scroller down one page
	var scroll_down = function() {
		if(anim_scroll != null && anim_scroll.state != 1) { anim_scroll.jumpTo(1);}
		
		var offset = $('thumb_panel').cumulativeOffset();
		var parent_offset = $('thumb_container').cumulativeOffset();
		var dims = $('thumb_panel').getDimensions();
		var top_start = offset.top - parent_offset.top;
		var top_end = top_start - ((scroll_mode == 0) ? scroll_thumb_height : scroll_thumbs_height + scroll_thumbs_offset);
		var top_min = (scroll_mode == 0) ? (scroll_thumbs_height - dims.height) : - Math.ceil(dims.height / scroll_thumbs_height) * scroll_thumbs_height;
		if(top_end >= top_min) { do_scroll(top_start, top_end); }
		return false;
	}
	
	var scroll_prev = function(evt) {
		if($('thumb_panel')) {
			if(image_index >= 1) {
				image_index = image_index - 1;
				scroll_to(image_index);
				image_select($('thumb_panel').select('a')[image_index]);
			}
		}
		evt.stop();
	}
	
	var scroll_next = function(evt) {
		if($('thumb_panel')) {
			var thumbs = $('thumb_panel').select('A');
			if(image_index < (thumbs.length-1)) {
				image_index = image_index + 1;
				scroll_to(image_index);
				image_select($('thumb_panel').select('a')[image_index]);
			}
		}
		evt.stop();
	}
	
	var scroll_to = function(n) {
		if($('thumb_panel')) {
			var thumbs = $('thumb_panel').select('A');
			var page = Math.floor(n / scroll_thumbs_per_page) + 1; 
			var pages = Math.ceil(thumbs.length / scroll_thumbs_per_page);
			//n = n - 1;
			if(page > 0 && page <= pages) {
				var target = thumbs[n];
				var offset = $('thumb_panel').cumulativeOffset();
				var parent_offset = $('thumb_container').cumulativeOffset();
				var dims = $('thumb_panel').getDimensions();
				var top_min = (scroll_mode == 0) ? (scroll_thumbs_height - dims.height) : - Math.ceil(dims.height / scroll_thumbs_height) * scroll_thumbs_height;
				
				var top_start = offset.top - parent_offset.top;
				//var top_end = 0 - ((n * scroll_thumb_height));
				var top_end = 0 - ((page-1) * (scroll_thumbs_height+scroll_thumbs_offset));
				
				//round top_end to nearest thumb_height (some browsers are off by a pixel or two)
				//top_end = top_end - (top_end % scroll_thumb_height);
	
				if(top_end >= top_min) { 
					do_scroll(top_start, top_end); 
				} else {
					do_scroll(top_start, top_min); 
				}
			}	
		}
		return false;
	}
	
	var do_scroll = function(start, end) {
		anim_scroll = new Animator({duration: 750, transition: Animator.makeElastic(0.5)});
		anim_scroll.addSubject(new NumericalStyleSubject($('thumb_panel'), 'top', start, end));
		anim_scroll.addSubject(new NumericalStyleSubject($('scroll_lines'), 'top', start, end));
		anim_scroll.play();
	}
	
	var init_scrollbar = function() {
		if($('scroll_up') && $('scroll_down')) { 
			$('scroll_up').observe('click', scroll_up);
			$('scroll_down').observe('click', scroll_down);
			
			var dims = $('thumb_panel').getDimensions();
			switch(scroll_mode) {
				case 0:
					$('scroll_lines').setStyle({height: dims.height + 'px'});
					break;
				case 1:
					$('scroll_lines').setStyle({height: (Math.ceil(dims.height / scroll_thumbs_height) * scroll_thumbs_height) + 'px'});
					break;
			} 
		}
	}
	
	Event.observe(window, 'load', init_scrollbar);
	
	var init_prevnext_buttons = function() {
		if($('button_prev') && $('button_next')) {
			$('button_prev').observe('click', scroll_prev);
			$('button_next').observe('click', scroll_next);
		}
	}
	Event.observe(window, 'load', init_prevnext_buttons);
	
	
	var image_select_first = '';
	var image_select_force = false;
	var image_index = 1;
	
	var set_image = function(image_name) {
		//this needs to load the large image into view
		//$(image_placeholder).innerHTML = image_name;
		if($('view_attachment')) {
			$('view_attachment').innerHTML = "";	
		}
		
		if($('photo_'+image_name)) {
			$('photo_large').src = $('photo_'+image_name).src;
			$('photo_large').alt = $('photo_'+image_name).alt;
			$('photo_large').title = $('photo_'+image_name).title;
			get_image_attachment($('photo_'+image_name).src);
			//console.log('IMG preload');
		} else if($('thumb_'+image_name)) {
			$('photo_large').src = $('thumb_'+image_name).src.replace("/thumbs/","/large/");
			$('photo_large').alt = $('thumb_'+image_name).alt;
			$('photo_large').title = $('thumb_'+image_name).title;
			get_image_attachment($('thumb_'+image_name).src.replace("/thumbs/","/large/"));
			//console.log('IMG ondemand');
		}
	}

	var get_image_attachment = function(image_src) {
		var url = '/photos/ajax/attachment/';
		var params = {parameters: {image_src: image_src}};
		new Ajax.Updater('view_attachment', url, params); 
	}

	var init_url_image_select = function() {
		//if the url contains a hash (#some_text), then load the image that matches
		if(image_select_force || !document.location.hash) {
			scroll_to(image_index);
			set_image(image_select_first); 
		} else if(document.location.hash) {
			set_image(document.location.hash.substring(1));
			image_index = $('thumb_' + document.location.hash.substring(1)).up().previousSiblings().size();
			scroll_to(image_index);			
		}
	}
	Event.observe(window, 'load', init_url_image_select);
	
	var init_link_image_select = function() {
		if($('thumb_panel')) {
			$('thumb_panel').select('a').each(function(elem) {elem.observe('click', link_image_select);});
		}
	}
	Event.observe(window, 'load', init_link_image_select);
	
	var link_image_select = function(evt) {
		image_index = this.previousSiblings().size();
		image_select(this);
		evt.stop();	//cancel the click event
	}
	
	var image_select = function(elem) {
		//return number of previous children (index of thumb within tumb_panel)
		var idx = elem.previousSiblings().size();
		//the link that was clicked
		var loc = elem.href.lastIndexOf('/') + 1;	//location of the last slash
		var url = elem.href.substring(0, loc);		//the album url (sans image name)
		var hash = elem.href.substring(loc);		//the image name
		//if the above url matches the current page, the document will not reload
		set_image(hash);  //load the image that matches
		document.location.href = url + '#' + hash;	//change the page location
	}