// JavaScript Document

var fadeSpeed = 700;

$(document).ready(function() {
	$("#info_area").fadeOut(0, function() {
		document.getElementById('info_area').style.visibility = "hidden";
	});
}); //document ready

function loadPage(pagename,subPage) {
	if(pagename != 'home') {
		$("#main_photo").fadeOut(fadeSpeed);
		$("#info_area").fadeOut(fadeSpeed, function() {
			//stop sliding?
			document.getElementById('main_photo').style.visibility = "hidden";   
			document.getElementById('info_area').style.visibility = "visible";
			//load in the appropriate page data
			thisURL = pagename + ".php";
			if(subPage != '') {
				thisURL = thisURL + "?this=" + subPage;
				pageTracker._trackPageview('/services/' + subPage);
			} else {
				pageTracker._trackPageview('/' + pagename);
			}
			
			$.ajax({
				url: thisURL,
				success: function(data) {
					$('.result').html(data);
					//alert('Load was performed.');
					document.getElementById("info_area").innerHTML = '<div style="padding:14px 15px 15px 15px;">' + data + '</div>';
					
						//once loaded....
					$('#info_area').fadeIn(fadeSpeed, function() {
						//done
					});
				}
			});
			
			
		});
	}
} //

function loadPortfolio() {
	$("#main_photo").fadeOut(fadeSpeed);
	$("#info_area").fadeOut(fadeSpeed, function() {
		document.getElementById('main_photo').style.visibility = "hidden";   
		document.getElementById('info_area').style.visibility = "visible";
		//load in the appropriate page data
		$.ajax({
			url: "flickr_folio.html",
			success: function(data) {
				$('.result').html(data);
				//alert('Load was performed.');
				document.getElementById("info_area").innerHTML = data;
				loadMyPortfolio();
				
					//once loaded....
				$('#info_area').fadeIn(fadeSpeed, function() {
					//done
				});
			}
		});
	});
}

function loadLarger(imgURL,width,height,title,photoID) {
	var largeImage = document.getElementById('large_portfolio_img');

	if(largeImage.src != imgURL) {
		//replace current image with loading gif and get this image loading full res
		largeImage.src = '/images/img_loading_large.gif';
		document.getElementById('photo_title').innerHTML = title;
		$('#tmpImage').attr('src', imgURL).load(function() {
			largeImage.src = imgURL;	//loaded, so swap into proper position
		});
		//check for image size problems
		var max_width = 425; var max_height = 283;	//standard height and width
		var scale_ratio = 0.85;
		var reduced_width = width*scale_ratio; var reduced_height = height*scale_ratio;
		var flickr_page = "http://www.flickr.com/photos/41580503@N02/" + photoID + "/";
	
		if(reduced_height > max_height) {
			//must reduce it to max, as well as height
			scale_ratio = max_height / height;
			reduced_width = Math.round(width*scale_ratio);
			reduced_height = Math.round(height*scale_ratio);
		}		//is the reduced_height more than max? If yes reduce again...
		largeImage.width = reduced_width;
		largeImage.height = reduced_height;
		document.getElementById('flickr_link').href = flickr_page;
		document.getElementById('fb_share').href = 
			"http://www.facebook.com/sharer.php?u=" + encodeURIComponent(flickr_page)
			+ "&t=" + title;
	}
}

function loadMyPortfolio() {
	var myQueue = "myQueue";
	
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(1, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[0];
			//change the image to the correct source
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
				
			loadLarger(url, width, height, title, photoID);
		});
	});
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(2, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[1];
			//change the images to the correct sources
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
		});
	});
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(3, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[2];
			//change the images to the correct sources
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
		});
	});
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(4, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[3];
			//change the images to the correct sources
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
		});
	});
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(5, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[4];
			//change the images to the correct sources
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
		});
	});
	$('#folio_thumbs').queue(myQueue, function () {
		$.getAjaxImgXML(6, function(xml) {
			//move onto next load
			$('#folio_thumbs').dequeue(myQueue);
			//get handle for this thumbnail
			var thisThumb = document.getElementById('folio_thumbs').children[5];
			//change the images to the correct sources
			thisThumb.children[0].src = $(xml).find('url').text();
			
			//grab the details for the medium image....
			var url = $(xml).find('med_url').text();
			var width = $(xml).find('width').text();
			var height = $(xml).find('height').text();
			var title = $(xml).find('title').text();
			var photoID = $(xml).find('photoID').text();
			//....and bind to onclick event
			thisThumb.onclick =
				function (){ loadLarger(url, width, height, title, photoID); };
		});
	}); //load remaining thumbs in the same way....
	$('#folio_thumbs').queue(myQueue, function () {
		document['forward_arrow'].style.visibility = "visible";
	});
	$('#folio_thumbs').dequeue(myQueue);
}

function getAjaxImgXML(offset) {
	urlstring = 'functions.php?type=loadMyPortfolio&offset=' + offset;
	$.get(urlstring, function(data) {
		//alert('loaded');
		return data;
		$('#folio_thumbs').dequeue();
	});
}

$.extend({
  getAjaxImgXML : function(item, callbackFnk){
    var url = 'functions.php?type=loadPortfolioImg&item=' + item;
    $.get(url, function(data){
		//alert('loaded data');
		// now we are calling our own callback function
		if($.isFunction(callbackFnk)){
			callbackFnk.call(this, data);
		}
    });
  }
})

function scrollPortfolio(dir, thumb_no) {
	var thumbLinks = document.getElementById('folio_thumbs').children;
	
	if(dir == 'forward') {
		var next_back_thumb = thumb_no - 6;
		var next_forward_thumb = thumb_no + 1;
		var targetThumb = thumbLinks[5];
	} else {
		var next_back_thumb = thumb_no - 1;
		var next_forward_thumb = thumb_no + 6;
		var targetThumb = thumbLinks[0];
	}
	
	$.getAjaxImgXML(thumb_no, function(xml) {
		//change the image to the correct source
		targetThumb.children[0].src = $(xml).find('url').text();
		
		//grab the details for the medium image....
		var url = $(xml).find('med_url').text();
		var width = $(xml).find('width').text();
		var height = $(xml).find('height').text();
		var title = $(xml).find('title').text();
		var photoID = $(xml).find('photoID').text();
		//....and bind to onclick event
		targetThumb.onclick =
			function (){ loadLarger(url, width, height, title, photoID); };
	});
	
	$("#folio_thumbs").fadeOut(500, function() {
		if(dir == 'forward') {
			thumbLinks[0].onclick = thumbLinks[1].onclick;		//move thumbs left
			thumbLinks[0].children[0].src = thumbLinks[1].children[0].src;
			thumbLinks[1].onclick = thumbLinks[2].onclick;
			thumbLinks[1].children[0].src = thumbLinks[2].children[0].src;
			thumbLinks[2].onclick = thumbLinks[3].onclick;
			thumbLinks[2].children[0].src = thumbLinks[3].children[0].src;
			thumbLinks[3].onclick = thumbLinks[4].onclick;
			thumbLinks[3].children[0].src = thumbLinks[4].children[0].src;
			thumbLinks[4].onclick = thumbLinks[5].onclick;
			thumbLinks[4].children[0].src = thumbLinks[5].children[0].src;
			targetThumb.children[0].src = '/images/img_loading.gif';	//then place loading gif
		} else {
			thumbLinks[5].onclick = thumbLinks[4].onclick;		//move thumbs right
			thumbLinks[5].children[0].src = thumbLinks[4].children[0].src;
			thumbLinks[4].onclick = thumbLinks[3].onclick;
			thumbLinks[4].children[0].src = thumbLinks[3].children[0].src;
			thumbLinks[3].onclick = thumbLinks[2].onclick;
			thumbLinks[3].children[0].src = thumbLinks[2].children[0].src;
			thumbLinks[2].onclick = thumbLinks[1].onclick;
			thumbLinks[2].children[0].src = thumbLinks[1].children[0].src;
			thumbLinks[1].onclick = thumbLinks[0].onclick;
			thumbLinks[1].children[0].src = thumbLinks[0].children[0].src;
			targetThumb.children[0].src = '/images/img_loading.gif';	//then place loading gif
		}
		
		if(thumb_no == 7) {
			document['back_arrow'].style.visibility = "visible";
			document['back2start_arrow'].style.visibility = "visible";
		} else if(thumb_no == 1) {
			document['back_arrow'].style.visibility = "hidden";
			document['back2start_arrow'].style.visibility = "hidden";			
		}
		$("#folio_thumbs").fadeIn(500, function() {
			document.getElementById('my_back_arrow').onclick = function (){ scrollPortfolio('back', next_back_thumb); };
			document.getElementById('my_next_arrow').onclick = function (){ scrollPortfolio('forward', next_forward_thumb); };
		});
	});
}