var setup = function(){
	menu();
};

$('document').ready(setup);

function loadPage(page_name){
	var page_location = 'page_' + page_name;
	var content = $('#page_content');		
	document.location = page_name + '.html';
	
	document.title = 'Cirque du Cabaret';
	//content.load(page_name + '.html',
	//	function callback(text, status, ajax){}
	//);
};
function menu(){
	$('#nav').children('img').each(setupItem);

	function setupItem(){
		var item = $(this);
		item.addClass('menu');
		item.bind('mouseenter', {img: item}, mouseEvent);
		item.bind('mouseleave', {img: item}, mouseEvent);		
		item.bind('click', {img: item}, pageEvent);		
		return true;
	}
	
	function mouseEvent(event){
		var item = event.data.img;
		var img = item.attr('src');
		var ishover = img.indexOf('hover');
		var src = '';
		if(ishover > 0){
			src = img.replace(/-hover/g, '');
		}else{
			src = img.replace(/.jpg/g, '-hover.jpg');
		}
		item.attr('src', src);
	};
	
	function pageEvent(event){
		var item = event.data.img;
		loadPage(item.attr('alt'));
	};
};


function showGallery(){
	var name = $(this).attr('id');
	var gallery_ref = name + '_gallery';

	$('body').append('<div id="fade" class="popup"></div>');
	$('body').append('<div id="' + gallery_ref + '"></div>');
	var gallery = $('#' + gallery_ref);
	$('#fade').height($('body').height());

	gallery.append('<div class="gallery"></div >');	

	var area = gallery.children('.gallery');
	
	area.append('<div class="close menu">close</div>');
	area.children('.close').bind('click', {gallery: gallery_ref}, eventClose);

	
	var top =  parseInt(($('body').height() - area.height()) / 2);
	area.css('top', top);
	
	var left =  parseInt(($('body').width() - area.width()) / 2);
	area.css('left', left);
	
	area.append('<div class="preview"></div>');
	area.append('<span class="back"> &lt;&lt; </span>');
	area.append('<span class="spacer">&nbsp;</span><span class="forward"> &gt;&gt; </span>');
	
	area.children('.back').bind('click', {gallery: gallery_ref}, eventBack);
	area.children('.forward').bind('click', {gallery: gallery_ref}, eventForward);	
	
	area.append('<ol class="listing"></ol>');
	area.children('.preview').append('<div class="title"></div>');
	
	var content = $('#page_content');	
	var listing = 'images/gallery/' + name + '.gallery';
	$.ajax({
		   url: listing,
		   complete: parseGallery
		   }
	);	
	
	var list = 	area.children('ol.listing');

	list.hide();

	function parseGallery(response, status){
		var images = response.responseText.split('\n');
		for(var i = 0; i < images.length; i++){
			var img = images[i].split('|');
			
			list.append('<li id="' + img[0] + '">' + img[1] + '</li>');
		}
		
		area.children('.preview');
		var item = list.children('li:first');
		item.addClass('chosen');
		displayImage(item.attr('id'), item.attr('alt'));
	}
	
	function eventBack(event){
		var chosen = $('#' + event.data.gallery).children('.gallery').children('ol.listing').children('li.chosen');
		var next = null;
		
		if(chosen.length == 0){
			next = $('#' + event.data.gallery).children('.gallery').children('ol.listing').children('li:first');
		}
		else{
			chosen.removeClass('chosen');
			next = chosen.prev('li');
		}
		
		next.addClass('chosen')
		displayImage( next.attr('id'), next.attr('alt') );
	};
	function eventForward(event){
		var chosen = $('#' + event.data.gallery).children('.gallery').children('ol.listing').children('li.chosen');
		var next = null;
		if(chosen.length == 0){
			next = $('#' + event.data.gallery).children('.gallery').children('ol.listing').children('li:first');
		}
		else{
			chosen.removeClass('chosen');
			next = chosen.next('li');
		}
		next.addClass('chosen')
		displayImage( next.attr('id'), next.attr('alt') );		
	};
	
	function displayImage(image, title){
		area.children('.preview').css('background', ' url(images/gallery/' + image + ') no-repeat top center');
		area.children('.preview .title').text(title);
	};
	
	function eventClose(event){
		event.stopPropagation();
		$('#' + event.data.gallery).remove();
		$('#fade').remove();
		return true;
	};
};