// 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="mediaButtons"><div id="mediaClose">Close X</div><!-- mediaClose --></div><!-- media buttons --><div id="mediaView"><div id="mediaFile"></div><!-- media file --></div><!-- mediaView --></div><!-- media holder --></div><!-- media container -->');
	defaultMediaContentWidth = $('#mediaContent').innerWidth();
	defaultMediaContentPadding = $('#mediaContent').innerWidth() - $('#mediaContent').width();
	$('#mediaFader').hide();
	$('#mediaContainer').hide();
	$('#mediaDownload').hide();
	
	function showMedia(source2) {
		if($.browser.msie && $.browser.version == 6) {
			var pagetop = $(document).attr('URL');
			pagetop = pagetop.replace(/#.*/,'')+"#nav";
			$(document).attr('location',pagetop);
			$('html').css('overflow-y','hidden');
		}
		
		// because I have a class on .last on the right most box of thumbnails, we have to remove it from the string when it passes into the jquery.
		source = source2.replace(' last','');
		mediaNumber = 1;
		
		//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);


		/*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 = $('.magViewer .'+source+' a').attr('href');
		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())-100;
		windowHeight = ($(window).height())-200;
		//console.log($(window).height());
		//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 = $('.magViewer .'+source+' a').attr('imgwidth');
			imgHeight = $('.magViewer .'+source+' a').attr('imgheight');
				//console.log(imgWidth+' x '+imgHeight+"\n"+windowWidth+' x '+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; }
			//	console.log(imgWidth+' x '+imgHeight);
				//console.log(fileWidth+' x '+fileHeight);
				//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
	$('.magViewer li').each(function(i){ 
		mediaItem[i] = $(this).attr('class');
		$(this).click(function(){
			showMedia(mediaItem[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) {
			$('html').css('overflow-y','auto');
		}

		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();
		$('#mediaView').css('overflow','auto');
		//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 its not a document, reset the width of the #mediaContent div
		documentWidth = defaultMediaContentWidth-40;	
		$('#mediaContent').css('width',documentWidth);
		$('#mediaCaption').css('textAlign','center');
		$('#mediaDownload').hide();
		
		mediaBtnsHeight = $('#mediaButtons').innerHeight();
		mediaCaptionHeight = $('#mediaCaption').innerHeight();
		holderPaddingTB = $('#mediaHolder').innerHeight() - $('#mediaHolder').height();
		holderPaddingLR = $('#mediaHolder').innerWidth() - $('#mediaHolder').width();
		holderWidth = fileWidth;
		holderHeight = ($(window).height())-60;
		/*console.log('window height: '+$(window).height());
		console.log('fileHeight: '+fileHeight);
		console.log('holderPadding: '+holderPaddingTB)
		console.log('media btns height: '+mediaBtnsHeight);
		console.log('holderHeight: '+holderHeight);*/
		offsetTop = -(holderHeight / 2)-(holderPaddingTB/2);
		offsetLeft = -(holderWidth / 2)-(holderPaddingLR/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);
		$('#mediaCaption').append(mediaCaption);
		
		//animate the box
		$('#mediaHolder').animate({
			width:holderWidth+'px',
			height:holderHeight+'px',
			marginTop:offsetTop+'px',
			marginLeft: offsetLeft+'px'
			},{
				duration: 'slow'
			});		
		
		//animate the box
		$('#mediaView').animate({
			width:fileWidth+'px',
			height:holderHeight-(holderPaddingTB*2)+'px'
			},{
				duration: 'slow'
			});
		//console.log(documentWidth);

		$('#mediaFile').css({width: '200px', height: '200px', opacity: 0});
		$('#mediaFile').animate({
			width:fileWidth-20+'px',
			height:fileHeight+'px',
			opacity: 1
			},{
				duration: 'slow'
			});
	
	}
});