// written by Matthias on 21/10/2008
// edited by Matthias on 13/02/09
var mediaNumber = 0;
var mediaItem = [];
var mediaSource = '';
var mediaContent = '';
var mediaCaption = '';
//developer customisation controls
	//video player 
		videoWMode = '';
		videoBGColor = '';
	//swf player
		swfWMode = '';
		swfBGColor = '';
	//background of the holder	
	mediaBG = '';
$(document).ready(function() {
	$('body').append('<div id="mediaFader"></div><!-- media fader --><div id="mediaContainer"><div id="mediaHolder"><div id="mediaButtons"><div id="mediaClose">Close X</div><!-- media close --><div id="mediaNext">Next <span class="mediaDir">&raquo;</span></div><!-- media next --><div id="mediaBack"><span class="mediaDir">&laquo;</span> Back</div><!-- media back --></div><!-- media buttons --><div id="mediaContent"></div><!-- media content --><div id="mediaFile"></div><!-- media file --><div id="mediaDownload"><a href="">Click here to download file</a></div><!-- media download --><div id="mediaCaption"></div><!-- media caption --></div><!-- media holder --></div><!-- media container -->');
	if($.browser.msie && $.browser.version == 6) {
		$('#mediaFader, #mediaContainer').css({
			position: 'absolute'
		});
		$('body').css('overflow-y','auto');
		$('html').css('overflow-y','hidden');
		$('#nav li').each(function(){ $(this).css('position','static'); });
	}
	defaultMediaContentWidth = $('#mediaContent').innerWidth();
	defaultMediaContentPadding = $('#mediaContent').innerWidth() - $('#mediaContent').width();
	$('#mediaFader').hide();
	$('#mediaContainer').hide();
	$('#mediaDownload').hide();
	
	function showMedia(source2,currentNumber) {
		if($.browser.msie && $.browser.version == 6) {
			$('select').each(function(){
				$(this).hide();
			});
		}

		source = source2;
		//console.log(source);
		
		mediaNumber = currentNumber;
		
		//emptying out content which may be in the gallery already
		$('#mediaFile').empty();
		$('#mediaContent').empty();
		$('#mediaCaption').empty();
		$('#mediaBack').empty();
		$('#mediaNext').empty();

		$('#mediaFader').fadeIn(500);
		$('#mediaContainer').fadeIn(500);


		//hide the next and back buttons, depending on what file number you are on
		if(mediaNumber <= 0) {
			$('#mediaBack').css('cursor','default'); 
			$('#mediaBack').empty();
		} else {
			$('#mediaBack').css('cursor','pointer'); 
			$('#mediaBack').append('<span class="mediaDir">&laquo;</span> Back');
		}
		if(mediaNumber >= mediaItem.length-1) {
			$('#mediaNext').css('cursor','default');
			$('#mediaNext').empty(); 
		} else {
			$('#mediaNext').css('cursor','pointer'); 
			$('#mediaNext').append('Next <span class="mediaDir">&raquo;</span>');
		}

		/*console.log('inner width: '+$('#mediaHolder').innerWidth());
		console.log('inner height: '+$('#mediaHolder').innerHeight());
		console.log('width: '+$('#mediaHolder').width());
		console.log('height: '+$('#mediaHolder').height());
		console.log('outer width: '+$('#mediaHolder').outerWidth());
		console.log('outer height: '+$('#mediaHolder').outerHeight());
		console.log('position: '+$('#mediaHolder').position());
		console.log('------------------------------');
		console.log('offset: '+$('#mediaHolder').offset());
		console.log('offsetParent: '+$('#mediaHolder').offsetParent());
		console.log('scrollLeft: '+$('#mediaHolder').scrollLeft());
		console.log('scrollTop: '+$('#mediaHolder').scrollTop());
		console.log('document width: '+$(document).width());
		console.log('document height: '+$(document).height());
		console.log('window width: '+$(window).width());
		console.log('window height: '+$(window).height());*/
		
		//getting the bits ans pieces
		mediaSource = '';
		mediaSource = $('#media .'+source+' a').attr('href');
		mediaCaption = $('#media .'+source+' .caption').text();
		mediaContent = $('#media .'+source+' .cont').html();
		if(mediaContent == null) {
			mediaContent = '';	
		}

		//getting the mine type of the file (ie. img, flv, mp3, swf or other)
		mediaSourceSplit = mediaSource.split('.');
		fileType = mediaSourceSplit[mediaSourceSplit.length-1];
		//console.log(fileType);
		
		/*console.log(mediaSource);
		console.log(mediaContent);
		console.log(mediaCaption);*/
		
		//getting window dimensions for image re-sizing.  Im removing 200px so there is a nice gap around the container box when image is resized.
		windowWidth = ($(window).width())-200;
		windowHeight = ($(window).height())-200;
		
		//if the file type is an image, do the img resizing
		if(fileType == 'jpg' || fileType == 'gif' || fileType == 'png' || fileType == 'bmp') {
			//getting the image dimensions
			var img = new Image();
			img.src = mediaSource;
			imgWidth = $('#media .'+source+' a img').width();
			imgHeight = $('#media .'+source+' a img').height();
				//alert(imgWidth+' x '+imgHeight+"\n"+windowWidth+' x '+windowHeight);
			
				if (imgWidth > windowWidth) {
					imgHeight = imgHeight * (windowWidth / imgWidth); 
					imgWidth = windowWidth; 
					if (imgHeight > windowHeight)	{ 
						imgWidth = imgWidth * (windowHeight / imgHeight); 
						imgHeight = windowHeight; 
					}
				} else if (imgHeight > windowHeight) { 
					imgWidth = imgWidth * (windowHeight / imgHeight); 
					imgHeight = windowHeight; 
					if (imgWidth > windowWidth){ 
						imgHeight = imgHeight * (windowWidth / imgWidth); 
						imgWidth = windowWidth;
					}
				}
				imgWidth = Math.round(imgWidth);
				imgHeight= Math.round(imgHeight);
				if(imgWidth < 200) { fileWidth = 200; } else { fileWidth = imgWidth; }
				if(imgHeight < 130) { fileHeight = 130; } else { fileHeight = imgHeight; }
				//alert(imgWidth+' x '+imgHeight);
				//I had a few problems with images not loading on the first go, so i have put all the necessary items for the window to resize in a function which is run after the image is loaded.
				resizeWindow();
		} else {
			resizeWindow();	
		}
		
		/*console.log('resized images are now:::.....');
		console.log('imgWidth: '+imgWidth);
		console.log('imgHeight: '+imgHeight);*/
				
		//console.log('-------------------------------------------------------');
	}
	
	function resizeWindow() {
		//alert('resizing????');
		//placing content into their respected areas
		//changing the viewer based on the file type
		switch(fileType) {
			case 'jpg':
			case 'gif':
			case 'png':
			case 'bmp':
				file = false;
				//console.log('its an image');
				$('#mediaFile').append('<img src="'+mediaSource+'" width="'+imgWidth+'" height="'+imgHeight+'"/>');
				break;
			case 'flv':
				file = false;
				//console.log('its a flash video');
				/*fileWidth = 642;
				fileHeight = 510;*/
				fileWidth = 512;
				fileHeight = 368;
				$('#mediaFile').flash({
					src:'media/videoPlayer.swf',
					width: fileWidth,
					height: fileHeight,
					wmode: videoWMode,
					bgcolor: videoBGColor,
					flashvars: { theVideo: mediaSource }
				});
				break;
			case 'mp3':
				file = false;
				//console.log('its an mp3 file');
				fileWidth = 400;
				fileHeight = 100;
				$('#mediaFile').flash({
					src: 'media/mp3Player.swf',
					width: fileWidth,
					height: fileHeight,
					wmode: swfWMode,
					bgcolor: swfBGColor,
					flashvars: { mySong: mediaSource }
				});
				break;
			case 'swf':
				file = false;
				//console.log('its a flash file');
				fileWidth = 512;
				fileHeight = 368;
				$('#mediaFile').flash({
					src: mediaSource,
					width: fileWidth,
					height: fileHeight,
					wmode: swfWMode,
					bgcolor: swfBGColor
				});
				break;
			default:
				file = 'document';
				//console.log('its just a file');
				if(mediaContent == '') {
					fileWidth = 400;
					fileHeight = 20;
				} else {
					fileWidth = 600;
					fileHeight = 400;
				}
				break;
		}
		
		/*console.log(file);
		console.log(defaultMediaContentPadding);*/
				
		//getting content dimensions
		mediaFileWidth = $('#mediaFile').innerWidth();
		mediaFileHeight = $('#mediaFile').innerHeight();
		mediaContentWidth = $('#mediaContent').innerWidth();
		//because im re-sizeing the content column if it is just a file type of image, it stays at its new width, 
		//so here i am re-setting the with for when its a normal file
		if(file == 'document') {
			//get the fileWidth set by the switch above, and add the padding from the #mediaContent div
			documentWidth = fileWidth+($('#mediaContent').width() - $('#mediaContent').innerWidth());
			$('#mediaCaption').css('textAlign','left');
			$('#mediaDownload').empty();
			$('#mediaDownload').append('<a href="'+mediaSource+'" target="_blank">Click here to download file</a>');
			$('#mediaDownload').show();
			$('#mediaDownload a').click(function() {
				window.open(mediaSource);
				return false;
			});
		} else {
			//if its not a document, reset the width of the #mediaContent div
			documentWidth = defaultMediaContentWidth-40;	
			$('#mediaContent').css('width',documentWidth);
			$('#mediaCaption').css('textAlign','center');
			$('#mediaDownload').hide();
		}


		if(mediaContentWidth > documentWidth) {
			mediaContentWidth = documentWidth;	
		} else {
			mediaContentWidth = defaultMediaContentWidth;	
		}
		
		mediaBtnsHeight = $('#mediaButtons').innerHeight();
		mediaCaptionHeight = $('#mediaCaption').innerHeight();
		holderPaddingTB = $('#mediaHolder').innerHeight() - $('#mediaHolder').height();
		holderPaddingLR = $('#mediaHolder').innerWidth() - $('#mediaHolder').width();
		//if there is no content, dont add the content width.  this will allow the image to span full with of the holder
		if(mediaContent == '' || file == 'document') {
			//alert('here');
			holderWidth = fileWidth;
		} else {
			holderWidth = fileWidth+holderPaddingLR+mediaContentWidth-defaultMediaContentPadding;
		}
		holderHeight = fileHeight+holderPaddingTB+mediaBtnsHeight+mediaCaptionHeight;
		offsetTop = -(holderHeight / 2)-(holderPaddingTB/2);
		offsetLeft = -(holderWidth / 2)-(holderPaddingLR/2);
		
		if($('#media .'+source).css('background-color') == 'transparent') {
			mediaBG2 = mediaBG;
		} else {
			mediaBG2 = $('#media .'+source).css('background-color');	
		} 
		//console.log(mediaBG);
		$('#mediaHolder, #mediaCaption').css('background-color',mediaBG2);
		
		/*console.log('holder padding x: '+holderPaddingTB);
		console.log('holder padding y: '+holderPaddingLR);
		console.log('holder width: '+holderWidth);
		console.log('holder offsetTop: '+offsetTop);
		console.log('holder offsetLeft: '+offsetLeft);
		
		console.log('mediaFileWidth: '+mediaFileWidth);
		console.log('mediaFileHeight: '+mediaFileHeight);
		console.log('mediaContentWidth: '+mediaContentWidth);
		console.log('mediaBtnsHeight: '+mediaBtnsHeight);
		console.log('mediaCaptionHeight: '+mediaBtnsHeight);
		console.log('media: '+mediaContentWidth);*/
		$('#mediaContent').append(mediaContent);
		$('#mediaCaption').append(mediaCaption);
		
		//making any content links work
		$('#mediaContent a').each(function(){
			$(this).click(function(){
				window.open($(this).attr('href'));
			});
		});
		
		//animate the box
		$('#mediaHolder').animate({
			width:holderWidth+'px',
			height:holderHeight+'px',
			marginTop:offsetTop+'px',
			marginLeft: offsetLeft+'px',
			'background-color': mediaBG
			},{
				duration: 'slow'
			});
		//console.log(documentWidth);
		//if there is no content, hide the div so the image is full width		
		if(mediaContent == '' && file != 'document') {
			$('#mediaContent').hide();
		} else {
			$('#mediaContent').animate({
				width:documentWidth+'px',
				height:fileHeight+'px'
			},{
				duration: 'slow'
			});
		}
		if(file == 'document') {
			$('#mediaFile').hide();
		} else {
			$('#mediaFile').css({width: '200px', height: '200px', opacity: 0});
			$('#mediaFile').animate({
				width:fileWidth+'px',
				height:fileHeight+'px',
				opacity: 1
				},{
					duration: 'slow'
				});
		}
		$('#mediaCaption').animate({
			width:fileWidth+'px'
		},{
			duration: 'slow'
		});
		
	}
	
	//setting the actions when clicking on a gallery item
	$('#media li').each(function(i){ 
		mediaItem[i] = 'media'+(i+1); 
		$(this).click(function(){
			showMedia(mediaItem[i],i)
			return false;
		});
	});
	
	//hide the large view when you click outside or on the close box
	$('#mediaContainer, #mediaClose').click(function(){ 
		$('#mediaFader').fadeOut(500); 
		$('#mediaContainer').fadeOut(500);
		if($.browser.msie && $.browser.version == 6) {
			$('select').each(function(){
				$(this).show();
			});
		}

		return false;
	});
	
	//overriding the above statement
	$('#mediaHolder').click(function(){
		return false;																		
	});

	$('#mediaNext').click(function(){
		if(mediaNumber < mediaItem.length-1) {
			showMedia(mediaItem[mediaNumber+1],mediaNumber+1);															 
		}
		return false;
	});
	
	//the back button
	$('#mediaBack').click(function(){
		if(mediaNumber > 0) {
			showMedia(mediaItem[mediaNumber-1],mediaNumber-1);															 
		}
		return false;
	});
	
	
});