/**
 * Slideshow class
 * Used for the showcase functionality
 *
 * @version 1.0
 */
var Slideshow = function() {
	var __CLASS__ 	= 'Slideshow';	// "class" name
	var __METHOD__	= '()';			// used for debugging
	var __this__	= this;			// reference to itself
	debug(__CLASS__);

	var showcase	= null;
	var dialog		= null;
	var container	= null;


	/**
	 * Initialization
	 *
	 * @return
	 * @type void
	 */
	function main() {
		__METHOD__ 	= __CLASS__+'.main()';
		debug(__METHOD__);

		bind();
	}


	/**
	 * Bind event handlers
	 *
	 * @return
	 * @type void
	 */
	function bind() {
		__METHOD__ 	= __CLASS__+'.bind()';
		debug(__METHOD__);

		var cells = showcase.find('.cell a:not(.direct)');

		// showcase fade effect
		cells.hover(
			function() { $(this).find('img').fadeIn('normal'); },
			function() { $(this).find('img').fadeOut('fast'); }
		);

		cells.click(function(e) {
			e.preventDefault();

			var sender 	= $(this);
			var href 	= sender.attr('href');
			//debug(href);

			$.ajax({
				url: href,
				async: false,
				dataType: 'html',
				success: function(data, status, request) {
					//debug(dialog);
					//debug(data);
					$.modal(data, {
						opacity: 75,
						closeHTML: "<div>Close window <span>&times;</span></div>",
						onOpen: function (dialog) {
							navigation();

							dialog.overlay.fadeIn('fast', function() {
								dialog.container.fadeIn('fast', function() {
									dialog.data.fadeIn('fast');
								});
							});
						},
						onClose: function (dialog) {
							dialog.data.fadeOut('fast', function () {
								dialog.container.fadeOut('fast', function () {
									dialog.overlay.fadeOut('fast', function () {
										$.modal.close();
									});
								});
							});
						},
						onShow: function(dialog) {
							//@todo: implement sliding
						}
					});
				}
			});
		});

	}


	/**
	 * Toggle arrow visibility
	 *
	 * @return
	 * @type void
	 */
	function toggleArrows(page, arrows) {
		__METHOD__ 	= __CLASS__+'.toggleArrows()';
		debug(__METHOD__);

		var parent 	= page.parent();
		var index 	= parent.find('.page').index(page);
		var length  = parent.find('.page').size();
		var left	= arrows.eq(0);
		var right	= arrows.eq(1);

		// enable/disable arrows
		if (index == 0)			left.addClass('invisible');
		else					left.removeClass('invisible');

		if (index == length-1)	right.addClass('invisible');
		else					right.removeClass('invisible');

		container.trigger('notify', [index]);
	}


	/**
	 * Slideshow navigation
	 *
	 * @return
	 * @type void
	 */
	function navigation() {
		__METHOD__ 	= __CLASS__+'.navigation()';
		debug(__METHOD__);

		dialog 		= $('#modal');
		container	= dialog.find('.container');

		var arrows	= dialog.find('.prev-page a, .next-page a');
		var dots	= dialog.find('.dots a');
		var parent	= container.find('.pages');
		var pages	= parent.find('.page');
		var width 	= { inner: pages.eq(0).width(), outer: pages.eq(0).outerWidth() };
		//debug(dialog); debug(container); debug(arrows); debug(dots); debug(pages);

		// set the initial width
		parent.width((pages.length) * width.outer);
		pages.width(width.inner);

		// initial arrows/dots behaviour
		arrows.click(function(e) { e.preventDefault(); });
		dots.eq(0).addClass('selected');
		arrows.eq(0).addClass('invisible');
		if (pages.length == 1)	arrows.eq(1).addClass('invisible');

		// dot navigation
		dots.click(function(e) {
			__METHOD__ 	= __CLASS__+'.dots.click()';
			//debug(__METHOD__);
			//debug(this.hash);
			e.preventDefault();

			var sender = e;
			var target = dialog.find('.page a[name='+this.hash.substr(1)+']');
			dots.removeClass('selected');
			dialog.find('a[href$="'+sender.currentTarget.hash+'"]').toggleClass('selected');
			container.scrollTo(target, {
				axis: 'x',
				duration: 800,
				onAfter: function(e, target, current, items, position) {
					__METHOD__ 	= __CLASS__+'.container.onAfter()';
					//debug(e); debug(target); debug(current); debug(items); debug(position); debug(sender.currentTarget.hash);

					// enable/disable arrows
					var page = $(e).closest('.page');
					//debug(page);
					toggleArrows(page, arrows);
				}
			});
			return false;
		});

		// arrow navigation
		container.serialScroll({
			items: pages,
			prev: arrows.eq(0),
			next: arrows.eq(1),
			axis: 'x',
			duration: 800,
			stop: true,
			lock: false,
			cycle: false,
			onBefore: function(e, target, current, items, position) {
				__METHOD__ 	= __CLASS__+'.container.onBefore()';
				//debug(__METHOD__);
				//debug(e); debug(current); debug(items);
				var marker = $(target).find('a.marker');
				var hash 	= '#'+ marker.attr('name').replace(/[0-9]/g, '') + (position+1);
				var anchors	= dialog.find('a[href$="'+hash+'"]');
				//debug(target); debug(position); debug(marker.attr('name'));

				if (anchors.size() > 0) {
					dots.removeClass('selected');
					anchors.toggleClass('selected');
				}

				// enable/disable arrows
				var page = $(target);
				toggleArrows(page, arrows);
			}
		});
	}


	/**
	 * The "Constructor"
	 *
	 * @return
	 * @type void
	 */
	this[__CLASS__] = function() {
		__METHOD__ 	= __CLASS__+'.'+__CLASS__+'()';
		//debug(__METHOD__);

		showcase = $('#showcase, .showcase');

		if (showcase.length == 0)	return;

		main();
	}

	// let's start!
	this[__CLASS__]();
}