$( function() {

	/**
	 * Script handling the image gallery
	 */

	/**
	 * THIS IS VERY IMPORTANT FOR INTERNET EXPLORER 6. IE6 has a problem with
	 * background images, they "flicker" while fade in/out and generate a lot of
	 * unnecessary requests. This if statement avoids that effect effect.
	 */
	if ($.browser.msie && parseInt(jQuery.browser.version, 10) == 6) {
		try {
			document.execCommand("BackgroundImageCache", false, true);
		} catch (err) {
		}
	}

	if ($('#gallery_image_big_right').attr('id')) {

		var imageCount = parseInt($('#imageCount').text());

		function hideOrShowImageInfoBox() {
			var len = $('#description').text().length
					+ $('#designedFor').text().length
					+ $('#link').text().length;
			if (len == 0) {
				$('#imageInfoTable').hide();
			} else {
				$('#imageInfoTable').show();
				if($('#description').text().length==0){
					$('.projectDescriptionRow').hide();
				}else{
					$('.projectDescriptionRow').show();
				}
				if($('#designedFor').text().length==0){
					$('.designedForRow').hide();
				}else{
					$('.designedForRow').show();
				}
				if($('#link').text().length==0){
					$('.linkRow').hide();
				}else{
					$('.linkRow').show();
				}
			}
		}

		if ($('#description').text().length + $('#designedFor').text().length
				+ $('#link').text().length == 0) {
			$('#imageInfoTable').hide();
		}

		function adaptImageMap() {

			var number = parseInt($('#gallery_image_big_right').attr('number'));
			var height = parseInt($('#gallery_image_' + number).attr('height'));
			var width = parseInt($('#gallery_image_' + number).attr('width'));
			$('#gallery_image_' + number).attr('src');

			if (width < 150) {
				$('#gallery_previous_button').css('left', -36 + 'px');
				$('#gallery_next_button').css('right', -36 + 'px');
			} else {
				$('#gallery_previous_button').css('left', 30 + 'px');
				$('#gallery_next_button').css('right', 30 + 'px');
			}

			$('#gallery_image_big_right').css('height', height + 'px');
			$('#gallery_image_big_right').css('width', width / 2 + 'px');

			$('#gallery_image_big_left').css('height', height + 'px');
			$('#gallery_image_big_left').css('width', width / 2 + 'px');
			$('#gallery_image_big_right').css('background-position',
					-width / 2 + 'px');

		}

		function initGallery() {
			$('#gallery_previous_button').fadeTo(1, 0.8, function() {
			});
			$('#gallery_next_button').fadeTo(1, 0.8, function() {
			});
			adaptImageMap();
		}

		$(document).ready( function() {
			initGallery();
		});

		window.onload = function() {
			initGallery();
		};

		$('.gallery_navi_image').bind('click', function(event) {
			var number = parseInt($(event.target).attr('number'));
			changeToImage(number);
		});

		$('#gallery_image_big_right').bind('click', function(event) {
			nextImage();
		});
		$('#gallery_image_big_left').bind('click', function(event) {
			previousImage();
		});

		$('#gallery_next_button').bind('click', function(event) {
			nextImage();
		});
		$('#gallery_previous_button').bind('click', function(event) {
			previousImage();
		});

		var previousButtonDisplayed = false;
		var nextButtonDisplayed = false;

		$('#gallery_image_big_left').bind('mouseover', function(event) {
			$('#gallery_previous_button').show();
			previousButtonDisplayed = true;
		});
		$('#gallery_image_big_right').bind('mouseover', function(event) {
			$('#gallery_next_button').show();
			nextButtonDisplayed = true;
		});

		$('#gallery_image_big_left').bind('mouseout', function(event) {
			$('#gallery_previous_button').hide();
			previousButtonDisplayed = false;
		});
		$('#gallery_image_big_right').bind('mouseout', function(event) {
			$('#gallery_next_button').hide();
			nextButtonDisplayed = false;
		});

		function nextImage() {
			var number = parseInt($('#gallery_image_big_right').attr('number')) + 1;
			if (number > imageCount - 1) {
				number = 0;
			}
			changeToImage(number);
		}

		function previousImage() {
			var number = parseInt($('#gallery_image_big_right').attr('number')) - 1;
			if (number < 0) {
				number = imageCount - 1;
			}
			changeToImage(number);
		}

		function changeToImage(number) {
			var link = $('#gallery_image_' + number).attr('src');
			var description = $('#gallery_image_info_' + number).attr(
					'description');
			var designedFor = $('#gallery_image_info_' + number).attr(
					'designedFor');
			var linkToProject = $('#gallery_image_info_' + number).attr('link');

			$('#gallery_previous_button').fadeOut();
			$('#gallery_next_button').fadeOut();
			$('.gallery_image_big_cell').fadeOut(
					'normal',
					function() {
						$('.gallery_image_big_cell').css('background-image',
								'url(' + link + ')');
						$('.gallery_image_big_cell').attr('number', number);
						$('#description').html(description);
						$('#designedFor').text(designedFor);
						$('#link').text(linkToProject);
						$('#link').attr('href', 'http://'+linkToProject);
						$('.gallery_image_big_cell').fadeIn('normal',
								function() {
								});
						adaptImageMap();
						hideOrShowImageInfoBox();
					});

			if (nextButtonDisplayed)
				$('#gallery_next_button').fadeIn();
			if (previousButtonDisplayed)
				$('#gallery_previous_button').fadeIn();

		}

		$('#image_gallery_next_area').bind('click', function(event) {
			nextImage();
		});

		$('#image_gallery_previous_area').bind('click', function(event) {
			previousImage();
		});

	}

})