/*
 * Galeri, version 0.1
 * (c) 2007 Fajran Iman Rusadi.
 *
 * Galeri is freely distributable under the terms of an MIT-style license.
 *
 */

var Galeri = Class.create();
Galeri.prototype = {

	// Variables
	galleryName: null,
	currentDirectory: null,
	directoryIndex: 0,

	// Init
	initialize: function() {
		this.getInitialData();
	},

	// Utilities

	parseJSON: function(x) {
		var obj = eval('(' + x.responseText + ')');
		return obj.data;
	},

	showLoader: function(id) {
		if (id == undefined) {
			id = 'load';
		}
		$(id).innerHTML = '<div id="loader"><img src="images/loader4.gif"/> <span>loading..</span></div>';
	},

	hideLoader: function(id) {
		if (id == undefined) {
			id = 'load';
		}
		$(id).innerHTML = '';
	},

	// Initial data

	getInitialData: function() {
		var obj = this;
		this.showLoader('directories');
		new Ajax.Request('backend.php', {
			method: 'post',
			parameters: {
				s: 'init'
			},
			onComplete: function(x) { 
				obj.getInitialDataDone(x);
			}
		});
	},

	getInitialDataDone: function(x) {
		var data = this.parseJSON(x);
		this.galleryName = data.name;

		this.hideLoader('directories');
		this.initDirectories();
		this.showDirectory('/');
	},
	
	initDirectories: function() {
		var txt = '';
		var i;

		var name = this.galleryName;
		//$('title').innerHTML = name;
		//document.title = name;

		txt = '<ul><li><span id="root" onclick="galeri.showDirectory(\'/\', 0, this)">'+name+'</span>';
		txt += '</li></ul>';
		$('directories').innerHTML = txt;
		
	},

	// Show directory

	showDirectory: function(dir, page, parentMenu) {

		$('paging').innerHTML = '';
		this.showLoader();
		document.title = this.galleryName + dir.replace(/^\/$/, '').replace(/\//g, ' - ');
		Element.hide('images');

		if (page == undefined) {
			page = 0;
		}
		if (parentMenu == undefined) {
			parentMenu = null;
		}

		var title = '';
		if (parentMenu != null) {
			title = parentMenu.innerHTML;
			$('title').innerHTML = title;
			new Effect.Highlight('title');
		}

		this.directoryIndex++;

		var obj = this;
		new Ajax.Request('backend.php', {
			method: 'post',
			parameters: {
				s: 'showdirectory',
				dir: dir,
				page: page,
				index: this.directoryIndex
			},
			onComplete: function(x) {
				obj.showDirectoryDone(x, parentMenu == null ? null : parentMenu.id);
			}
		});
	},

	showDirectoryDone: function(x, parentMenuId) {
		var data = this.parseJSON(x);

		this.currentDirectory = data.dir;
		var images = data.images;
		var subdirs = data.subdirs;
		var page = data.page;
		var index = data.index;

		if (index != this.directoryIndex) {
			return;
		}

		var i;
		var txt = '';
		
		this.hideLoader();

		Element.hide('images');
		if (images.length > 0) {
			for (i=0; i<images.length; i++) {
				txt += '<a href="'+images[i].url+'" rel="lightbox[galeri]">';
				txt += '<img class="thumb" src="'+images[i].thumbUrl+'"/>'
				txt += '</a> ';
			}
		}
		$('images').innerHTML = txt;
		Effect.Appear('images');
		this.reloadLightbox();

		txt = '';
		if (page[1] > 1) {
			for (i=0; i<page[1]; i++) {
				txt += '&raquo;<a href="#" onclick="galeri.showPage('+i+')"> '+i+' </a>';
			}
			txt += ' &raquo; ';
		}
		$('paging').innerHTML = txt;

		txt = '';
		if (parentMenuId == null) { 
			parentMenuId = 'root';
		}
		if ((subdirs.length > 0) && (parentMenuId != null) && ($(parentMenuId+'-child') == undefined)) {
			txt = '<ul id="'+parentMenuId+'-child">';
			for (i=0; i<subdirs.length; i++) {
				txt += '<li><span id="'+parentMenuId+'-'+i+'" onclick="galeri.showDirectory(\''+subdirs[i].path+'\', 0, this)">'+subdirs[i].label+'</span></li>';
			}
			txt += '</ul>';
			new Insertion.After(parentMenuId, txt);
		}
	},

	reloadLightbox: function() {
		//These codes are taken from Lightbox 2.0's code

		var anchors = $('images').getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}
	},

	showPage: function(page) {
		this.showDirectory(this.currentDirectory, page);
	},

};

var galeri;

function initGaleri() {
	galeri = new Galeri();
}

Event.observe(window, 'load', initGaleri, false);