$(window).resize(function() {
	resize();
	test();
	$("#painting").center();
});

function resize() {
	
	var minW = 980;
	var minH = 560;
	
	var minMarginW = 40;
	var minMarginH = 20;

	var newW = Math.max($(window).width(), minW);
	var newH = Math.max($(window).height(), minH);

	var newMarginW = 40 + ((newW-minW)*0.25);
	var newMarginH = 20 + ((newH-minH)*0.25);
	
	newW -= newMarginW;
	newH -= newMarginH;
	
	$('#container').css({'width': newW, 'height': newH, 'margin-left': newMarginW/2, 'margin-top': newMarginH/2});
	
} 


	function test()
	{
		//get size
		var imgW = $('#loader img').attr("orgW");
		var imgH = $('#loader img').attr("orgH");
		
		//container size
		var conW = $('#container').width() -60; //30 boven en onder
		var conH = $('#container').height() -30 - 60; //30 = menu, 30 boven en onder
		
		//ratio
		var ratioW = conW / imgW;
		var ratioH = conH / imgH;
		
		//smallest ratio
		var ratio = Math.min(ratioH, ratioW);
		
		//don't scale if container is bigger then image
		if((conW > imgW) && (conH > imgH))
		{
			ratio = 1;
		}
		
		//set new sizes
		var newW = Math.round(imgW * ratio);
		var newH = Math.round(imgH * ratio);
		
		$('#loader img').attr({'width':newW, 'height':newH});
		$('#loader').css({'width': newW, 'height':newH});
	}



$(document).ready(function() {

	$("#btn-slide .left").click(function() {
		showImage(-1);
		stopSlideShow();
	});
	$("#btn-slide .right").click(function() {
		showImage(1);
		stopSlideShow();
	});
	
	$('#btn-bgcolor a').click(function() {
		stopSlideShow();
		if(colorOpen)
		{
			$('#picker').animate({left: '-195'},{duration:600, queue:false});
			colorOpen = false;
		} else {
			$('#picker').animate({left: '0'},{duration:600, queue:false});
			colorOpen = true;
		}
	});
	
	$('#picker a').click(function() {
		stopSlideShow();
		$('#picker').animate({left: '-195'},{duration:600, queue:false});
		colorOpen = false;
	});
	
	$('#btn-menu a').click(function() {
		stopSlideShow();
		if($(this).hasClass('down'))
		{
			$(this).addClass('up');
			$(this).removeClass('down');
			$('#menu').animate({bottom: '-240'},{duration:600, queue:false});
			$('#overlay').fadeTo(500,0);
		} else {
			$(this).addClass('down');
			$(this).removeClass('up');
			$('#menu').animate({bottom: '0'},{duration:600, queue:false});
			$('#overlay').fadeTo(500,0.4);
		}
	});
	
	$('#btn-slideshow a').click(function() {
		if($(this).hasClass('start'))
		{
			slideShow();
			$(this).addClass('stop');
			$(this).removeClass('start');
			//close menu
			if($('#btn-menu a').hasClass('down'))
			{
				$('#btn-menu a').addClass('up');
				$('#btn-menu a').removeClass('down');
				$('#menu').animate({bottom: '-240'},{duration:600, queue:false});
				$('#overlay').fadeTo(500,0);
			}

		} else {
			stopSlideShow();
		}
	});
	
	
	
	
	
	$('#menu-close a').click(function() {
		$('#btn-menu a').addClass('up');
		$('#btn-menu a').removeClass('down');	
		$('#menu').animate({bottom: '-240'},{duration:600, queue:false});
		$('#overlay').fadeTo(500,0);
	});

	$('#menu-right a').click(function(e) {
		$('#menu-left h2').html($(this).html());
		$('#menu-right a').removeClass('active');
		$(this).addClass('active');
		
		stopSlideShowImages();
		
		if($(this).attr('href').substr(0,4) == "page")
		{
			/* -------------------------------------------------- */
			// page
			/* -------------------------------------------------- */
			$.ajax({
				url: $(this).attr('href')+"&field=pageImage",
				cache: false,
				type: 'GET',
				dataType: 'html',
				success: function(data) {
					arrayImages = data.split(",");
					slideShowImages();
					toggleBtns(500,0);
				}		
			});
			$.ajax({
				url: $(this).attr('href')+"&field=pageText",
				cache: false,
				type: 'GET',
				dataType: 'html',
				success: function(data) {
				
					var settings = {
						showArrows: false
					};

					var pane = $('.scroll-pane')
						pane.jScrollPane(settings);
					var api = pane.data('jsp');
					api.getContentPane().html(data);
					api.reinitialise();
					
					reset();
				}
			});
		} else {
			/* -------------------------------------------------- */
			// painting
			/* -------------------------------------------------- */
			$.ajax({
				url: $(this).attr('href'),
				cache: false,
				type: 'GET',
				dataType: 'html',
				success: function(data) {
				
					var settings = {
						showArrows: false
					};

					var pane = $('.scroll-pane')
						pane.jScrollPane(settings);
					var api = pane.data('jsp');
					api.getContentPane().html(data);
					api.reinitialise();
					
					toggleBtns(500,1);
					loadImage($('.painting:nth-child(1)').attr('src').replace('thumb-',''));
					$('#btn-title span').html($('.painting:nth-child(1)').attr('alt'));
					reset();
				}
			});			
		}
		return false;
	});

	
	function reset()
	{
		//reset paging;
		pagingTotal = $('.painting').size();
		pagingCurrent = 1;
		
		setPaging();
	
		//add clicks
		$('.painting').click(function() {
			pagingCurrent = $('.jspPane img').index(this) + 1;
			setPaging();
			loadImage($(this).attr('src').replace('thumb-',''));
			$('#btn-title span').html($(this).attr('alt'));
		});
	}
	
	
	function setPaging()
	{
		$('#btn-slide .txt').html(pagingCurrent + " / " + pagingTotal);
		
		if(pagingCurrent == 1)
		{
			$('#btn-slide .left').fadeTo(500,0.1);
		}
		else
		{
			$('#btn-slide .left').fadeTo(500,1);
		}
		
		if(pagingCurrent == pagingTotal)
		{
			$('#btn-slide .right').fadeTo(500,0.1);
		}
		else
		{
			$('#btn-slide .right').fadeTo(500,1);
		}	
		
	}

	
	
	

	
	function showImage(dir)
	{
		if( (pagingCurrent+dir <= pagingTotal) && (pagingCurrent+dir > 0) )
		{
			loadImage($('.painting:nth-child('+(pagingCurrent+dir)+')').attr('src').replace('thumb-',''));
			$("#btn-title span").html($('.painting:nth-child('+(pagingCurrent+dir)+')').attr('alt'));
			pagingCurrent = pagingCurrent+dir;
			setPaging();
		}
	}


	function slideShow()
	{
		var next = pagingCurrent;
		if(next+1 > pagingTotal)
		{
			next = 1;
		} else {
			next += 1;
		}
	
		loadImage($('.painting:nth-child('+next+')').attr('src').replace('thumb-',''));
		$("#btn-title span").html($('.painting:nth-child('+next+')').attr('alt'));
		pagingCurrent = next;
		setPaging();
		
		slideShowTimeout = setTimeout(slideShow, 5000);
		
	}
	function stopSlideShow()
	{
		clearTimeout(slideShowTimeout);
		$('#btn-slideshow a').addClass('start');
		$('#btn-slideshow a').removeClass('stop');
	}
	
	
	function loadImage(file) {
		var img = new Image();
		$(img).load(function () {
			//hide old
			$('#loader img').fadeOut(500, setSize);
			//add new
			$(this).css('display', 'none');
			$('#loader').append(this);
		})
		.error(function () {
			//image could not be loaded
			alert("error");
		})
		.attr('src', file);
	}

	function setSize()
	{
		//remove old
		$('#loader img:first').remove();
	
		//get size
		var imgW = $('#loader img').width();
		var imgH = $('#loader img').height();
		
		$('#loader img').attr({"orgW": imgW, "orgH":imgH});
		
		
		//container size
		var conW = $('#container').width() -60; //30 boven en onder
		var conH = $('#container').height() -30 - 60; //30 = menu, 30 boven en onder
		
		//ratio
		var ratioW = conW / imgW;
		var ratioH = conH / imgH;
		
		//smallest ratio
		var ratio = Math.min(ratioH, ratioW);
		
		//don't scale if container is bigger then image
		if((conW > imgW) && (conH > imgH))
		{
			ratio = 1;
		}
		
		//set new sizes
		var newW = Math.round(imgW * ratio);
		var newH = Math.round(imgH * ratio);
		
		$('#loader img').attr({width:newW, height:newH});
		$('#loader').animate({width: newW, height:newH},{duration:500, step:function() {$("#painting").center();}, complete:function() {
				//show new
				$('#loader img').fadeIn(500);
			}
		});
	}


	function slideShowImages()
	{
		loadImage("paintings/"+arrayImages[arrayIndex]);

		if(arrayIndex+1 >= arrayImages.length)
		{
			arrayIndex = 0;
		} else {
			arrayIndex += 1;
		}
		
		if(arrayImages.length > 1)
		{
			slideShowImagesTimeout = setTimeout(slideShowImages, 5000);
		}
	}
	
	function stopSlideShowImages()
	{
		clearTimeout(slideShowImagesTimeout);
		arrayIndex = 0;
	}
	
	


	function toggleBtns(speed, opacity)
	{
		$('#btn-bgcolor').fadeTo(speed,opacity);
		$('#color').fadeTo(speed,opacity);
		$('#btn-title').fadeTo(speed,opacity);
		$('#btn-slide').fadeTo(speed,opacity);
		$('#btn-slideshow').fadeTo(speed,opacity);
	}
	
	var arrayImages = new Array();
	var arrayIndex = 0;
	var colorOpen = false;
	var slideShowTimeout;
	var slideShowImagesTimeout;
	var pagingTotal = 0;
	var pagingCurrent = 0;
	
	
	
	toggleBtns(0,0);
	resize();
	$('.scroll-pane').jScrollPane({showArrows: false});	
	
		
	
	$('#overlay').fadeTo(0,0);

	var f = $.farbtastic('#picker-wheel');
		f.linkTo($('#color, #container2'));






	jQuery.fn.center = function () {

		this.css("position","absolute");
		this.css("top", ( $("#container").height() - this.outerHeight() ) / 2);
		this.css("left", ( $("#container").width() - this.outerWidth() ) / 2);

		return this;
	} 
	$("#painting").center();
	
	
});