//media gallery jquery
var mediaItem = [];
var currentMediaItem = 0;
$(document).ready(function() {
	$('body').append('<div id="mediaFader"></div><!-- media fader --><div id="mediaBackground"><div id="mediaContainer"><div id="mediaRight"><div id="mediaContent"></div><!-- media content --><div id="mediaButtons"><div id="mediaBack"></div><div id="mediaNext"></div><div id="mediaClose"> Close X</div></div></div><!-- media right --><div id="mediaFile"><img src=""/></div><!-- media file --><div id="mediaCaption"></div><!-- media caption --></div><!-- media container --></div><!-- media background -->');
	$('#mediaFader').hide();
	$('#mediaBackground').hide();

	function showItem(source,currentNumber) {
		if($.browser.version >= '1.9.0.0') {
			scrolloffsets = getScrollXY();
			scrolloffset = scrolloffsets[1];
		} else {
			scrolloffset = 0;
		}
		currentMediaItem = currentNumber;

		$('#mediaFile').empty();
		$('#mediaCaption').empty();
		$('#mediaBack').empty();
		$('#mediaNext').empty();

		//alert($.browser);
		//alert($.browser.version);

		$('#mediaFader').css('top',scrolloffset+'px');
		$('#mediaBackground').css('top',scrolloffset+'px');
		$('#mediaFader').fadeIn(500);
		$('#mediaBackground').fadeIn(500);
		$('html').css('overflow','hidden');
		
		source = '.'+source;
		source = source.replace(' last','');
		var mediaImage = $(source+' a').attr('href');
		var mediaContent = $(source+' div.imgContent').html();
		var mediaCaption = $(source+' p.mediaCaption').text();

		//hide the next and back buttons, depending on what file number you are on
		if(currentNumber <= 0) {
			$('#mediaBack').css('cursor','default'); 
			$('#mediaBack').empty();
		} else {
			$('#mediaBack').css('cursor','pointer'); 
			$('#mediaBack').append('&lt; Previous');
		}
		if(currentNumber >= mediaItem.length-1) {
			$('#mediaNext').css('cursor','default');
			$('#mediaNext').empty(); 
		} else {
			$('#mediaNext').css('cursor','pointer'); 
			$('#mediaNext').append('Next &gt;');
		}

		$('#mediaRight #mediaContent').empty();
		$('#mediaRight #mediaContent').append(mediaContent);
				
		var viewport = [
		(window.innerWidth || self.innerWidth || (document.documentElement&&document.documentElement.clientWidth) || document.body.clientWidth),
		(window.innerHeight || self.innerHeight || (document.documentElement&&document.documentElement.clientHeight) || document.body.clientHeight)
		];

		var x = viewport[0] - 120;
		var y = viewport[1] - 120;

		//capturing the necessary padding from the element, comes back as 0px
		mediaFilePT = $('#mediaFile').css('paddingTop');
		mediaFilePR = $('#mediaFile').css('paddingRight');
		mediaFilePB = $('#mediaFile').css('paddingBottom');
		mediaFilePL = $('#mediaFile').css('paddingLeft');
		mediaContentPT = $('#mediaContent').css('paddingTop');
		mediaContentPB = $('#mediaContent').css('paddingBottom');
		mediaContentHeight = $('#mediaContent').height();
		mediaClosePT = $('#mediaClose').css('paddingTop');
		mediaClosePB = $('#mediaClose').css('paddingBottom');
		mediaCloseHeight = $('#mediaClose').height();
		mediaButtonsPT = $('#mediaButtons').css('paddingTop');
		mediaButtonsPB = $('#mediaButtons').css('paddingBottom');
		mediaButtonsHeight = $('#mediaButtons').height();
		mediaRightWidth = $('#mediaRight').width();
		mediaRightPR = $('#mediaRight').css('paddingRight');
		mediaRightPL = $('#mediaRight').css('paddingLeft');
		mediaCaptionPT = $('#mediaCaption').css('paddingTop');
		mediaCaptionPB = $('#mediaCaption').css('paddingBottom');
		mediaCaptionHeight = $('#mediaCaption').height();
				
		// convert all above elements to a number using parseFloat, and then replacing the px with nothing to get a true number
		mediaFilePT2 = parseFloat(mediaFilePT.replace('px',''));
		mediaFilePR2 = parseFloat(mediaFilePR.replace('px',''));
		mediaFilePB2 = parseFloat(mediaFilePB.replace('px',''));
		mediaFilePL2 = parseFloat(mediaFilePL.replace('px',''));
		mediaContentPT2 = parseFloat(mediaContentPT.replace('px',''));
		mediaContentPB2 = parseFloat(mediaContentPB.replace('px',''));
		mediaClosePT2 = parseFloat(mediaClosePT.replace('px',''));
		mediaClosePB2 = parseFloat(mediaClosePB.replace('px',''));
		mediaButtonsPT2 = parseFloat(mediaButtonsPT.replace('px',''));
		mediaButtonsPB2 = parseFloat(mediaButtonsPB.replace('px',''));
		mediaRightPR2 = parseFloat(mediaRightPR.replace('px',''));
		mediaRightPL2 = parseFloat(mediaRightPL.replace('px',''));
		mediaCaptionPT2 = parseFloat(mediaCaptionPT.replace('px',''));
		mediaCaptionPB2 = parseFloat(mediaCaptionPB.replace('px',''));
		
		mediaCloseHeight = mediaClosePT2+mediaClosePB2+mediaCloseHeight;
		mediaContentHeight = mediaContentHeight+mediaContentPB2+mediaContentPT2;
		mediaButtonsHeight = mediaButtonsHeight+mediaButtonsPB2+mediaButtonsPT2;
		mediaDimentions = mediaRightPR2+mediaRightPL2+mediaRightWidth-80;


		/*alert($('.img'+(currentNumber+1)).width());
		alert($('.img1').width());
		alert($('.mediaItem'+(currentNumber+1)+' img').attr('width'))*/
		if($.browser.version >= '1.9.0.0') {
			var imageWidth = $('.img'+(currentNumber+1)).width();
			var imageHeight = $('.img'+(currentNumber+1)).height();
		} else {
			var imageWidth = $('.mediaItem'+(currentNumber+1)+' img').attr('width');
			var imageHeight = $('.mediaItem'+(currentNumber+1)+' img').attr('height');
		}

		if (imageWidth > x)
		{
			imageHeight = imageHeight * (x / imageWidth); 
			imageWidth = x; 
			if (imageHeight > y)
			{ 
				imageWidth = imageWidth * (y / imageHeight); 
				imageHeight = y; 
			}
		}
		else if (imageHeight > y)
		{ 
			imageWidth = imageWidth * (y / imageHeight); 
			imageHeight = y; 
			if (imageWidth > x)
			{ 
				imageHeight = imageHeight * (x / imageWidth); 
				imageWidth = x;
			}
		}
		
		mediaFileHeight = Math.floor(imageHeight+mediaFilePT2+mediaFilePB2);
		mediaContainerWidth = Math.floor(imageWidth+mediaFilePR2+mediaFilePL2+mediaDimentions);
		mediaContainerHeight = mediaFileHeight+Math.floor(mediaCaptionPT2+mediaCaptionPB2+mediaCaptionHeight);
		
		$('#mediaFile').append('<img src="'+mediaImage+'" width="'+imageWidth+'" height="'+imageHeight+'"/>');
		$('#mediaCaption').append(mediaCaption);
		//animate the box, to resize and re-align 
		$('#mediaFile').animate({
			width: imageWidth+'px',
			height: imageHeight+'px'
		},{duration: 'slow'});
		
		$('#mediaContent').animate({
			height: imageHeight-mediaButtonsHeight-17+'px'						 	
		},{duration: 'slow'});
		
		$('#mediaContainer').animate({
			marginTop: '-'+(mediaContainerHeight / 2)+'px',
			marginLeft: '-'+(mediaContainerWidth / 2)-60+'px',
			width: mediaContainerWidth+90+'px',
			height: mediaContainerHeight+'px'
		},{ duration: 'slow'});

/*		$('#mediaContainer').animate(function() {
			marginTop: '-'+(225+scrolloffset)+'px';																			
		});*/
		return false;
	}
	//setting the link details for each image
	$('.gallery2 li').each(function(i){
		mediaItem[i] = $(this).attr('class');
		$(this).click(function(){
			showItem(mediaItem[i],i);			
			return false;
		});						
	});
	
	//hide the large view when you click outside or on the close box
	$('#mediaBackground, #mediaClose').click(function(){ 
		$('html').css('overflow','auto');
		$('#mediaFader').fadeOut(500); 
		$('#mediaBackground').fadeOut(500);
		return false;
	});
	
	$('#mediaRight,#mediaFile').click(function(){
		return false;																		
	});

	$('#mediaNext').click(function() {
		showItem(mediaItem[currentMediaItem+1],currentMediaItem+1);
		return false;
	});
	$('#mediaBack').click(function() {
		showItem(mediaItem[currentMediaItem-1],currentMediaItem-1);
		return false;
	});
});

function getScrollXY() {
	var x = 0, y = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		// Netscape
		x = window.pageXOffset;
		y = window.pageYOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		// DOM
		x = document.body.scrollLeft;
		y = document.body.scrollTop;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		// IE6 standards compliant mode
		x = document.documentElement.scrollLeft;
		y = document.documentElement.scrollTop;
	}
	return [x, y];
}