// JavaScript Document

$(document).ready(function(){
	//
	var lang = $('body').data('lang');
	//
	// CTRL KEY
	//
	var ctrl=false;
	$(this).keydown(function(e){
		if(e.which == 17){
			ctrl=true;
		}
	});
	$(this).keyup(function(e){
		ctrl=false;
	});
	//
	// VISIBILITY BOOLEANS changed by the browser
	//
	var sortString = ['director', 'dop', 'year', 'production'];
	for(var i=0; i<4; i++){
		$(document).data('selected-'+sortString[i], new Object());
	}
	//
	var sections = new Array();
	$('.browser-section').each(function(){
		/*-------------------
		HTML defined data
		section: sortby
		section-title: sortby
		section-item: sortid
		-------------------*/
		sections.push($(this));
		var section = $(this);
		//
		var list = $(this).find('.browser-list');
		section.data('list', list);
		list.css('height','auto');
		list.css('overflow','visible');
		list.data('max-height',list.height());
		list.css('overflow','hidden');
		list.height(0);
		//
		// BROWSER ITEMS
		//
		var items = list.find('.browser-item');
		section.data('items', items);
		var defaultOrder = new Array();
		$(this).data('default-order', defaultOrder);
		//
		items.each(function (){
			$(this).find('a').attr('href','');
			$(document).data('selected-'+section.data('sortby'))[$(this).data('sortid')]=true;
			defaultOrder.push($(this).data('sortid'));
			$(this).click(function(){
				if(ctrl){
					$(document).data('selected-'+section.data('sortby'))[$(this).data('sortid')] =! $(document).data('selected-'+section.data('sortby'))[$(this).data('sortid')];
				}else{
					for(id in $(document).data('selected-'+section.data('sortby'))){
						if(id == $(this).data('sortid')){
							$(document).data('selected-'+section.data('sortby'))[id]=true;
						}else{
							$(document).data('selected-'+section.data('sortby'))[id]=false;
						}
					}
				}
				//
				changeBlack();
				showSelected();
				return false;
			});
		});
		function changeBlack(){
			var arr = $(document).data('selected-'+section.data('sortby'));
			var hasDeselected = false;
			items.each(function (){
				if($(document).data('selected-'+section.data('sortby'))[$(this).data('sortid')]==true){
					$(this).removeClass('browser-item-unsel');
				}else{
					$(this).addClass('browser-item-unsel');
					hasDeselected=true;
				}
			});
			if(hasDeselected){
				$('.browser-info').html('ctrl+click for multiple selection');
				if(list.height()>0){
					$('.browser-info').append('<span class="reset"><br><br>click &ordm; to reset</span>');
				}else{
					$('.browser-info').remove('.reset');
				}
				title.children('.reset').show();
			}else{
				$('.browser-info').html('');
				title.children('.reset').hide();
			}
		}
		//
		// BROWSER TITLES
		//
		var title = section.find('.browser-title');
		section.data('title', title);
		title.find('a').attr('href','');
		//
		title.prepend('<span class="reset" style="color:#f00;" >&bull; &bull; &bull; </span>');
		title.children('.reset').hide();
		title.click(function(){
			var duration = 300;
			if(!animate){duration = 0;}
			for(var i=0; i<sections.length; i++){
				if(sections[i].data('sortby') != $(this).data('sortby') ){
					sections[i].data('list').animate({'height':0}, duration);
				}else{
					sections[i].data('list').animate({'height':sections[i].data('list').data('max-height')}, duration);
				}
			}
			if(section.data('list').height()>0 && title.children('.reset').css('display') != 'none'){
				for(id in $(document).data('selected-'+section.data('sortby'))){
					$(document).data('selected-'+section.data('sortby'))[id]=true;
				}
				changeBlack();
				showSelected();
			}
			sortby(section);
			return false;
		})
	});
	function sortby(obj){
		var str = obj.data('sortby');
		var tmp = obj.data('default-order');
		//
		var duration = 300;
		if(!animate){duration = 0;}
		$('#video-content').fadeTo(duration, 0, function(){
			for(var i=0; i<tmp.length; i++){
				projects.each(function(){
					if($(this).data(str) == tmp[i]){
						$('#video-content').append(this);
						$(this).find('span[name=selected-value]').html($(this).find('span[name='+str+'-value]').html());
					}
				});
			}
			$('#video-content').fadeTo(duration,1);
		});
	}
	function showSelected(){
		arrDir = $(document).data('selected-director');
		arrDop = $(document).data('selected-dop');
		arrYear = $(document).data('selected-year');
		arrPro = $(document).data('selected-production');
		//
		var showAny = false;
		var duration = 500;
		if(!animate){duration = 0;}
		projects.each(function(){
			if(arrDir[$(this).data('director')] && arrDop[$(this).data('dop')] && arrYear[$(this).data('year')] && arrPro[$(this).data('production')]){
				if($(this).width()<160){
					$(this).css({'overflow':'hidden'});
					$(this).animate({'width':160, 'padding-left':20, 'padding-right':20}, duration, function(){$(this).css({'overflow':'visible'});});
				}
				showAny = true;
			}else{
				if($(this).width()>0){
					$(this).css({'overflow':'hidden'});
					$(this).animate({'width':0, 'padding-left':0, 'padding-right':0}, duration);
				}
			}
		});
		if(!showAny){
			$('#showany-alert').show(duration);
		}else{
			$('#showany-alert').hide(duration);
		}
	}
	$('#video-content').append('<div id="showany-alert" style="width:160px; height:160px; border:#333 solid 1px; padding:5px;">'+showAnyAlert[lang]+'</div>');
	$('#showany-alert').hide();
	//
	// PROJECTS
	//
	var projects = $('.projekt')
	$('.projekt-container').each(function(){
		//
		$(this).height(160);
		var opis = $(this).children('.opis');
		opis.css('overflow','visible');
		opis.css('height','auto');
		opis.data('max-height', opis.height());
		opis.css('overflow','hidden');
		opis.height(0);
		//
		$(this).find('img').mouseover(function(e){
			var duration = 300;
			if(!animate){duration = 0;}
			opis.animate({'height':opis.data('max-height')},duration);
			opis.css({'border-color':'#aaa'});
		});
		$(this).mouseout(function(e){
			var duration = 100;
			if(!animate){duration = 0;}
			opis.animate({'height':0},100);
			opis.css({'border-color':'#000'});
		});
		$(this).click(function(e){
			return showLightbox(this);
		});
	});
	//
	// BROWSER INFO
	//
	$('#browser').append('<div id="browser-info"><a href="" id="info-toggle-button">'+infoTitleShow[lang]+'</a></div>');
	$('#browser-info').append('<div id="info-content"></div>');
	$('#info-content').append(''+infoContent[lang]+'');
	$('#info-content').children('p').css({'border':'#333 solid 1px', 'padding':'2px'});
	$('#info-content').slideUp(0);
	//
	var showingInfo =false;
	$('#info-toggle-button').click(function(){
		var duration = 300;
		if(!animate){duration = 0;}
		showingInfo=!showingInfo;
		if(showingInfo){
			$('#info-content').slideDown(duration);
			$('#info-toggle-button').html(infoTitleHide[lang]);
		}else{
			$('#info-content').slideUp(duration);
			$('#info-toggle-button').html(infoTitleShow[lang]);
		}
		return false;
	});
	var animate=true;
	var cook = document.cookie.split(';');
	for(var i=0; i<cook.length; i++){
		if(cook[i].match(/animation=off/gi)){
			animate=false;
			$('#anim-state').html('off');
		}
		
	}
	$('#anim-toggle').click(function(){
		animate=!animate;
		if(animate){
			$('#anim-state').html('on');
			document.cookie='animation=on; path=/';
		}else{
			$('#anim-state').html('off');
			document.cookie='animation=off; path=/';
		}
		return false;
	});
	//
	// LIGHTBOX
	//
	$('body').append('<div class="light-box" id="light-box-background"></div>');
	$('#light-box-background').css({'z-index':998, 'background-color':'#000', 'position':'absolute', 'top':0, 'left':0, 'opacity':0});
	$('#light-box-background').hide();
	//
	$('#light-box-background').click(function (){
		$('#light-box-content').remove();
		$('#light-box-background').fadeTo(500,0, function(){$(this).hide();});
		showVideo = false;
	});
	//
	var showVideo = false;
	function showLightbox(obj){
		$('body').append('<div class="light-box" id="light-box-content"></div>');
		$('#light-box-content').css({'z-index':999, 'position':'absolute', 'width':480, 'height':360});
		$('#light-box-content').hide();
		//
		$('#light-box-content').append(insertVideo($(obj).data('fajl'),lang));
		//
		$('#light-box-background').show();
		$('#light-box-background').width($(document).width());
		$('#light-box-background').height($(document).height());
		$('#light-box-background').fadeTo(500,0.90, function(){
			var newPos = {'left':($(window).width()-480)/2, 'top':($(document).scrollTop() + ($(window).height()-360)/2)}
			$('#light-box-content').offset(newPos);
			$('#light-box-content').fadeTo(200,1);
		});
		//
		var video = $('#light-box-content').find('video');
		showVideo = true;
		if (video.length > 0){
			initVideoControls(video.get(0));
			setTimeout(function(){if(showVideo){video.get(0).play();}},2000);
			return false;
		}else{
			return true;
		}
	}
});
var showAnyAlert = {'hr':'<p>nema niti jedan projekt s trenutnom kombinacijom u pod-izborniku</p><p><span style="text-decoration:underline">kliknite dva put</span> neki od naslova markiranih s <span style="color:#f00;">&bull;&nbsp;&bull;&nbsp;&bull;</span> kako bi ga vratili u po&#269;etno stanje</p>', 'en':'<p>there are no projects with the current sub-selections</p><p><span style="text-decoration:underline">click twice</span> on any of the titles marked with <span style="color:#f00;">&bull;&nbsp;&bull;&nbsp;&bull;</span> to reset the sub-selection</p>'};
var infoTitleShow = {'hr':'prika&#382;i info navigacije', 'en':'show navigation info'};
var infoTitleHide = {'hr':'sakrij info navigacije', 'en':'hide navigation info'};
var infoContent = {'hr':'<p style="border:#333 solid 1px; padding:2px;">ukoliko imate problema zbog animacije prilikom pretra&#382;ivanja mo&#382;ete je<br><a id="anim-toggle" href="">uklju&#269;iti / isklju&#269;iti</a><br>animacija: <span id="anim-state" style="color:#fff; font-size:12px; font-weight:bold;">on</span></p><p>na po&#269;etku mo&#382;ete vidjeti sve projekte<br><br>nakon &#353;to <span style="text-decoration:underline">kliknete</span> ili<br><span style="text-decoration:underline">Ctrl + kliknete</span> unos u pod-izborniku njegov naslov se markira s <span style="color:#f00;">&bull;&nbsp;&bull;&nbsp;&bull;</span><br><br>ukoliko kliknete markirani naslov <span style="text-decoration:underline">dva puta</span> pod-izbornik se vra&#263;a u po&#269;etno stanje</p>',
					'en':'<p style="border:#333 solid 1px; padding:2px;">if you have problems with the browser performance<br><a id="anim-toggle" href="">toggle animation</a><br>animation: <span id="anim-state" style="color:#fff; font-size:12px; font-weight:bold;">on</span></p><p>by default you can see all the entries<br><br>after you <span style="text-decoration:underline">click</span> or <span style="text-decoration:underline">Ctrl + click</span> an item in the sub-selection pannel, it\'s title is marked with <span style="color:#f00;">&bull;&nbsp;&bull;&nbsp;&bull;</span><br><br>if you click the marked title <span style="text-decoration:underline">twice</span> the sub-selection is reseted</p>'};
//
var downloadText = {'hr':'desni klik &gt; Save Link/Target As', 'en':'right-mouse click &gt; Save Link/Target As'};
//
//
function insertVideo(str, lng){
	var ret = '<video width="480" height="360" controls="controls" ><source src="/files/video/mp4/'+str+'.mp4" type="video/mp4" /><source src="/files/video/ogv/'+str+'.ogv" type=\'video/ogg; codecs="theora, vorbis"\' /></video><div id="video-download">download&nbsp;&nbsp;&nbsp;<a href="/files/video/mp4/'+str+'.mp4">[ .mp4 ]</a> - <a href="/files/video/ogv/'+str+'.ogv">[ .ogv ]</a>&nbsp;&nbsp;&nbsp;'+downloadText[lng]+'</div>';
	return ret;
}