// setting global vars
var pageWidth = 377;
var pageDisplay = 2;
var slideWidth = pageWidth*pageDisplay;
var pageCount = 0;
var catWidth = 0;
var catHolder = '.catalogueHolder';
var catBtns = '.catalogueBtns';
var onPage = 0;
var strollSpeed = 400;

// setting global variables
var fadeSpeed = 600;
var bgFadeSpeed = 400;
var mediaArr = new Array();
var media = 0;
var mediaImg = '';
var mediaHeading = '';
var mediaContent = '';
var browserWindowWidth = ($(window).width())-20;
var browserWindowHeight = ($(window).height())-20;
var windowWidth = ($(window).width())-20;
var windowHeight = ($(window).height())-20;
var captionHeight = 0;
var contentWidth = 0; 
var imgWidth = 0;
var imgHeight = 0;
var fileWidth = 0;
var fileHeight = 0;
var boxWidth = 800;
var boxHeight = 540;
var boxPadding = 20;
var btnHeight = 26;
var boxOffsetX = -410;
var boxOffsetY = -280;
var nextBtn = 'Next <span class="mediaDir">&raquo;</span>';
var backBtn = '<span class="mediaDir">&laquo;</span> Back';
var windowSize = '';

$(document).ready(function(){
	$('body').append('<div id="mediaFader"></div><!-- media fader --><div id="mediaContainer"><div id="mediaBox" class="mediaBoxLoader"><div id="mediaButtons"><div id="mediaClose">Close X</div><!-- media close --></div><!-- media buttons --><div id="mediaContent"></div><!-- media content --><div id="mediaLeft"><div id="mediaFile"></div><!-- media file --><div id="mediaCaption"></div><!-- media caption --></div><!-- media left --></div><!-- media box --></div><!-- media container -->');
	$('#mediaFader, #mediaContainer').hide();
	if($.browser.msie && $.browser.version == 6) {
		$('body').css('overflow-y','auto');
		$('html').css('overflow-y','hidden');
		$('#nav li').each(function(){ $(this).css('position','static'); });
		$('.hpImg img').each(function(){ $(this).css('position','static'); });
	}
	setCatWidth();
	setCatBtns();
	
	// setting the clicks
	$('.catBtnNext').click(function(){ onPage ++; slideCatalogue('next'); });
	$('.catBtnBack').click(function(){ onPage --; slideCatalogue('back'); });
	$('.catBtn').click(function(){ 
		$('.catBtn').each(function(){ $(this).removeClass('onPage'); });
		$(this).addClass('onPage');
		var num = $(this).text().split('-');
		slideCatalogue(parseInt(num[0])); 
	}); 
	
	// setting up the popups
	$('map area').each(function(){
		$(this).click(function(){
			media = $(this).attr('href');
			windowSize = $(this).attr('class');
			fadeBg(media);
			return false;
		});														
	});
	// close the popup
	$('#mediaContainer, #mediaClose').click(function(){
		//console.log('... closing ...');
		$('#mediaFader, #mediaContainer').fadeOut(bgFadeSpeed, function() { unloadMedia() } );
		if($.browser.msie && $.browser.version == 6) {
			$('select').each(function(){
				$(this).show();
			});
		}
	});
	


});


// sets the width of the catalogue
function setCatWidth() {
	$(catHolder+' li.catPage').each(function(i){ pageCount = i+1; });
	catWidth = pageWidth * (pageCount+1)
	$(catHolder+' ul').width(catWidth);
	
	$(catHolder).width(slideWidth);	
	//console.log('page count: '+pageCount);
	//console.log('cat width: '+catWidth);
}

// setups the buttons 
function setCatBtns() {
	btnTotal = Math.ceil(pageCount / 2); 
	$(catBtns).append('<ul>');
	var num = 0;
	for(i=0;i<=btnTotal;i++) {
		num++;
		if(i == 0) { $(catBtns).append('<li class="catBtnBack">&lt</li><li class="catBtn onPage">1</li>') } 
		else if(i < btnTotal) {	$(catBtns).append('<li class="catBtn">'+((num+i)-1)+'-'+(num+i)+'</li>'); }
		else { $(catBtns).append('<li class="catBtn">'+((num+i)-1)+'</li>'); } 
		if(i == (btnTotal)) $(catBtns).append('<li class="catBtnNext">&gt;</li>');
	}
	$(catBtns).append('</ul>');
}

// slides the catalogue
function slideCatalogue(dir) {
	//console.log('onPage: '+onPage); 
	var currentX = parseInt($(catHolder+' ul').css('left').replace('px',''));
	var itemX = 0; 
	if(dir == 'next') { 
		dir = onPage+1;	onPage++; 
		$(catBtns+' .onPage').removeClass('onPage').next().addClass('onPage');
	}
	if(dir == 'back') { 
		dir = onPage-1;	onPage--; 
		$(catBtns+' .onPage').removeClass('onPage').prev().addClass('onPage');
	}
	if(dir == 1) dir = 0;
	var slideLength = dir * pageWidth;
	itemX = -slideLength;
	onPage = dir;
	//console.log(dir+' : '+btnTotal);
	if(dir > 1) { $('.catBtnBack').css('visibility','visible'); } else { $('.catBtnBack').css('visibility','hidden'); }
	if(dir <= btnTotal+2) { $('.catBtnNext').css('visibility','visible'); } else { $('.catBtnNext').css('visibility','hidden'); }
	$(catHolder+' ul').animate({
		left: itemX
	},strollSpeed);
	
	//console.log('slideLength: '+slideLength);
	//console.log('dir: '+dir);
	//console.log('currentX: '+currentX);
	//console.log('itemX: '+itemX); 
}





// fades the background in
function fadeBg(media) {
	//console.log('fading bg in...');
	//console.log('media: '+media);
	if($.browser.msie && $.browser.version == 6) {
		$('select').each(function(){
			$(this).hide();
		});
	}
	$('#mediaFader, #mediaContainer').fadeIn(bgFadeSpeed, getContent(media));
}


// unloads the media from the content area, so its not there next time we come
function unloadMedia(){
	$('#mediaContent').empty();
	$('#mediaCaption').empty();
	$('#mediaFile').empty();
};


// loading in the image and content
function getContent(media){
	//console.log('has faded up');	
	//console.log('is array: '+is_array(mediaArr[media]));
	//$('#mediaFile').fadeOut(fadeSpeed,function(){ $('#mediaFile').empty(); });
	$('#mediaBox').addClass('mediaBoxLoader');
	//console.log('content already loaded'); 	
	removeElements(media);
}

// checks if an image is an array or not
function is_array(input){
	return typeof(input)=='object'&&(input instanceof Array);
}

// load in the image so we can get the dimensions to resize the box
function loadImage(){
	//removeElements();
	var img = new Image();
	// once the image has loaded, run the code
	$(img)
		.load(function () {
			// set the image hidden by default    
			$(this).hide();
			//console.log($(this));
			//console.log('loaded the image');
			// fade our image in to create a nice effect
			$('#mediaFile').append(this);
			imgWidth = $(this).width();
			imgHeight = $(this).height();
			////console.log('width: '+imgWidth);
			////console.log('height: '+imgHeight);
			// check if there is content
			////console.log('caption length: '+mediaArr[media][2].length);
			////console.log('content length: '+mediaArr[media][3].length);
			captionHeight = 0;
			contentWidth = 0;

			// adding the new constraints to the image before it gets resized
			// resize window with and height
			windowWidth = browserWindowWidth - contentWidth - boxPadding; 
			windowHeight = browserWindowHeight - captionHeight - boxPadding - btnHeight;
			////console.log('windowWidth: '+windowWidth);
			////console.log('windowHeight: '+windowHeight);
			
			////console.log('contentWidth: '+contentWidth);
			////console.log('captionHeight: '+captionHeight);
			if(windowSize != 'large') { 
				resizeItem();
				if($.browser.msie) {
					$('#mediaFile').css('overflow','auto');
				} else {
					$('#mediaFile').css('overflow','hidden');
				}
			} else {
				imgWidth < 250 ? fileWidth = 250 : fileWidth = imgWidth+20;
				imgHeight < 250 ? fileHeight = 250 : fileHeight = windowHeight;
				$('#mediaFile').css('overflow','auto');
			}
			
			// now we set the new widths and heights of the box
			boxWidth = fileWidth + contentWidth;
			boxHeight = fileHeight + captionHeight + btnHeight;
			//console.log('img width: '+imgWidth);
			//console.log('img height: '+imgHeight);
		//	//console.log('box width: '+boxWidth);
		//	//console.log('box height: '+boxHeight);
			// now we make the new off sets for the box
			boxOffsetX = -(boxWidth / 2)-10;
			boxOffsetY = -(boxHeight / 2)-10; 
			
			$('#mediaFile img').width(imgWidth);
			$('#mediaFile img').height(imgHeight);
			////console.log('------');
		//	//console.log('width: '+imgWidth);
		//	//console.log('height: '+imgHeight);
			//$(this).show();
			//setTimeout("resizeBox()",600);
			resizeBox();
		})
		.error(function () {
			alert('error loading image');
			$('#mediaFader, #mediaContainer').fadeOut(bgFadeSpeed, function() { unloadMedia() } );
		})
		.attr('src', media).css({
			'position':'absolute',
			'top':130+'%',
			'left':130+'%'
		});
		
}


// remove elements 
function removeElements(){
	//console.log('---- resizing box ----');

	// first step we remove elements that dont need
	$('#mediaContent').fadeOut(300,function(){ $('#mediaContent').empty(); });	
	$('#mediaCaption').fadeOut(300,function(){ $('#mediaCaption').empty(); });
	$('#mediaFile img').fadeOut(300,function(){ $('#mediaFile').empty() });
	setTimeout("loadImage()",400);
	
}


// resizes the box 
function resizeBox() {
	// now we resize the width
	$('#mediaBox').animate({
		width: boxWidth,
		marginLeft: boxOffsetX
	}, fadeSpeed, function(){
		// now resize the height
		$('#mediaBox').animate({
			height: boxHeight,
			marginTop: boxOffsetY
		}, fadeSpeed, function() { loadContent() });
	});
}

// load in the content that is needed for this section
function loadContent(){
	// load in the caption and content
	//console.log('media img - : '+$('#mediaFile img').attr('src'));
	if($('#mediaFile img').attr('src') == null) { $('#mediaFile').append('<img src="'+media+'" width="'+imgWidth+'" height="'+imgHeight+'"/>'); $('#mediaFile img').hide(); }
	$('#mediaFile').width(fileWidth).height(fileHeight);
	$('#mediaLeft').width(fileWidth);
	if(windowSize == 'large') imgHeight = imgHeight - 100;
	if(windowSize != 'large') {
		$('#mediaFile img').css({
			'position':'absolute',
			'top':50+'%',
			'left':50+'%',
			'marginTop':-Math.floor(imgHeight/2),
			'marginLeft':-Math.floor(imgWidth/2)
		});
	} else {
		$('#mediaFile img').css({
			'position':'absolute',
			'top':0,
			'left':0
		});			
	}
	$('#mediaFile img').fadeIn(fadeSpeed, function(){ $('#mediaBox').removeClass('mediaBoxLoader'); });
	
	//making any content links work
	$('#mediaContent a').each(function(){
		$(this).click(function(){
			window.open($(this).attr('href'));
		});
	});
}


// resizes the image
function resizeItem() {
	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.floor(imgWidth);
	imgHeight = Math.floor(imgHeight);
	
	imgWidth < 250 ? fileWidth = 250 : fileWidth = imgWidth;
	imgHeight < 250 ? fileHeight = 250 : fileHeight = imgHeight;
	

};