$(document).ready(function() {


	var $paneTarget = $('#pane-target');
	var $btnLeft = $('#btn_left');
	var $btnRight = $('#btn_right');
	var $btnUp = $('#btn_up');
	var $btnDown = $('#btn_down');
	var count = 0;
	var row = 0;
	var imageMax = 16;
	var colMax = 3;
	var rowMax = 3;
    
	calculateSizes();
	
	function goToPosition(_speed){//before each animation, reset to (0,0), skip this.

        var speed  = _speed != null ? _speed : 800;
        
		if (count <= 0){
			count = 0;
			$btnLeft.hide();
		} else {
			$btnLeft.show();
		}
		if (count >= colMax){
			count = colMax;
			$btnRight.hide();
		} else {
			$btnRight.show();
		}
		if (row <= 0){
			row = 0;
			$btnUp.hide();
		} else {
			$btnUp.show();
		}
		if (row >= rowMax){
			row = rowMax;
			$btnDown.hide();
		} else {
			$btnDown.show();
		}
		var position = count + (row * (1+colMax));
        
		if (position >= imageMax){
            
			position = imageMax;
			count = imageMax - (row * (1+colMax));

			$btnRight.hide();
            
			if (count <= 0){
                count = 0;
                $btnLeft.hide();
			}
		
		}
	
		$paneTarget.stop().scrollTo( 'li:eq('+position+')', speed );
	};
    function calculateSizes(){
     // Code using $ as usual goes here.

        
        // 16 / 9 wordt de verhouding
        var _twidth = 1575;
        var _theight = 1050;
		
		if (parseInt(navigator.appVersion)>3) {
		 if (navigator.appName=="Netscape") {
		  _twidth = window.innerWidth;
		  _theight = window.innerHeight;
		 }
		 if (navigator.appName.indexOf("Microsoft")!=-1) {
		  _twidth = document.body.offsetWidth;
		  _theight = document.body.offsetHeight;
		 }
		}
		//alert("resizeWindow _theight : "+ _theight + ", _twidth : " + _twidth);
        //
		var orgWidth = _twidth;
		var orgHeigth = _theight;
		
        var _ratio = 1;

        if ((_twidth/1575)<(_theight/1050)){
            _ratio = _twidth/1575;
            _theight = 1050*_ratio;
        } else {
            _ratio = _theight/1050;
            _twidth = 1575*_ratio;
        }


            //$('.elements').width = _twidth;
            //$('.elements').height = _theight;

            $(".elements").css("width", (_twidth*4)+5);


            $(".elements img").css({"width": _twidth, "height":_theight});
            $(".elements li").css({"width":_twidth,"height":_theight});

            $(".pane").css({"width":_twidth,"height":_theight});

            $("#wrapper").css({"width":_twidth,"height":_theight,"top":(orgHeigth-_theight)*0.5,"left":(orgWidth-_twidth)*0.5});

             goToPosition(50);


        //  resizen.
        // .elements
        // .elements img
        // .pane
    }
	$('#go-left').click(function(){
		count -= 1;
		goToPosition();
	});
	$('#go-right').click(function(){
		count += 1;
		goToPosition();
	});
	$('#go-down').click(function(){
		row += 1;
		goToPosition();
	});
	$('#go-up').click(function(){
		row -= 1;
		goToPosition();
	});
	$('#openBlog').click(function(){
		$("#blog").fadeIn('slow');

	});
	$('#closeBlog').click(function(){
		$("#blog").fadeOut('fast');

	});

    //
    var resizeTimer = null;

    $(window).bind('resize', function() {

    if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(calculateSizes, 100);
    });
	$('.btn').fadeTo("slow", 0.15);
	
	$('.btn').mouseover(function() {
	   $(this).fadeTo("slow", 1);
	});
	$('.btn').mouseout(function() {
	   $(this).fadeTo("slow", 0.15);
	});



   
	
});