// written by Matthias on 21/10/2008
var mediaNumber = 0;
var mediaItem = [];
var mediaSource = '';
var mediaContent = '';
var mediaCaption = '';
//developer customisation controls
	//video player 
		videoWMode = '';
		videoBGColor = '';
	//swf player
		swfWMode = '';
		swfBGColor = '';
$(document).ready(function() {
	$('body').append('<div id="mediaFader"></div><!-- media fader --><div id="mediaContainer"><div id="mediaHolder"><div id="mediaContent"></div><!-- media content --><div id="mediaFile"></div><!-- media file --><div id="mediaDownload">Click here to download file</div><!-- media download --><div id="mediaButtons"><div id="mediaClose">Close</div><!-- media close --></div><!-- media buttons --></div><!-- media holder --></div><!-- media container -->');
	if($.browser.msie && $.browser.version == 6) {
		$('#mediaFader, #mediaContainer').css({
			position: 'absolute'
		});
		$('body').css('overflow-y','auto');
		$('#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,theType) {
		$('.mag').hide();
		source = source2;
		//console.log(theType);		
		//console.log(source);
		mediaNumber = currentNumber;
		
		//emptying out content which may be in the gallery already
		$('#mediaFile').empty();
		$('#mediaContent').empty();

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

		/*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
		if(theType == 'single') {
			mediaSource = source;
		} else {
			//console.log(source);
			source = source.replace('medias','media');
			//console.log(source);
			//console.log('#largeView .'+source);
			mediaSource = $('#largeView .'+source).attr('href');
			//console.log(mediaSource);
		}
		theNum = source.replace('media','');
		mediaCaption = '';
		mediaContent = '';	
		//console.log(mediaSource);
		

		//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 = 700;
		windowHeight = 500;
		
		//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;
			if(theType == 'single') {
				imgWidth = $('.imgHolderSmall a').attr('imgW');
				imgHeight = $('.imgHolderSmall a').attr('imgH');
			} else {
				imgWidth = $('#largeView .'+source+' img').width();
				imgHeight = $('#largeView .'+source+' img').height();
			}
			//alert(imgWidth+' x '+imgHeight+"\n"+windowWidth+' x '+windowHeight);
				//console.log(imgWidth+' x '+imgHeight);
			
				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;
					}
				}
				//console.log(imgWidth+' x '+imgHeight);
				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('-------------------------------------------------------');
	}
	
	//setting the actions when clicking on a gallery item
	$('#largeView li.zoomable a').each(function(i){ 
		mediaItem[i] = $(this).attr('class');
		$(this).click(function(){
			showMedia(mediaItem[i],i,'multi')
			return false;
		});
	});
	$('.imgHolderSmall a.zoomable').click(function(){
		showMedia($(this).attr('href'),1,'single');
		return false;
	});
	$('.mag a').click(function(){
		//console.log($(this).attr('class'));
		showMedia($(this).attr('class'),1,'multi');
		return false;
	});
	$('.magOther a').click(function(){
		//console.log($(this).attr('class'));
		showMedia($(this).attr('href'),1,'single');
		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);
		//alert(theNum);
		$('.mag'+theNum+', .magOther').show();
		return false;
	});
	
	//overriding the above statement
	$('#mediaHolder').click(function(){
		return false;																		
	});

	//the next button
	$('#mediaNext').click(function(){
		showMedia(mediaItem[mediaNumber+1],mediaNumber+1);															 
		return false;
	});
	
	//the back button
	$('#mediaBack').click(function(){
		showMedia(mediaItem[mediaNumber-1],mediaNumber-1);															 
		return false;
	});
	
	
	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());
			$('#mediaDownload').show();
			$('#mediaDownload').click(function(){
				window.open(mediaSource);
			});
		} else {
			//if its not a document, reset the width of the #mediaContent div
			documentWidth = defaultMediaContentWidth-40;	
			$('#mediaContent').css('width',documentWidth);
			$('#mediaDownload').hide();
		}
		if(mediaContentWidth > documentWidth) {
			mediaContentWidth = documentWidth;	
		} else {
			mediaContentWidth = defaultMediaContentWidth;	
		}
		
		mediaBtnsHeight = $('#mediaButtons').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
		holderWidth = 700;
		holderHeight = 520;
		offsetTop = 0;// -(holderHeight)+(holderPaddingTB*2)+4;
		offsetLeft = -(holderWidth / 2)-(holderPaddingLR/2)+100;
		fileOffsetTop = -(fileHeight / 2);
		fileOffsetLeft = -(fileWidth / 2);
		
		/*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);
		
		//console.log(fileWidth+' '+fileHeight);
		$('#mediaFile img').css({
			opacity: 0,
			top:'50%',
			left:'50%',
			marginTop:fileOffsetTop+'px',
			marginLeft:fileOffsetLeft+'px',
		});
		$('#mediaFile img').animate({
			opacity: 1
		},{duration: 'slow'});
		
		//animate the box
		$('#mediaHolder').css({
			width:700+'px',
			height:520+'px',
			marginTop:0+'px',
			marginLeft: offsetLeft+'px'
			});
		//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: '700px', height: '500px'});
			/*$('#mediaFile').animate({
				width:fileWidth+'px',
				height:fileHeight+'px',
				opacity: 1
				},{
					duration: 'slow'
				});*/
		}
		
	}
});