/*********************
 * Gallery
 * 
 * @author 		Tommy Lacroix <tlacroix@nuagelab.com>
 * @version 	1.0.20101114
 ********************/
jQuery.gallery = {
		section:0,
		index:0,
		animating:false,
		overview:[],
		categories:[],
		categoryImages:[],
		
		init: function() {
			var maxLeft = 24;

			// Parse url
			this.section = 0; 	// Default to overview
			this.picture = 0;	// Default to first picture
			var url = String(document.location);
			if (url.indexOf('#') != -1) {
				url = url.substr(url.indexOf('#')+1);
				if (url != '') {
					if (url.indexOf('/') != -1) {
						this.section = parseInt(url.substr(0,url.indexOf('/')));
						this.picture = parseInt(url.substr(url.indexOf('/')+1));
					} else {
						this.section = url;
					}
				}
			}
			
			// Hide cities if category is 0 (overview)
			if (this.section == 0) {
				$('#menu-categories-container').hide();
			}

			// Parse data
			this.overview = [];
			this.categories = [];
			var idx = 1;
			var num = 0;
			for (var s in galleryData) {
				// Create menu item
				var hasContent = (galleryData[s].length > 0);
				this.categories[idx] = s;
				spanId = (num++ <= maxLeft) ? '#menu-left' : '#menu-right';
				var linkOpen = '';
				var linkClose = '';
				if (hasContent) {
					linkOpen = '<a id="menu-'+idx+'" href="#'+idx+'">';
					linkClose = '</a>';
				}
				$(spanId).append(linkOpen+s+linkClose+'<br/>');
				
				if (hasContent) {
					// Hook menu
					$('#menu-'+idx).click(function(){
						var id = $(this).attr('id');
						id = id.substr(id.indexOf('-')+1);
						jQuery.gallery.gotoSection(id,0);
					});
					
					// Load pictures
					this.categoryImages[idx] = galleryData[s];
					for (var i=0;i<galleryData[s].length;i++) {
						if (galleryData[s][i].overview) {
							this.overview.push(galleryData[s][i]);
						}
					}
					
					// Increment
					idx++;
				}
			}
			this.categoryImages[0] = this.overview;
			
			// Hook overview and city menus
			$('#menu-overview').click(function(){
				jQuery.gallery.gotoSection(0,0);
			});
			$('#menu-categories').click(function(){
				jQuery.gallery.gotoSection(1,0);
			});
			
			// Hook paging controls
			$('#pagePrev').attr('href','javascript:void(0)');
			$('#pageNext').attr('href','javascript:void(0)');
			$('#pagePrev').click(function(){
				jQuery.gallery.gotoPrevious();
			});
			$('#pageNext').click(function(){
				jQuery.gallery.gotoNext();
			});
			$('#container-image').click(function(){
				jQuery.gallery.gotoNext();
			});
			// @todo
			
			// Go to first section
			this.gotoSection(this.section, this.picture);
		},
		
		gotoSection: function(section, picture) {
			if (jQuery.gallery.animating) return;
			if (picture == undefined) picture = 0;
			
			// Get information
			var info = this.categoryImages[section][picture];
			//alert('Section='+section+'; Picture='+picture+'; Info='+info);

			// Load direct data
			$('#container-image img').removeClass('showing');
			$('#container-image img').addClass('hiding');
			$('#container-image').append('<img class="showing" style="display:none;" src="'+info.href+'" />');
			$('#container-image img').attr('title', info.title);
			$('#container-image img').attr('alt', info.title);
			$('#mainContent-image .specs').html(info.title+'<br/>'+info.desc);
			
			// Update paging
			$('#pageCurrent').text(picture+1);
			$('#pageMax').text(this.categoryImages[section].length);
			
			// Update menu
			$('#sidebar .menu-on').each(function() {
				$(this).removeClass('menu-on');
			});
			if (section == 0) {
				$('#menu-overview').addClass('menu-on');
				$('#menu-categories-container').slideUp();
			} else {
				$('#menu-categories').addClass('menu-on');
				$('#menu-'+section).addClass('menu-on');
				$('#menu-categories-container').slideDown();
			}
			
			// Trigger transition
			if ($('#container-image img.hiding').length > 0) {
				// Hide before showing
				jQuery.gallery.animating = true;
				$('#container-image img.hiding').fadeOut('fast', function(){
					$(this).remove();
					$('#container-image img.showing').fadeIn('fast', function(){
						$(this).removeClass('showing');
						jQuery.gallery.animating = false;
					});
				});
			} else {
				// Nothing to hide, show right away
				jQuery.gallery.animating = true;
				$('#container-image img.showing').fadeIn('fast', function(){
					$(this).removeClass('showing');
					jQuery.gallery.animating = false;
				});
			}
			
			// Update location
			document.location = '#'+section+'/'+picture;
			
			// Save cursor, for next/previous buttons
			this.section = section;
			this.picture = picture;
		},
		
		gotoPrevious: function() {
			var section = this.section;
			var picture = this.picture;
			if (picture == 0) {
				if (section == 0) {
					picture = this.categoryImages[0].length-1;
				} else if (section > 1) {
					section--;
					picture = this.categoryImages[section].length-1;
				} else {
					section = this.categoryImages.length-1;
					picture = this.categoryImages[section].length-1;
				}
			} else {
				picture--;
			}
			this.gotoSection(section, picture);
		},
		
		gotoNext: function() {
			var section = this.section;
			var picture = this.picture;
			if (picture >= this.categoryImages[section].length-1) {
				if (section < this.categoryImages.length-1) {
					if (section == 0) {
						picture = 0;
					} else {
						section++;
						picture = 0;
					}
				} else {
					section = 1;
					picture = 0;
				}
			} else {
				picture++;
			}
			this.gotoSection(section, picture);
		}
}
$(document).ready(function(){
	jQuery.gallery.init();
});