// JavaScript Document

$(function()
{
	// Animacija na vrhu stranice, jQuery plugin ...
	$('#animation-div').phoenixAnimation({
		repeat		: true,
		size		: 'small', 
		iePngFilter	: false,
		center		: true,
		stopTime	: 8000,
		topOffset 	: 23
	});
	
	
	
	// Efekt fadeout/in za slike aktivnih projekata ...
	$("img.active-project").each(
		function() {
			$(this).css({ opacity : 1.0 });
			$(this).hover( function() { $(this).stop().animate({ opacity : 0.5}, 500 ); }, function() { $(this).stop().animate({ opacity : 1.0}, 500 ); }); 
		}
	);
	
	
	
	// Postavimo opacity i hover efekt za validacijske linkove u footeru stranice ...
	$("div#footer-content img").each(
		function() {
			// Opacity ...
			$(this).css({opacity:0.4});
			// Hover ...
			$(this).hover( function() { $(this).stop().animate({ opacity : 0.9}, 500 ); }, function() { $(this).stop().animate({ opacity : 0.4}, 500 ); });
		}
	);
	
	
	
	// Overlay na klik za link sa projektom ...
	$(".project-overlay").each(
		function()
		{
			// Dodamo isto hover efekt ...
			$(this).find('img').hover( function() { $(this).stop().animate({ opacity : 0.5}, 300 ); }, function() { $(this).stop().animate({ opacity : 1.0}, 300 ); });
			
			// Dodamo click event ...
			$(this).click( 
				function( e )
				{
					var element = e.target ? e.target : window.event.srcElement;
					// Prikazemo sadrzaj u overlay ...
					showOverlay( function() { setOverlayContent( element.parentNode, 570 ); });
					
					// Stopiramo default event ...
					return false;
				}
			);
		}
	);
	
	
	
	// Graficki dizajn projekti ...
	/*$(".graphic-div").each(
		function()
		{
			$(this).hover(
				function() { animateY( this, 5, 100, 1  ); },
				function() { animateY( this, 5, 100, -1 ); }
			);
		}
	);*/
	
	

/* ------ kraj jQuery fje ------ */
});




/****************************************************************************************
						
									animate back
						
****************************************************************************************/

function animateY( obj, dist, speed, direction )
{
	// Ponistimo prethodnu animaciju ...
	clearInterval( obj.animateGraphic );
	
	// dohvatimo trenutnu poziciju pozadine ...
	var curBack = $(obj).css( 'background-position' );
	
	// Rastavimo string ...
	curBack = curBack.split(' ');
	
	// spremimo org položaj ...
	obj.orgPosition = parseInt( curBack[ 1 ] );
	
		
	obj.animateGraphic = setInterval(
		function()
		{	// dohvatimo trenutnu poziciju pozadine ...
			var curBack = $(obj).css( 'background-position' );
			
			// Rastavimo string ...
			curBack = curBack.split(' ');
			
			// Izvucemo integere ...
			for( i = 0; i < curBack.length; i++ ) curBack[i] = parseInt( curBack[i] );
			
			// Provjerimo uvijet zaustavljanja ...
			if( obj.orgPosition + dist*direction == curBack[ 1 ] )
			{
				clearInterval( obj.animateGraphic );
				return 0; 
			}
			else {
				$(obj).css({ backgroundPosition : curBack[0] + 'px ' + (curBack[1] + direction) + 'px' });
			}
		}
		, 50 );
	
};



/****************************************************************************************
						
									OVERLAY
						
****************************************************************************************/

// Funkcija koja dodaje overlay i prima kao argument callback funkciju ...
function showOverlay( fnCallback )
{
	// Postavke ...
	var newOpacity  = 0.95;
	var dim			= getPageHeight();
	
	// novi html ...
	var newHtml = "<div id='overlay-1'></div><div id='overlay-2'></div>";
	
	// dodamo u body ...
	$('body').append( newHtml );
	
	// Postavimo im CSS svojstva ...
	$("#overlay-1, #overlay-2").css({ 
		position 			: 'absolute', 
		width 				: '100%',
		height 				: dim[1] + 'px',
		left				: '0px',
		top					: '0px',
		zIndex				: 9998
	});
	
	// ...
	$("#overlay-1").css({ opacity : 0.0, 'background-color' : '#111' });
	
	// Napravimo lagani fadein za prvi overlay ...
	$("#overlay-1").stop().animate( { opacity : newOpacity }, 300, function(){ fnCallback(); } );
	
	// Dodamo na drugi overlay kada se klikne na njega da se maknu oba ...
	$("#overlay-2").click( function() { removeOverlay(); });
	
};


// Funkcija koja briše overlay ...
function removeOverlay()
{
	$('body').find( '#overlay-1' ).animate({ opacity : 0.0 }, 300, function() { document.body.removeChild( this ); });
	$('body').find( '#overlay-2' ).animate({ opacity : 0.0 }, 300, function() { document.body.removeChild( this ); });
};


// Funkcija koja postavlja overlay content ...
function setOverlayContent( obj, contentWidth )
{
	// Dohvatimo sadržaj koji trebamo prikazati u overlayu ...
	var infoObj = $(obj).parent().find( ".project-info" );
	var content = infoObj.html();
	// zatvorimo u div ...
	content = "<div id=\"overlay-content\">" + content + "</div>\n";
	
	// Dodamo html u overlay-2 ...
	$('#overlay-2').append( content );
	
	// Položaj scroll elementa
	var scrollOffset = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
	
	// Postavimo CSS za novi html ...
	$("div#overlay-content").css({
		position			: 'relative',
		width				: contentWidth + 'px',
		height				: 'auto',
		overflow			: 'hidden',
		margin				: '0px auto 0px auto',
		'background-color' 	: 'transparent',
		'z-index'			: 9999
	});
	
	// Odredimo visinu i centriramo element ...
	var offHeight = $("div#overlay-content").outerHeight();
	// Velicina prozora ...
	var screenHeight = window.innerHeight != null ? window.innerHeight : document.documentElement.clientHeight;
	// Pomak od vrha stranice ...
	var topOffset = scrollOffset + parseInt(( screenHeight - offHeight )/2);
	// Postavimo pomak ...
	$("div#overlay-content").css({ top : topOffset + 'px' });
};


// Funkcija koja vraca visinu i širinu stranice ...
function getPageHeight()
{
	// visina scrolla
	var height = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
	// širina scrolla
	var width  = document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
	//vrati širina, visina
	return [width, height];
};