// written by Matthias on 21/10/2008
// edited by Matthias on 13/02/09
var catalogueNumber = 0;
var catalogueItem = [];
var catalogueSource = '';
var catalogueContent = '';
var catalogueCaption = '';
//developer customisation controls
	//video player 
		videoWMode = '';
		videoBGColor = '';
	//swf player
		swfWMode = '';
		swfBGColor = '';
	//background of the holder	
	catalogueBG = '';
$(document).ready(function() {
	$('body').append('<div id="catalogueFader"></div><!-- catalogue fader --><div id="catalogueContainer"><div id="catalogueHolder"><div id="catalogueButtons"><div id="catalogueClose">Close X</div><!-- catalogue close --><div id="catalogueLink"><a href="">Click here for more info</a></div><!-- catalogue link --><div id="catalogueNext">Next <span class="catalogueDir">&raquo;</span></div><!-- catalogue next --><div id="catalogueBack"><span class="catalogueDir">&laquo;</span> Back</div><!-- catalogue back --></div><!-- catalogue buttons --><div id="catalogueContent"></div><!-- catalogue content --><div id="catalogueFile"></div><!-- catalogue file --><div id="catalogueDownload"><a href="">Click here to download file</a></div><!-- catalogue download --><div id="catalogueCaption"></div><!-- catalogue caption --></div><!-- catalogue holder --></div><!-- catalogue container -->');
	if($.browser.msie && $.browser.version == 6) {
		$('#catalogueFader').hide();
		/*$('body').css('overflow-y','auto');
		$('html').css('overflow-y','hidden');*/
	}
	defaultcatalogueContentWidth = $('#catalogueContent').innerWidth();
	defaultcatalogueContentPadding = $('#catalogueContent').innerWidth() - $('#catalogueContent').width();
	$('#catalogueFader').hide();
	$('#catalogueContainer').hide();
	$('#catalogueDownload').hide();
	
	function showcatalogue(source2,currentNumber) {
		if($.browser.msie && $.browser.version == 6) {
			$('select').each(function(){
				$(this).hide();
			});
		}

		source = source2;
		source = source.replace('catalogueItem ','');
		//console.log(source);
		
		catalogueNumber = currentNumber;
		
		//emptying out content which may be in the gallery already
		$('#catalogueFile').empty();
		$('#catalogueContent').empty();
		$('#catalogueCaption').empty();
		$('#catalogueBack').hide();
		$('#catalogueNext').hide();
		$('#catalogueCaption').hide();
		$('#catalogueLink').hide();
		$('#catalogueFader').fadeIn(500);
		$('#catalogueContainer').fadeIn(500);
		
		//getting the bits ans pieces
		catalogueSource = '';
		catalogueSource = $('.'+source+' img').attr('imgUrl');
		catalogueCaption = '';
		catalogueContent = '';

		//getting the mine type of the file (ie. img, flv, mp3, swf or other)
		catalogueSourceSplit = catalogueSource.split('.');
		fileType = catalogueSourceSplit[catalogueSourceSplit.length-1];
		//console.log(fileType);
		
		/*console.log(catalogueSource);
		console.log(catalogueContent);
		console.log(catalogueCaption);*/
		
		//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 = catalogueSource;
			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() {
		$('#catalogueFile').append('<img src="'+catalogueSource+'" width="'+fileWidth+'" height="'+fileHeight+'"/>');

		if($('.'+source+' a').attr('href')) {
			$('#catalogueLink').empty();
			$('#catalogueLink').append('<a href=""><img src="images/shopping3.jpg"/></a>');
			$('#catalogueLink').show();	
			$('#catalogueLink a').click(function() {
				document.location.href = $('.'+source+' a').attr('href');
				return false;
			});
		} 
		/*console.log(catalogueSource);
		console.log(defaultcatalogueContentPadding);*/
				
		//getting content dimensions
		catalogueFileWidth = $('#catalogueFile').innerWidth();
		catalogueFileHeight = $('#catalogueFile').innerHeight();
		catalogueContentWidth = $('#catalogueContent').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 #catalogueContent div
		documentWidth = defaultcatalogueContentWidth-40;	
		$('#catalogueDownload').hide();

		catalogueBtnsHeight = $('#catalogueButtons').innerHeight();
		catalogueCaptionHeight = $('#catalogueCaption').innerHeight();
		holderPaddingTB = $('#catalogueHolder').innerHeight() - $('#catalogueHolder').height();
		holderPaddingLR = $('#catalogueHolder').innerWidth() - $('#catalogueHolder').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('catalogueFileWidth: '+catalogueFileWidth);
		console.log('catalogueFileHeight: '+catalogueFileHeight);
		console.log('catalogueContentWidth: '+catalogueContentWidth);
		console.log('catalogueBtnsHeight: '+catalogueBtnsHeight);
		console.log('catalogueCaptionHeight: '+catalogueBtnsHeight);
		console.log('catalogue: '+catalogueContentWidth);*/
				
		//animate the box
		$('#catalogueHolder').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		
		$('#catalogueContent').hide();
		$('#catalogueFile').css({width: '200px', height: '200px', opacity: 0});
		$('#catalogueFile').animate({
			width:holderWidth+'px',
			height:(holderHeight-35)+'px',
			opacity: 1
			},{
				duration: 'slow'
			});
		
	}
	
	//setting the actions when clicking on a gallery item
	$('.catalogueItem').each(function(i){ 
		catalogueItem[i] = $(this).attr('class'); 
		$(this).click(function(){
			showcatalogue(catalogueItem[i],i)
			return false;
		});
	});
	
	//hide the large view when you click outside or on the close box
	$('#catalogueContainer, #catalogueClose').click(function(){ 
		$('#catalogueFader').fadeOut(500); 
		$('#catalogueContainer').fadeOut(500);
		if($.browser.msie && $.browser.version == 6) {
			$('select').each(function(){
				$(this).show();
			});
		}

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

	
	
});