// coding: utf-8
function AdaptLayout() {
    // text size
    //~ document.body.style.fontSize = ($(window).width() > 1550) ? '11px' : '10px';
    // sublist height
    if($(window).height() > $('#bandeau').offset().top) {
	var $subH = $(window).height() - ($(window).height() - $('#bandeau').offset().top) - 110;
	$('.sublist').css('height', $subH+'px');
	if(document.getElementById('desc')) $('#desc').css('height', $subH+20+'px');
    }
    return;
}
function ScalImg() {
    if( ($('#fullimg').html() != '') && ($('#fullimg').children()[0].tagName == 'IMG') ) {
	var $img = $('#fullimg').children(':first');
	// jQuery $img.width() is not helpful at all if already resized (width attr assigned)
	// we NEED to use plain old JS. $imgW is supposed to be a CONSTANT value!
	if(typeof document.getElementById('fullimg').firstChild.naturalWidth != 'undefined') {//good browsers
	    var $imgW = document.getElementById('fullimg').firstChild.naturalWidth + 50;
	} else {//IE
	    var tmp = new Image(); tmp.src = $img.attr('src');
	    var $imgW = tmp.width + 50;
	    delete tmp;
	}
	if($imgW > $(window).width()) {
	    $img.attr('width', $(window).width() - 50);
	} else {
	    if(typeof $img.attr('width') != 'undefined') $img.removeAttr('width');
	}
    }
    return;
}
var $resized = 0;
$(window).load(function() {
    AdaptLayout();
    ScalImg();
    $(function() {
	var $loading = 0;
	function Displayer(element, contentSrc, oldId) {
	    var $loadGIF = $('#loading');
	    var $index = element.index();
	    var $isVideo = contentSrc.indexOf('/') != -1 ? false : true;
	    var $contentId = ($isVideo) ? '#video'+$index : '#image'+$index;
	    
	    if(element.siblings().length > 0) {
		$('#prev').show(); $('#next').show();
		var $nextLink = element.siblings().get($index) ? $(element.siblings().get($index)) : $(element.siblings().get(0));
		var $prevLink = $(element.siblings().get($index - 1));
		var $nextImg = ($nextLink.children(':first').hasClass('video') == false) ? $nextLink.children(':first').attr('src').replace('/mini', '') : $nextLink.children(':first').attr('id');
		var $prevImg = ($prevLink.children(':first').hasClass('video') == false) ? $prevLink.children(':first').attr('src').replace('/mini', '') : $prevLink.children(':first').attr('id');
		// prev button
		$('#prev').unbind().bind('click', function(){ if(!$loading){ $loading = 1; Displayer($prevLink, $prevImg, $contentId); } });
		// next button
		$('#next').unbind().bind('click', function(){ if(!$loading){ $loading = 1; Displayer($nextLink, $nextImg, $contentId); } });
	    }
	    else {
		$('#prev').hide(); $('#next').hide();
	    }
	    
	    if(oldId === false) { //clic from thumb
		var oldOffset = element.find('img').not('.video').offset();
		// clone du thumb à animer
		var $temp  = element.find('img').not('.video').clone().appendTo('body');
		var newOffset = {'left': ($(window).width() - $temp.width()) / 2, 'top': (($(window).height() - oldOffset.top) / 2) + 20};
		$temp.css({'position': 'absolute', 'left': oldOffset.left, 'top': oldOffset.top, 'zIndex': 100});
		// animation du thumb sur lequel on a cliqué et qui est resté dans le bandeau
		element.animate({'width': 'toggle', 'opacity': 'toggle'}, 400);
		$temp.animate( {'top': newOffset.top, 'left': newOffset.left}, 'slow', function() {
		    element.show();
		    $loadGIF.show();
		    if($isVideo) {
			// 16/9 ratios: 400x225, 640x360, 800x450, 960x540 / &autoplay=1
			var $videoTemplate = {'src':'http://player.vimeo.com/video/'+contentSrc+'?title=0&byline=0&portrait=0&api=1', 'width':'960', 'height':'540'};
			$('#fullimg').html('<iframe id="video'+$index+'" frameborder="0" class="hidden"></iframe>');
			$($contentId).load(function() {
			    $loadGIF.hide(); $loading = 0;
			    $temp.animate({'width': '+=80', 'margin-left': '-=40', 'margin-top': '-=40', 'opacity': '0'}, 300, function(){
				$(this).remove();
				$($contentId).animate({'height': 'toggle'}, 400, function(){$('#bandeau').toggleClass('full')});
				$('#controls').animate({'opacity': 'toggle'}, 600);
			    });
			}).attr('src', $videoTemplate.src).attr('width', $videoTemplate.width).attr('height', $videoTemplate.height);
		    }
		    else {
			$('<img class="hidden" id="image'+$index+'" />').load(function() {
			    var $newimg = $(this);
			    $('#fullimg').html($newimg);
			    $loadGIF.hide(); $loading = 0;
			    $temp.animate({'width': '+=80', 'margin-left': '-=40', 'margin-top': '-=40', 'opacity': '0'}, 300, function(){
				$(this).remove();
			    });
			    ScalImg();//scaling
			    $newimg.animate({'height': 'toggle', 'opacity': 'toggle'}, 400, function(){$('#bandeau').toggleClass('full')});
			    $('#controls').animate({'opacity': 'toggle'}, 600);
			}).attr('src', contentSrc);
		    }
		});
	    }
	    else { //clic sur prev,next
		$loadGIF.show();
		var $oldContent = $(oldId);
		if($isVideo) {
		    var $videoTemplate = {'src':'http://player.vimeo.com/video/'+contentSrc+'?title=0&byline=0&portrait=0&api=1', 'width':'960', 'height':'540'};
		    $('#fullimg').append('<iframe id="video'+$index+'" frameborder="0" class="hidden"></iframe>');
		    $($contentId).load(function() {
			$loadGIF.hide(); $loading = 0;
			$oldContent.animate({'opacity': 'toggle'}, 300, function(){
			    $(this).remove();
			    $($contentId).animate({'opacity': 'toggle'}, 300);
			});
		    }).attr('src', $videoTemplate.src).attr('width', $videoTemplate.width).attr('height', $videoTemplate.height);
		}
		else {
		    $('<img class="hidden" id="image'+$index+'" />').load(function() {
			var $newimg = $(this);
			$('#fullimg').append($newimg);
			$loadGIF.hide(); $loading = 0;
			$oldContent.animate({'opacity': 'toggle'}, 300, function(){
			    $(this).remove();
			    ScalImg();
			    $newimg.animate({'opacity': 'toggle'}, 300);
			});
		    }).attr('src', contentSrc);
		}
	    }
	    return;
	}
	function toggleLayout() {
	    // 'toggle' fixe également le display après (none) / avant (inherit) l'animation
	    if($('.inner').parent().not('.hidden')) $('.inner').animate({'height': 'toggle'}, 700, function(){if($resized) AdaptLayout()});
	    if(document.getElementById('select-content')) $('#select-content').animate({'height': 'toggle'}, 200);
	    if(document.getElementById('desc')) $('#desc').animate({'height': 'toggle'}, 500);
	    $('#menu').animate({'height': 'toggle'}, 300, function() {
		$(this).toggleClass('full').animate({'height': 'toggle'}, 150);
	    });
	    $('#controls:visible').animate({'opacity': 'toggle'}, 600);
	}
	// thumb click
	$('a.popimg').click(function() {
	    var $targetContent = $(this).children(':first');
	    $targetContent = ($targetContent.hasClass('video') == false) ? $targetContent.attr('src').replace('/mini', '') : $targetContent.attr('id');
	    $loading = 1;
	    Displayer($(this), $targetContent, false);
	    toggleLayout();
	    return false;
	});
	// close button
	$('#close').click(function() {
	    if(!$loading && $('#fullimg').html() != '') {
		$('#fullimg').children(':first').animate({'height': 'toggle', 'opacity': 'toggle'}, 200, function(){
		    //~ $('#bandeau').toggleClass('full');
		    $('#fullimg').html('');
		});
		$('#bandeau').toggleClass('full');
		toggleLayout();
		ScrollThumbs();
	    }
	    return false;
	});
	// onglets
	$('#select-content a').click(function() {
	    var $url = window.location;
	    var $targetDiv = ($url.hash == '') ? this.href.replace($url, '') : this.href.replace($url.toString().replace($url.hash, ''), '');
	    if(!$($targetDiv).hasClass('current')) {
		//~ alert($targetDiv);
		var $l = $(this);
		$($targetDiv).siblings('.current').animate({'opacity': 'toggle'}, 150, function(){
		    $l.parent().toggleClass('current');
		    $l.parent().siblings('.current').toggleClass('current');
		    $(this).toggleClass('current');
		    $($targetDiv).css({'display': 'none'}).toggleClass('current');
		    $($targetDiv).animate({'opacity': 'toggle'}, 150, function(){ScrollThumbs()});
		    ScrollThumbs();
		});
	    }
	    return false;
	});
	$('<div class="hidden poptit" id="titlepop"></div>').appendTo('body');
	$('a[title]').mouseover(function(e) {
	    if($(this).attr('title') != '') {
		this.oldTit = $(this).attr('title');
		$(this).attr('title', '');
		var $aPos = $(this).offset();
		testL = ($aPos.left + 20 > 0) ? $aPos.left + 20 : e.pageX - 20;
		$('#titlepop').text(this.oldTit).css({'left': testL+'px', 'top': $aPos.top - 26+'px'}).animate({'opacity':'toggle'}, 300);
	    }
	});
	$('a[title]').mouseout(function() {
	    if(this.oldTit) {
		$(this).attr('title', this.oldTit);
		//~ $('#titlepop').animate({'opacity':'toggle'}, 150);
		$('#titlepop').hide();
	    }
	});
	function ScrollThumbs() {
	    sliderWidth = $(window).width() - ( $('.item-content.current .text').width() + 16);
	    var $th = $('.item-content.current .thumbs');
	    $th.css('left', 0);
	    thumbsWidth = $th.width();
	    var coeff = 3;
	    var smooth = 0.5;
	    $('.item-content.current .inner').mousemove(function(e) {
		// si les thumbs prennent plus de largeur que la zone visible (largeur fenetre - largeur text)
		if(thumbsWidth > sliderWidth) {
		    // si la souris est dans la zone visible des thumbs
		    if(e.pageX <= sliderWidth) {
			algo = coeff * ((thumbsWidth - sliderWidth) * (e.pageX / sliderWidth));
			$th.css('left', function(i) { return i - smooth * (parseInt($th.css('left')) + algo); });
		    }
		}
	    });
	}
	ScrollThumbs();
    });
});
$(window).resize(function() {
    clearTimeout(this.truc);
    this.truc = setTimeout(doneResize, 100);
});
function doneResize() {
    AdaptLayout();
    ScalImg();
    $('.item-content.current .thumbs').css('left', 0);
    sliderWidth = $(window).width() - ( $('.item-content.current .text').width() + 16);
    return $resized = 1;
}