// 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="mediaLink"><a href="">Click here for more info</a></div><!-- media link --><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').hide();
		/*$('body').css('overflow-y','auto');
		$('html').css('overflow-y','hidden');*/
	}
	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;
		source = source.replace('mediaItem ','');
		//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();
		$('#mediaCaption').hide();
		$('#mediaLink').hide();
		$('#mediaFader').fadeIn(500);
		$('#mediaContainer').fadeIn(500);
		
		//getting the bits ans pieces
		mediaSource = '';
		mediaSource = $('.'+source+' img').attr('imgUrl');
		mediaCaption = '';
		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;
			fileWidth = $('.'+source+' img').attr('imgwidth');
			fileHeight = $('.'+source+' img').attr('imgheight');
		/*console.log('imgWidth: '+fileWidth);
		console.log('imgHeight: '+fileHeight);*/
				//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);
				//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: '+fileWidth);
		console.log('imgHeight: '+fileHeight);*/
				
		//console.log('-------------------------------------------------------');
	}
	
	function resizeWindow() {
		$('#mediaFile').append('<img src="'+mediaSource+'" width="'+fileWidth+'" height="'+fileHeight+'"/>');

		if($('.'+source+' a').attr('href')) {
			$('#mediaLink').empty();
			$('#mediaLink').append('<a href=""><img src="images/shopping3.jpg"/></a>');
			$('#mediaLink').show();	
			$('#mediaLink a').click(function() {
				document.location.href = $('.'+source+' a').attr('href');
				return false;
			});
		} 
		/*console.log(mediaSource);
		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 its not a document, reset the width of the #mediaContent div
		documentWidth = defaultMediaContentWidth-40;	
		$('#mediaDownload').hide();

		mediaBtnsHeight = $('#mediaButtons').innerHeight();
		mediaCaptionHeight = $('#mediaCaption').innerHeight();
		holderPaddingTB = $('#mediaHolder').innerHeight() - $('#mediaHolder').height();
		holderPaddingLR = $('#mediaHolder').innerWidth() - $('#mediaHolder').width();
		holderWidth = 920;
		holderHeight = 550;
		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);*/
				
		//animate the box
		$('#mediaHolder').animate({
			width:holderWidth+'px',
			height:holderHeight+'px',
			marginTop:offsetTop+'px',
			marginLeft: offsetLeft+'px'
			},{
				duration: 'slow'
			});
		//console.log(documentWidth);
		//if there is no content, hide the div so the image is full width		
		$('#mediaContent').hide();
		$('#mediaFile').css({width: '200px', height: '200px', opacity: 0});
		$('#mediaFile').animate({
			width:holderWidth+'px',
			height:(holderHeight-35)+'px',
			opacity: 1
			},{
				duration: 'slow'
			});
		
	}
	
	//setting the actions when clicking on a gallery item
	$('.mediaItem').each(function(i){ 
		mediaItem[i] = $(this).attr('class'); 
		$(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;																		
	});

	
	
});