var slides;
var thumbs;
var num_thumb_pages;
var cur_thumb_page = 1;
var num_slides;
var cur_slide = 0;
Event.observe(window,'load',function() {
	
	// init slides
	slides = $$('.slide');
	num_slides = $(slides).size();
	$('slide_left').observe('click', slide_left);
	$('slide_left').observe('mouseover', function() { $('slide_left').addClassName('slide_hover'); });
	$('slide_left').observe('mouseout', function() { $('slide_left').removeClassName('slide_hover'); });
	$('slide_right').observe('click', slide_right);
	$('slide_right').observe('mouseover', function() { $('slide_right').addClassName('slide_hover'); });
	$('slide_right').observe('mouseout', function() { $('slide_right').removeClassName('slide_hover'); });
	init_slides_resize();
	
	// init thumbs
	thumbs = $$('#image_gallery .gallery_thumb');
	num_thumb_pages = Math.ceil($(thumbs).size() / 8);
	init_thumbs_resize();
	$$('#image_gallery .gallery_thumb').each(function(elem) {
		if(!$(elem).hasClassName('gallery_thumb_current')) {
			$(elem).setStyle({ opacity: 0.7 });
		}
	});
	$$('#image_gallery .gallery_thumb').each(function(elem) {
		$(elem).observe('mouseover', function() {
		   $(this).addClassName('gallery_thumb_hover');
		   $(this).setStyle({ opacity: 1.0 });
		});
	});
	$$('#image_gallery .gallery_thumb').each(function(elem) {
	 	$(elem).observe('mouseout', function() {
	 		$(this).removeClassName('gallery_thumb_hover');
	 		if(!$(this).hasClassName('gallery_thumb_current')) {
	 			$(this).setStyle({ opacity: 0.7 });
	 		}
	 	});
	});
	$(thumbs).each(function(elem) {
		$(elem).observe('click',init_thumb_click);
	});
	$('gallery_thumbs_left').observe('click', slide_thumbs_left);
	$('gallery_thumbs_left').observe('mouseover', function() { $('gallery_thumbs_left').addClassName('thumbs_hover'); });
	$('gallery_thumbs_left').observe('mouseout', function() { $('gallery_thumbs_left').removeClassName('thumbs_hover'); });
	$('gallery_thumbs_right').observe('click', slide_thumbs_right);
	$('gallery_thumbs_right').observe('mouseover', function() { $('gallery_thumbs_right').addClassName('thumbs_hover'); });
	$('gallery_thumbs_right').observe('mouseout', function() { $('gallery_thumbs_right').removeClassName('thumbs_hover'); });
	

});

function init_slides_resize() {
	$$('#image_gallery .slide img').each(function(elem) {
		var w = $(elem).getWidth();
		var h = $(elem).getHeight();
		if( (w/h) > (500 / 300) ) {
			$(elem).width = 500;
			var new_h = h/w * 500;
			var margin = Math.ceil((300 - new_h) / 2) + 'px';
			$(elem).setStyle({marginTop: margin});
		} else {
			$(elem).height = 300;
		}
	});
}

function init_thumbs_resize() {
	$$('#image_gallery .gallery_thumb img').each(function(elem) {
		var w = $(elem).getWidth();
		var h = $(elem).getHeight();
		if( (w/h) > 1 ) {
			$(elem).width = 60;
			$(elem).setStyle({ marginTop: ((60 - $(elem).getHeight()) / 2) + 'px' });
		} else {
			$(elem).height = 60;
		}
	});
}

function slide_left() {
	if(cur_slide > 0) {
		switch_slide(cur_slide - 1);
	}
}

function slide_right() {
	if(cur_slide < (num_slides-1)) {
		switch_slide(cur_slide + 1);
	}
}

function switch_slide(next_index) {
	
	var this_slide = $(slides[cur_slide]);
	var next_slide = $(slides[next_index]);
	
	// move slide
	if(next_index < cur_slide) {
		new Effect.Move(this_slide, { x: 500, duration: 0.3 });
		$(next_slide).setStyle({ left: '-500px' });
		new Effect.Move(next_slide, { x: 500, duration: 0.3 });
	} else if(next_index > cur_slide) {
		new Effect.Move(this_slide, { x: -500, duration: 0.3 });
		$(next_slide).setStyle({ left: '500px' });
		new Effect.Move(next_slide, { x: -500, duration: 0.3 });
	}
	
	// update title
	$('gallery_title').update($(next_slide).childNodes[0].childNodes[0].alt);
	
	cur_slide = next_index;
	
	
	// update navs
	if(cur_slide == 0) {
		$('slide_left').addClassName('slide_off');
	} else {
		$('slide_left').removeClassName('slide_off');
	}
	if((cur_slide + 1) == num_slides) {
		$('slide_right').addClassName('slide_off');
	} else {
		$('slide_right').removeClassName('slide_off');
	}
	
	// update thumbs section
	update_thumbs();
	move_thumb_container(cur_slide);
	
}

function update_thumbs() {
	$$('.gallery_thumb_current').invoke('removeClassName', 'gallery_thumb_current');
	$$('.gallery_thumb').each(function(elem) { $(elem).setStyle({ opacity:0.6 }); });
	$(thumbs)[cur_slide].addClassName('gallery_thumb_current');
	$(thumbs)[cur_slide].setStyle({ opacity: 1.0 });
}

function init_thumb_click(e) {
	var el = Event.element(e);
	if(!$(el).hasClassName('gallery_thumb')) {
		el = el.parentNode;
	}
	var next_index = $(thumbs).indexOf(el);
	if(next_index != cur_slide) {
		switch_slide(next_index);
	}
}

function move_thumb_container(indx) {
	// get page
	var page = Math.ceil( (indx+1) / 8 );
	if(page != cur_thumb_page) {
		// move thumbs left or right
		var diff = (cur_thumb_page - page) * 560;
		new Effect.Move($('gallery_thumbs_inner_table'), { x: diff, duration: 0.3 });
		cur_thumb_page = page;
		if(cur_thumb_page == 1) {
			$('gallery_thumbs_left').addClassName('gallery_thumbs_off');
		} else {
			$('gallery_thumbs_left').removeClassName('gallery_thumbs_off');
		}
		if(cur_thumb_page == num_thumb_pages) {
			$('gallery_thumbs_right').addClassName('gallery_thumbs_off');
		} else {
			$('gallery_thumbs_right').removeClassName('gallery_thumbs_off');
		}
	}
}

function slide_thumbs_left() {
	if(cur_thumb_page > 1) {
		new Effect.Move($('gallery_thumbs_inner_table'), { x: 560, duration: 0.3 });
		cur_thumb_page--;
		if(cur_thumb_page == 1) {
			$('gallery_thumbs_left').addClassName('gallery_thumbs_off');
		}
		$('gallery_thumbs_right').removeClassName('gallery_thumbs_off');
	}
}

function slide_thumbs_right() {
	if(cur_thumb_page < num_thumb_pages) {
		new Effect.Move($('gallery_thumbs_inner_table'), { x: -560, duration: 0.3 });
		cur_thumb_page++;
		if(cur_thumb_page == num_thumb_pages) {
			$('gallery_thumbs_right').addClassName('gallery_thumbs_off');
		} 
		$('gallery_thumbs_left').removeClassName('gallery_thumbs_off');
	}
}