function start() {
	// dodaj onClick event za logo
	$("#header a").click( function() { otvori_glavnu_karticu() } );
	
	// dodaj onClick event za sve kartice
	$(".kartica").click( function() { otvori_karticu($(this).attr("id")) } );
	
	// otvori karticu aku je hash u url
	if ( (window.location.hash!="") && (window.location.hash!="#onama") ) {
		// element iz url
		var trenutni_element_id = $(window.location.hash.replace("#","#s_")).attr("id");
		if (trenutni_element_id==undefined) return;
		
		// makni pocetni div
		$("#onama .sadrzaj_active").attr("class", "sadrzaj_hidden");
		$("#onama").width("0px");
		
		// postavi div iz url
		$("#"+trenutni_element_id).width("516px");
		$("#"+trenutni_element_id+" .sadrzaj_hidden").show();
		$("#"+trenutni_element_id+" .sadrzaj_hidden").attr("class", "sadrzaj_active");
		$("#"+$(window.location.hash.replace("#","#k_")).attr("id").replace("s_","k_")+" a").css("background-position","top right");
		$(window.location.hash.replace("#","#s_")+" .naslov").show();
	}
	
	declare_slider_elements();
}

function otvori_glavnu_karticu() {
	// elementi koji sudjeluju u animaciji
	var element2fadeout  = $(".sadrzaj_active");
	var element2shrink   = $(".sadrzaj_active").parent();
	var element2stretch  = $("#onama");
	var element2fadein   = $("#onama .sadrzaj_hidden");
	var naslov2fadeout   = $("#"+$(".sadrzaj_active").parent().attr("id")+" .naslov");
	
	// ne dozvoliti animaciju za već aktivni element
	if ( $(element2shrink).attr("id")==$(element2stretch).attr("id") ) return;
	
	// makni hover
	$(".kartica a").hover( function() { $(this).css("background-position", "top left" ); }, function() { $(this).css("background-position", "top left" ); } )
	$("#"+$(element2shrink).attr("id").replace("s_","k_")+" a").css("background-position","top left");
	
	// makni onClick event za sve kartice
	$(".kartica").unbind('click');
	$(".kartica a").css("cursor", "auto");
	
	// animacija
	setTimeout( function() { $(element2fadeout). fadeOut(1000);                  },    0 );
	setTimeout( function() { $(naslov2fadeout).  fadeOut(1000);                  },    0 );
	setTimeout( function() { $(element2shrink).  animate( { width:  0 }, 1000 ); }, 1000 );
	setTimeout( function() { $(element2stretch). animate( { width:550 }, 1000 ); }, 2000 );
	setTimeout( function() { $(element2fadein).  fadeIn(1000);                   }, 3000 );
	
	// ...i na kraju
	setTimeout( function() {
		// zamjeni hidden & active klase
		$(element2fadeout). attr("class", "sadrzaj_hidden");
		$(element2fadein).  attr("class", "sadrzaj_active");
		
		// vrati hover
		$(".kartica a").hover( function() { $(this).css("background-position", "top right" ); }, function() { $(this).css("background-position", "top left" ); } )
		
		// vrati onClick event za sve kartice
		$(".kartica").click( function() { otvori_karticu($(this).attr("id")) } );
		$(".kartica a").css("cursor", "pointer");
	}, 4000 );
}

function otvori_karticu(id) {
	// elementi koji sudjeluju u animaciji
	var element2fadeout  = $(".sadrzaj_active");
	var element2shrink   = $(".sadrzaj_active").parent();
	var element2stretch  = $("#"+id.replace("k_","s_"));
	var element2fadein   = $("#"+id.replace("k_","s_")+" .sadrzaj_hidden");
	var naslov2fadein    = $("#"+id.replace("k_","s_")+" .naslov");
	var naslov2fadeout   = $("#"+$(".sadrzaj_active").parent().attr("id")+" .naslov");
	
	// ne dozvoliti animaciju za već aktivni element
	if ( $(element2shrink).attr("id")==$(element2stretch).attr("id") ) return;
	
	// makni hover
	$(".kartica a").hover( function() { $(this).css("background-position", "top left" ); }, function() { $(this).css("background-position", "top left" ); } )
	$("#"+id+ " a").css("background-position","top right");
	$("#"+id+ " a").hover( function() { $(this).css("background-position", "top right" ); }, function() { $(this).css("background-position", "top right" ); } )
	$("#"+$(element2shrink).attr("id").replace("s_","k_")+" a").css("background-position","top left");
	
	// makni onClick event za sve kartice
	$(".kartica").unbind('click');
	$(".kartica a").css("cursor", "auto");
	
	// animacija
	setTimeout( function() { $(element2fadeout). fadeOut(1000);                  },    0 );
	setTimeout( function() { $(naslov2fadeout).  fadeOut(1000);                  },    0 );
	setTimeout( function() { $(element2shrink).  animate( { width:  0 }, 1000 ); }, 1000 );
	setTimeout( function() { $(element2stretch). animate( { width:516 }, 1000 ); }, 2000 );
	setTimeout( function() { $(element2fadein).  fadeIn(1000);                   }, 3000 );
	setTimeout( function() { $(naslov2fadein).   fadeIn(1000);                   }, 3000 );
	
	// ...i na kraju
	setTimeout( function() {
		// zamjeni hidden & active klase
		$(element2fadeout). attr("class", "sadrzaj_hidden");
		$(element2fadein).  attr("class", "sadrzaj_active");
		
		// vrati hover
		$(".kartica a").hover( function() { $(this).css("background-position", "top right" ); }, function() { $(this).css("background-position", "top left"  ); } )
		$("#"+id+ " a").hover( function() { $(this).css("background-position", "top right" ); }, function() { $(this).css("background-position", "top right" ); } )
		
		// vrati onClick event za sve kartice
		$(".kartica").click( function() { otvori_karticu( $(this).attr("id") ) } );
		$(".kartica a").css("cursor", "pointer");
	}, 4000 );
}

function declare_slider_elements() {
	var element_id = new Array();
	element_id[0] = "content-o-nama";
	//element_id[1] = "drugi_neki_element";
	//element_id[2] = "jos_neki_elemnt";
	//element_id[3] = "jos_neki_elemnt";
	//element_id[4] = "jos_neki_elemnt";
	//element_id[5] = "jos_neki_elemnt";
	
	var add_easy_slider = function (x, idx) {
		$("#"+x).easySlider({
			prevId:      x+'_prevBtn',
			nextId:      x+'_nextBtn',	
			prevText:    '< Prethodna.. ',
			nextText:    ' ..Sljedeća >',
			orientation: 'horizontal',
			speed:       800			
		});
	}
	element_id.forEach(add_easy_slider);
}