//<script>

// <myBackground>
var myLoading = new Class({
	initialize: function() {
		this.element = $('loading');
	},
	// Hide the "loading" logo
	hide: function() {
		this.element.fade('out');
	},
	// Show the "loading" logo 
	show: function() {
		this.element.fade('in');
	}
});
// </myBackground>

// <myBackground>
var myBackground = new Class({
	initialize: function() {
		this.element = $('background');
		this.height = this.element.getSize().y;
	},
	// Move the layer to a centered (vertical) position 
	center: function() {
		if ( ! window.getHeight() ) {
			return;
		}

		var currentPosY = this.element.getTop();
		var newPosY = Math.round((window.getHeight() - this.height) / 2);

		new Fx.Morph(this.element, {duration: 'long', transition: Fx.Transitions.Elastic.easeOut}).start({'top': [currentPosY, newPosY]});
	},
	// Center (vertical) and display the layer
	display: function() {
		var posY = 0;

		if ( window.getHeight() ) {
			posY = Math.round((window.getHeight() - this.height) / 2);
		}

		this.element.setStyle('top', posY);
		this.element.setOpacity(1);
	}
});
// </myBackground>

// <myGallery>
var myGallery = new Class({
	initialize: function() {
		this.element = $('gallery');
		this.elementAlbum = $('album');
		this.width = this.element.getSize().x;
		this.galleries = null;

		// Some one-time display stuff
		this.elementAlbum.fade('hide');

		var posX = window.getWidth() ? Math.round((window.getWidth() - this.width) / 2) : 0;
		this.element.setStyle('left', posX);
	},
	// Move the layer to a centered (horizontal) position
	center: function() {
		if ( ! window.getWidth() ) {
			return;
		}

		var currentPosX = this.element.getTop();
		var newPosX = Math.round((window.getWidth() - this.width) / 2);

		new Fx.Morph(this.element, {duration: 'long', transition: Fx.Transitions.Circ.easeInOut}).start({'left': [currentPosX, newPosX]});
	},
	// Display the gallery thumbnails
	display: function() {
		// Generate the content
		this.elementAlbum.set('html', '');

		this.galleries.each(function(item, index) {
			this.elementAlbum.set('html', this.elementAlbum.get('html'), this.getGalleryHTML(index, item))
		}.bind(this));

		this.elementAlbum.set('html', this.elementAlbum.get('html'), '<div class="clear">&nbsp;</div>');

		// Display the content
		this.element.setStyle('visibility', 'visible');
		loading.hide();
		this.elementAlbum.fade('in');

		new Tips($$('.toolTipAlbum'), { timeOut: 700, maxTitleChars: 50, maxOpacity: .9 });
		new MooScroll({ selector: '#album', increment: 380, scrollControlsYClass: 'scrollControlsYAlbum' });
	},
	// Generate the HTML code to display the gallery thumbnails
	getGalleryHTML: function(index, item) {
		var description = item.description;

		if ( description == '' ) {
			description = ' ';
		} else if ( description.length > 80 ) {
			description = description.substr(0, 74) + '&nbsp;[...]';
		}

		html = '<div class="item">';
		html += '<h1>' + item.name + '</h1>';
		html += '<a href="javascript:gallery.openGallery(' + index + ')"><img title="' + item.name + '" rel="' + description + '" class="toolTipAlbum" src="' + item.thumbnail + '" width="120" height="120" alt="" /></a>';
		html += '<br/><span>';

		if ( item.date ) {
			html += item.date + ' / ';
		}

		html += item.total + ' pictures</span>';
		html += '</div>';

		return html;
	},
	// Get the list of galleries
	load: function() {
		new Request.JSON({onComplete: function(data){ this.galleries = data; this.sort(); }.bind(this)}).get('getGalleries.php5');
	},
	// Get the thumbnails related to the selected gallery
	openGallery: function(index) {
		thumbnail.load(this.galleries[index]);
	},
	// Sort the galleries
	sort: function(type) {
		switch ( type ) {
			// By name
			case 1:
				this.galleries.sort(function(a, b) {
					var x = a.name.toLowerCase();
    				var y = b.name.toLowerCase();
    				return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
				});
			break;

			// By total pictures
			case 2:
				this.galleries.sort(function(a, b) { return b.total - a.total });
			break;

			// By date
			default:
				this.galleries.sort(function(a, b) {
					var x = isNaN(parseInt(a.date)) ? '000000' : parseInt(a.date.replace('-', '').substr(0, 6));
					var y = isNaN(parseInt(b.date)) ? '000000' : parseInt(b.date.replace('-', '').substr(0, 6));

					return y - x;
				});
		}

		// Display the new sorted data after a smooth visual transition
		new Fx.Morph(this.elementAlbum, {duration: 'shot', onComplete: function() { this.display(); }.bind(this)}).start({'opacity': [1, 0]});
	}
});
// </myGallery>

// <myThumbnail>
var myThumbnail = new Class({
	initialize: function() {
		this.element = $('thumbnail');
		this.elementPreview = $('preview');
		this.gallery = null;
		this.thumbnails = null;
		this.displayTimer = null;

		this.expend();
	},
	// Display the thumbnails
	display: function() {
		// Make sure all images are loaded before displaying anything
		img = $$('img');

		for ( i = 0; i < img.length; i++ ) {
			if ( ! img[i].complete ) {
				// It's not the case, try again later
				this.display.delay(1000, this);
				return;
			}
		}

		// Display the content
		loading.hide();
		new Fx.Morph(this.element, {duration: 'normal', transition: Fx.Transitions.Sine.easeOut}).start({'opacity': [0, 1]});

		new Tips($$('.toolTipThumbnail'), { timeOut: 700, maxTitleChars: 50, maxOpacity: .9 });
		new MooScroll({ selector: '#preview', increment: 380, scrollControlsYClass: 'scrollControlsYPreview' });
		new SexyLightBox({ color: 'black', imagesdir: '_include/img/sexyimages', OverlayStyles:{'background-color':'#57757f'} });
	},
	// Expend the layer to the new screen width
	expend: function(animation) {
		if ( ! window.getWidth() ) {
			return;
		}

		var newWidth = window.getWidth() - 30;

		if ( animation) {
			var currentWidth = this.elementPreview.getStyle('width').toInt();

			new Fx.Morph(this.elementPreview, {duration: 'short', transition: Fx.Transitions.Circ.easeInOut}).start({'width': [currentWidth, newWidth]});
		} else {
			this.elementPreview.setStyle('width', newWidth);
		}
	},
	// Generate the thumbnails
	generateContent: function() {
		// Generate the content
		this.elementPreview.set('html', '&nbsp;');

		$('thumbnailName').set('html', this.gallery.name);
		$('thumbnailDescription').set('html', this.gallery.description);

		this.thumbnails.each(function(item, index) {
			this.elementPreview.set('html', this.elementPreview.get('html'), this.getThumbnailHTML(index, item))
		}.bind(this));

		this.elementPreview.set('html', this.elementPreview.get('html'), '<div class="clear">&nbsp;</div>');

		// Display the content
		this.display();
	},
	// Generate the HTML code to display the thumbnails
	getThumbnailHTML: function(index, item) {
		var tooltipText =  'Dimensions: ' + item.width + ' x ' + item.height + '<br />Size: ' + item.size + ' kB';

		html = '<div class="item">';
		html += '<a href="' + item.file + '" title="<b>' + item.name + '</b><br />' + item.description + '" rel="sexylightbox[' + this.gallery.path + ']"><img title="' + item.name + '" rel="' + tooltipText + '" class="toolTipThumbnail" src="' + item.thumbnail + '" width="120" height="120" alt="" /></a>';
		html += '</div>';

		return html;
	},
	// Hide the layer
	hide: function() {
		this.element.fade('out');
	},
	// Get the list of thumbnails
	load: function(gallery) {
		this.gallery = gallery;

		loading.show();

		new Request.JSON({onComplete: function(data){ this.thumbnails = data; this.generateContent(); }.bind(this)}).get('getGalleries.php5?path=' + this.gallery.path);
	}
});
// </myThumbnail>