/*
 * OBMG gallery scripts
 *
 * Targets jQuery 1.4.1.
 *
 * Copyright (c) 2009-2010 Dialect Communications Group (dialect.ca)
 *
 * $Package: OBMG $
 */

/*jslint browser: true, white: true, plusplus: true, newcap: true,
    eqeqeq: true, evil: true, nomen: false,  regexp: true, undef: true,
    onevar: true */

/*global $,pageTracker,window,console,Cufon,OBMG */

OBMG.INLINE_MEDIA_TEMPLATE = '/components/inline_media.fragment.php';

OBMG.initCaptions = function () {
	$('#content img[title]').after( function() { return '<cite>' + $(this).attr('title') + '</cite>' } );
}

/*OBMG.initInlineMedia = function () {
	$('div.expandable a').bind('click.obmg', function () {
		var gallery = $(this).parent(),
		    gallery_id = gallery.attr('id');
		
		if (!gallery_id) {
			// bail without an ID
			return true;
		}
		
		// load the data from the DB and store it in a 'global' var
		$.getJSON($(this).attr('href'), function (data, s) {
			// TODO: error checking

			// load the fragment template for display
			$.get(OBMG.INLINE_MEDIA_TEMPLATE, function (tpl, s) {
				// save state so we can return to it
				gallery.data('original', gallery.html());
				gallery.data('original_height', gallery.height());
				gallery.data('original_margin_left', gallery.css('margin-left'));
				gallery.media = data;
				gallery.id = gallery_id;
				gallery.idx = 0;
				OBMG.openInlineMedia(gallery, tpl);
			});			
		});

		return false;
	});
};*/

OBMG.initInlineMedia = function () {
	$('div.expandable').unbind('click.obmg').bind('click.obmg', function () {
		var gallery = $(this),
		    gallery_id = gallery.attr('id'),
		    data = [];

		$(this).unbind('click.obmg');

		OBMG.trackEvent('Inline Gallery', 'Open', gallery_id);

		if (!gallery_id) {
			// bail without an ID
			return true;
		}
		
		$('.preload img', $(this).parent()).each( function (idx) {
			data.push({src: $(this).attr('src'), caption: $(this).attr('title')});
		});

		// load the fragment template for display
		$.get(OBMG.INLINE_MEDIA_TEMPLATE, function (tpl, s) {
			// save state so we can return to it
			gallery.data('original', gallery.html());
			gallery.data('original_height', gallery.height());
			gallery.data('original_margin_left', gallery.css('margin-left'));
			gallery.media = data;
			gallery.id = gallery_id;
			gallery.idx = 0;
			OBMG.openInlineMedia(gallery, tpl);
		});			

		return false;
	});
};

/**
 * Fade out gallery's contents, load the template and show the first image.
 * Also wires up the click handlers.
 */
OBMG.openInlineMedia = function (gallery, tpl) {
	if (gallery.is_home_toc) {
		gallery.empty().addClass('mediagallery').html(tpl);
		OBMG.showInlineMedia(gallery, 0);
		OBMG.bindInlineMedia(gallery);
	} else {
		$('*', gallery).fadeOut(300);
		gallery.animate(
			{width: 580, height: 270, marginLeft: 0}, { 
			duration: 1000,
			complete : function () {
				gallery.empty().addClass('mediagallery').html(tpl);
				OBMG.showInlineMedia(gallery, 0);
				OBMG.bindInlineMedia(gallery);

			}
		});
	}
};

OBMG.closeInlineMedia = function (gallery) {
	OBMG.trackEvent('Inline Gallery', 'Close', gallery.id);
	$('*', gallery).fadeOut(300);
	gallery.animate({width: 220, height: gallery.data('original_height'), marginLeft: gallery.data('original_margin_left')}, {
		duration: 1000,
		complete : function () {
			gallery.removeClass('mediagallery');
			gallery.html(gallery.data('original'));
			OBMG.initInlineMedia();
		}
	});
};

/**
 * Display an image in an inline gallery.  Handles bounds checking.
 */
OBMG.showInlineMedia = function (gallery, idx) {
	//console.debug(gallery, idx);
	if (idx < 0) {
		idx = gallery.media.length - 1;
	} else if (idx > gallery.media.length - 1) {
		idx = 0;
	}
	
	if (gallery.media[idx]) {
		OBMG.trackEvent('Inline Gallery', 'View', gallery.id + '/' + idx, 1);
		//$('img, p.caption', gallery).css('opacity', 0);
		$('img', gallery).attr('src', gallery.media[idx].src);
		gallery.idx = idx;
	}
		
};

OBMG.bindInlineMedia = function (gallery) {	
	$('a.close', gallery).bind('click.obmg', function () {
		if (gallery.is_home_toc) {
			OBMG.removeOverlay(gallery);
		} else {
			OBMG.closeInlineMedia(gallery);
		}
		return false;
	});

	$('img', gallery).load(function () {
		$(this).animate({opacity: 1}, 600);
		
		// don't fade in IE due to cleartype bug
		if (jQuery.browser.msie) {
			$('p.caption', gallery).html(gallery.media[gallery.idx].caption).css('opacity', 1).get(0).style.removeAttribute('filter');
		} else {
			$('p.caption', gallery).html(gallery.media[gallery.idx].caption).fadeTo('fast', 1);
		}

	});

	if (gallery.media.length < 1) {
		$('.nav', gallery).css('visibility', 'hidden');
		return;
	}
	
	$('img', gallery).css('cursor', 'pointer');

	$('a.prev', gallery).bind('click.obmg', function () {
		OBMG.showInlineMedia(gallery, gallery.idx - 1);
		return false;
	});

	$('a.next, img', gallery).bind('click.obmg', function () {
		OBMG.showInlineMedia(gallery, gallery.idx + 1);
		return false;
	});
	
	OBMG.initOverlayGallery();
};

/*** OVERLAY MEDIA ***/	
OBMG.initOverlayGallery = function () {
	$('a.gallery').one('click.obmg', function () {
		var gallery = {},
		    href = $(this).attr('href');

		$.getJSON(href, { json: true }, function (data, s) {
			$.get(href, { overlay: true }, function (html, s) {
				if (s === 'success') {
					$('body').append('<div id="overlay">' + html + '</div>');
					
					gallery = $('#overlay');
					gallery.media = data;
					gallery.idx = 0;
					gallery.total_w = $('#gallery_viewer', gallery).width();
					
					OBMG.bindOverlayGallery(gallery);	
				} else {
					// TODO: error handling
				}
			});
		});
		return false;
	});
};

OBMG.showOverlayImage = function (gallery, idx) {
	if (idx < 0) {
		idx = gallery.media.length - 1;
	} else if (idx > gallery.media.length - 1) {
		idx = 0;
	}

	if (!gallery.media[idx]) {
		return;
	}

	$('#gallery_image img, #gallery_caption', gallery).css('opacity', 0);

	$('p.caption', gallery).html(gallery.media[idx].caption);

	$('#gallery_image img', gallery).removeAttr('width').removeAttr('height').removeAttr('src').css({ opacity: 0, width: '', height: '' }).attr('src', gallery.media[idx].src);
	gallery.idx = idx;

	// console.debug(totalw, imgw, captionl);
	// OBMG.trackPageView(href);
};

OBMG.positionOverlayCaption = function (gallery) {
	var img_w = $('#gallery_image img', gallery).width(),
	    caption_l = (gallery.total_w - img_w) / 2;

	$('#gallery_caption', gallery).width(img_w).css('left', caption_l + 'px');
};


OBMG.bindOverlayGallery = function (gallery) {
	$(document).bind('keydown.obmg.overlay', function (e) {
		switch (e.keyCode) { // escape
		case 27: // escape
			OBMG.removeOverlay(gallery);
			return false;
		case 37: // left
		case 38: // up
			OBMG.showOverlayImage(gallery, gallery.idx - 1);
			return false;
		case 39: // right
		case 40: // down
		case 32: // space
			OBMG.showOverlayImage(gallery, gallery.idx + 1);
			return false;
		}
	});

	// position the caption
	$('#gallery_image img', gallery).load(function () {
		OBMG.positionOverlayCaption(gallery);
		$(this).animate({opacity: 1}, 600);
		$('#gallery_caption', gallery).animate({opacity: 0.85}, 600);
	});

	$('.close', gallery).bind('click.obmg', function () {
		OBMG.removeOverlay(gallery);
		return false;
	});

	$('.prev a', gallery).bind('click.obmg', function () {
		OBMG.showOverlayImage(gallery, gallery.idx - 1);
		return false;
	});
	
	$('#gallery_image img', gallery).css('cursor', 'pointer');

	$('.next a, #gallery_image img', gallery).bind('click.obmg', function () {
		OBMG.showOverlayImage(gallery, gallery.idx + 1);
		return false;
	});
};

OBMG.removeOverlay = function (gallery) {
	$(document).unbind('keydown.obmg.overlay');
	$(gallery).fadeOut(500, function () {
		gallery.remove();
		OBMG.initOverlayGallery();
	});
};
	

OBMG.initHomeInlineGallery = function () {
	$('#home_toc .more a').bind('click.obmg', function () {
		$('#home_toc').append('<div id="home_toc_overlay" class="mediagallery">&#x00a0;</div>');	
		var gallery = $('#home_toc_overlay');
		$.getJSON('data/inline_media.php', function (data, s) {
			// TODO: error checking

			// load the fragment template for display
			$.get(OBMG.INLINE_MEDIA_TEMPLATE, function (tpl, s) {
				gallery.media = data;
				gallery.id = 'home_toc_overlay';
				gallery.idx = 0;
				gallery.is_home_toc = true;
				OBMG.openInlineMedia(gallery, tpl);
			});			
		});			

		return false;
	});	
};