/*

	Large image viewer utilities built specifically for dagmarb.com

*/


/**
 * Places a faded background for use with the flyout jquery plugin
 * 
 * @return null
 */
function doFadePlacement () {
	// Backdrop HTML code to insert
	var code  = '<div id="image-viewer-backdrop">';
		code += '&nbsp;';
		code += '</div>';
		
	// Check what to fix for IE
	var pos;
	var overflowObject;
	var top;
	var left;
	if (jQuery.browser.msie == true) {
		if (parseInt(jQuery.browser.version) > 6) {
			pos = 'fixed';
		} else {
			pos = 'absolute';
		};
		overflowObject = {};
		top = $(document).scrollTop();
		left = $(document).scrollLeft();
	} else {
		// All is well
		pos = 'fixed';
		overflowObject = {'overflow' : 'hidden'};
		top = 0;
		left = 0;
	};
		
	// Insert the code and apply styles
	$('body')
		.append(code)
		.css(overflowObject);
	$('div#image-viewer-backdrop')
		.css({
		'position' : pos,
		'top' : top,
		'left' : left,
		'width' : '100%',
		'height' : '100%',
		'backgroundColor' : '#000000',
		'opacity' : 0.7,
		'display' : 'none'
		})
		.fadeIn(500);
}


/**
 * Removes the faded background from the DOM
 * 
 * @return null
 */
function doFadeRemoval () {
	$('div#image-viewer-backdrop')
		.fadeOut(500, function () {
			$(this).remove();
		});
}


/**
 * Runs when backdrop fade finishes
 * 
 * @return null
 */
function doFadeFinish () {
	if (jQuery.browser.msie == true) {
	} else {
		$('body').css('overflow', 'auto');
	};
}


/**
 * Hides the viewer
 */
function doHideQuicktime () {
	$('div#image-viewer,div#image-viewer-backdrop').fadeOut(500, function () {
		$('div#image-viewer,div#image-viewer-backdrop').remove();
	});
}


/**
 * Shows a quicktime movie
 */
function doShowQuicktime (url) {
	/* Append the elements */
	$('body').append('<div id="image-viewer"><div class="viewing-close"><a href="#close"><img src="/media/design/picture-close.png" alt="Close" /></a></div></div>');
	$('body').append('<div id="image-viewer-backdrop"></div>');
	
	/* Style the elements */
	$('div#image-viewer-backdrop').css({
		'position' : 'absolute',
		'backgroundColor' : '#000000',
		'width' : '100%',
		'height' : '100%',
		'top' : 0,
		'left' : 0,
		'zIndex' : 500
	})
		.attr('title', 'Click to close');
	$('div#image-viewer').css({
		'position' : 'absolute',
		'top' : 0,
		'left' : 0,
		'zIndex' : 501,
		'textAlign' : 'center'
	});
	
	/* Fade them in */
	$('div#image-viewer,div#image-viewer-backdrop').css('opacity', 0);
	$('div#image-viewer-backdrop').animate({
		opacity : 0.6
	}, 500);
	$('div#image-viewer').animate({
		'opacity' : 1
	}, 500, null, function () {
		placeQuickTime(url);
	});
	
	/* Listen to click */
	$('div#image-viewer,div#image-viewer-backdrop').click(function () {
		doHideQuicktime();
	});
}


/**
 * Retrieves the location of a larger version of the image specified in the URL
 * This function assumes that the image structure is thus:
 * Fullsize images are in /media
 * Thumbnail versions are in /media/thumbnails
 * 
 * The returned string is stripped of the thumbnails directory to point directly 
 * to /media
 * 
 * @param String thumbnailUrl
 * @return String largeImageUrl
 */
function getLargeImage (url) {
	var urlChecker = new RegExp("(.jpg|.png|.gif|.bmp|.mp4|.mov)$");
	var elems = url.split('/');
	var urlToReturn = new Array();
	for (var i = 0; i < elems.length; i++) {
		var piece = elems[i];
		urlToReturn.push(piece);
		if (urlChecker.test(piece) == true) {
			break;
		}
	};
	return urlToReturn.join('/');
}


/**
 * Places the Quicktime movie at the URL specified into the DOM
 * 
 * @param String movieUrl
 * @return null
 */
function placeQuickTime (url) {
	// At the moment, static dimensions are used to place the quicktime object on the screen
	var embed  = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" width="320" height="258" align="middle">';
  		embed += '<param name="src" value="'+url+'" />';
  		embed += '<param name="autoplay" value="true" />';
  		embed += '<param name="bgcolor" value="#000000" />';
 		embed += '<embed src="'+url+'" bgcolor="#000000" autoplay="true" width="600" height="450" align="middle" bgcolor="black" pluginspage="http://www.apple.com/quicktime/download/">';
  		embed += '</embed>';
		embed += '</object>';
	
	// Place the embed into the DOM
	$('div#image-viewer').append(embed);
	doViewerPlace();
	$(window).resize(function () {
		doViewerPlace();
	});
}


/**
 * Method to center the image viewer on stage
 */
function doViewerPlace () {
	/* Center the viewer */
	var wid = $('div#image-viewer').width(),
		hei = $('div#image-viewer').height();
	
	$('div#image-viewer').css({
		'top' : ($(document).height() / 2) - (hei / 2),
		'left' : ($(document).width() / 2) - (wid / 2)
	});
}

