BooeepImageViewer = {

	params: {
		currMediaItem: undefined,
		currCollId: undefined,
		mediaList: [],
		mediaUrl: 'http://media.booeep.com/',
		permaUrl: 'http://www.booeep.com/photos/view/',
		infoUrl: '/global/ajax/Media/getImageInfo/'
	},
	
	elements: {},

	init: function( params )
	{
		var me = this;
		
		if ( params ) {
			$.extend( me.params, params );
		}
		
		me.initThumbnails();
	},
	
	initThumbnails: function()
	{
		var me = this;
		
		// search for <A> tags
		$('#carousel_container').find('a')
			.each( function() {
								
				// pull media data
				me.params.mediaList.push( {
					mogName: this.getAttribute('media_name'),
					orientation: this.getAttribute('media_orientation'),
					lastMod: this.getAttribute('last_mod')
					//mediaName: this.getAttribute('title')
				} );
				
				// replace href with javascript
				this.href = 'javascript:void(0);';
				$(this).click( function() {
					me.loadMediaItem( this.getAttribute('media_name') );
				} );
				 
			} )
	},
	
	initElements: function()
	{
		var me = this;
	
		if ( typeof me.elements.previewBox == 'undefined' )
		{
			me.elements = {
				mediaInfo:	$('#media_item_info'),
				comments:	$('#comments_container'),
				previewBox:	$('#primary_preview #preview_box')
			};
		}
	},
	
	loadMediaItem: function( mogName )
	{
		var me = this;
		
		// set the currMediaItem
		me.params.currMediaItem = mogName;
		
		// cache elements
		me.initElements();
		
		// load media details pane
		me.elements.mediaInfo.load( me.params.infoUrl + me.params.currMediaItem );
		
		// load media comments pane
		me.elements.comments.load(
			'/global/ajax/comments/loadComments/'
			+ me.params.currMediaItem
		);
		
		// search our list for the media item
		var mediaItem = undefined;
		for( var i=0; i<me.params.mediaList.length; i++ )
		{
			if ( me.params.mediaList[i].mogName == mogName ) {
				var mediaItem = me.params.mediaList[i];
				break;
			}
		}
		
		// check for enlarge box
		if ( BooeepEnlargeViewer.isOpen ) {
		
			// make asynchronous for IE6
			setTimeout( function()
			{
				// load the current image
				BooeepEnlargeViewer.loadImage();
				
			}, 1 );
		} 
		
		// load preview pane
		var previewBox = me.elements.previewBox;
		previewBox.empty();
		previewBox.removeClass('horizontal')
			.removeClass('vertical')
			.addClass( mediaItem.orientation );
		
		// make asynchronous...
		setTimeout( function() {
			var imgSrc	= me.params.mediaUrl
						+ '/' + mediaItem.mogName
						+ '_preview_medium/'
						+ mediaItem.lastMod;
			previewBox.html('<img src="' + imgSrc + '" border="0" /><span></span>');
		}, 1 );
		
		// load the share url
		if ( typeof BooeepShare != 'undefined' ) {
			BooeepShare.updateCurrUrl(
				'http://' +
				me.params.permaUrl +
				'?mid=' + mogName
			);
		}
	},
	
	getCurrMediaIndex: function()
	{
		var me = this;
	
		var currIndex;
		for( currIndex=0; currIndex<me.params.mediaList.length; currIndex++ )
		{
			if ( me.params.mediaList[currIndex].mogName == me.params.currMediaItem ) {
				break;
			}
		}
		
		return currIndex;
	},
	
	traverse: function( dir )
	{
		var me = this;
		
		// find the current index
		var currIndex = me.getCurrMediaIndex();
		
		// find the goIndex
		var goIndex = undefined;
		if ( dir == 'next' && (currIndex +1) < me.params.mediaList.length ) {
			goIndex = currIndex +1;
		}
		else if( dir == 'prev' && currIndex > 0 ) {
			goIndex = currIndex -1;
		}
		else {
			return;
		}
		
		// load image
		me.loadMediaItem( me.params.mediaList[goIndex].mogName );
	}
}

BooeepEnlargeViewer = {

	isOpen:		false,
	preload:	false,
	viewerNode: undefined,

	load:  function()
	{
		var	me = this,
			modalContainer = $('#modalContainer');
		
		// check to see if the modal container is loaded yet
		if ( !modalContainer || !modalContainer[0] ) {
			if ( !me.preload ) {
				me.preload = true;
				jQuery( function() {
					me.preload = false;
					BooeepEnlargeViewer.load();
				} );
			}
		}
		
		// init the modal container
		modalContainer
			.empty()
			.jqm({
				ajax:			false,
				modal:			true,
				overlay:		85,
				overlayClass:	'modalOverlay'
			})
			// show the modal
			.jqmShow();
			
		// mark as open
		me.isOpen = true;
		
		// build the viewer
		me.buildViewer();
		
		// make asynchronous for IE6
		setTimeout( function()
		{
			// load the current image
			me.loadImage();
			
		}, 1 );
	
	},
	
	buildViewer: function()
	{
		var	me = this;
		
		$('#modalContainer')
		.tplAppend(
			{},
			me.viewerTpl
		);
		
		// cache the root node for the viewer
		me.viewerNode = $('#modalContainer #enlargeContainer');
		
		// add click event handlers
		me.viewerNode
			.find('.enlargePrev')
				.click( function()
				{
					BooeepImageViewer.traverse('prev');
				} );
				
		me.viewerNode
			.find('.enlargeNext')
				.click( function()
				{
					BooeepImageViewer.traverse('next');
				} );
				
		me.viewerNode
			.find('.closeBut')
				.click( function()
				{
					BooeepEnlargeViewer.close();
				} );
				
		// add hover states for next / prev
		me.viewerNode
			.find('#enlargeImgContainer #imgItem, #enlargeImgContainer .traverse')
				.mousemove( function(e) {
					me.imgHover(e);
				} );
				
		// add mouseout handlers for next / prev
		me.viewerNode
			.find('#enlargeImgContainer #imgItem, #enlargeImgContainer .traverse')
				.mouseout( function(e) {
					me.imgOut(e);
				} );
	},
	
	viewerTpl: function()
	{
		var tpl = [
			'div', { id: 'enlargeContainer' }, [
				'div', { id: 'enlargeHeading' }, [
					'a', { className: 'closeBut' }
				],
				'div', { id: 'enlargeImgContainer' }, [
					'div', { id: 'imgItem' },
					'a', { className: 'enlargePrev traverse', href: 'javascript:void(0)', style: 'display: none;' },
					'a', { className: 'enlargeNext traverse', href: 'javascript:void(0)', style: 'display: none;' }
				],
				'div', { id: 'enlargeFooter' }, [
					'a', { className: 'closeBut' },
					'div', { id: 'enlargeControls' }, [
						'a', { className: 'enlargePrev traverse', href: 'javascript:void(0)' },
						'div', { className: 'mediaStats' },
						'a', { className: 'enlargeNext traverse', href: 'javascript:void(0)' }
					]
				]
			]
		];
		
		return tpl;
	},
	
	loadImage: function()
	{
		var	me = this
			pObj = BooeepImageViewer; // cache the parent object
			
		var	currMediaIndex = BooeepImageViewer.getCurrMediaIndex();
		var	currMedia = pObj.params.mediaList[ currMediaIndex ];
		
		var mediaStats =	( parseInt(currMediaIndex) +1 )
							+ ' of '
							+ pObj.params.mediaList.length
							+ ' photos';
		
		var imgSrc =	BooeepImageViewer.params.mediaUrl
						+ '/' + currMedia.mogName
						+ '_preview_large/'
						+ currMedia.lastMod;
						
		// set the orientation
		me.viewerNode
			.removeClass('horizontal')
			.removeClass('vertical')
			.addClass( currMedia.orientation );
	
		// load up the image element
		me.viewerNode.find('#imgItem')
			.html('<img src="' + imgSrc + '" border="0" /><span></span>');
			
		// load up the titles
		//me.viewerNode.find('.mediaTitle').html( currMedia.mediaName );
		//alert( currMedia.mediaName );
			
		// load up the stats
		me.viewerNode.find('.mediaStats').html( mediaStats );
	},
	
	close: function()
	{
		var me = this;
		
		me.isOpen = false;
		$('#modalContainer').jqmHide();
	},
	
	imgHover: function(e)
	{
		// setup some vars
		var me = this;
		
		var pWidth = parseInt( $(e.target).parents('#enlargeImgContainer').find('#imgItem').css('width') );
		var pOffset = $(e.target).parents('#enlargeImgContainer').offset();
		var cOffset = {
			left:	e.pageX - pOffset.left,
			top:	e.pageY - pOffset.top
		};
		
		// calculate whether to 
		if ( cOffset.left < ( pWidth  / 2 ) ) {
			me.viewerNode.find('#enlargeImgContainer .enlargePrev').show();
			me.viewerNode.find('#enlargeImgContainer .enlargeNext').hide();
		}
		else if ( cOffset.left > ( pWidth / 2 ) ) {
			me.viewerNode.find('#enlargeImgContainer .enlargePrev').hide();
			me.viewerNode.find('#enlargeImgContainer .enlargeNext').show();
		}
		else {
			me.viewerNode.find('#enlargeImgContainer .enlargePrev').hide();
			me.viewerNode.find('#enlargeImgContainer .enlargeNext').hide();
		}
		
		// set timeout
		if ( me.outTimer ) {
			clearTimeout( me.outTimer );
		}
		me.outTimer = setTimeout( function() {
			me.imgOut(e);
		}, 3000 );
	},
	
	imgOut: function(e)
	{
		var me = this;
		var pNode = me.viewerNode.find('#enlargeImgContainer');
		
		if ( $.isChildOf( pNode[0], e.relatedTarget, pNode[0] ) ) {
			return;
		}
		
		me.viewerNode.find('#enlargeImgContainer .enlargePrev').hide();
		me.viewerNode.find('#enlargeImgContainer .enlargeNext').hide();
	}
}