$(function(){
	var $agenda = $('#agenda');
	var $images = $('#agenda .agenda-item');

	var $agendaWindow = $('#agendaWindow');
	var $close = $('#agendaWindow .agenda-close');
	var $agendaContent = $('#agendaWindow .window-content');
	
	var zIndex = 2000;
	var left = 0;
	var items = $images.size();
				
	var Khala = (function(){
		var init = function(){
			$agenda.width(items*170);
			$agenda.height(280);
			rotateImages();
			setActions();
			setAgendaWindow();
		},
		rotateImages = function(){
			$images.each(function(i){
				var $this = $(this);
				var r = Math.floor(Math.random()*45)-15;
				$this.transform({'rotate'	: r + 'deg'});
				$this.css({'zIndex': zIndex, 'left': left});
				zIndex--;
				left += Math.floor(Math.random()*100);
			});
		},
		setActions = function(){
			$agenda.hover(
				function(){
					left=0;
					$images.each(function(){
						var $this = $(this);
						$this.css('left', left);
						left += 150;
					});
				}, function(){
					left=0;
					$images.each(function(){
						var $this = $(this);
						var r = Math.floor(Math.random()*41)-20;
						$this.transform({'rotate'	: r + 'deg'});
						$this.css('left', left);
						left += Math.floor(Math.random()*100);
					});
				}
			),
			$images.click(function(){
				openAgendaWindow($(this).find('.agenda-content'));
				return false;
			});
			$close.click(function(){
				closeAgendaWindow();
				return false;
			});
		},
		setAgendaWindow = function(){
			var ww = $(window).width();
			$agendaWindow.css('left', (ww/2)-(600/2));
		},
		openAgendaWindow = function($content){
			$agendaContent.html($content.html());
			var aWh = 480;
			var wM = Math.floor($(window).height()/2);
			$agendaWindow.css({'display': 'block', 'opacity' : 0, 'top': wM});
			
			var wh = $(window).height();
			var top = (wh/2)-(aWh/2);
			$agendaWindow.stop()
				.animate({
					height		: aWh,
					top			: top,
					opacity: 	1
				}, 500, function() {});
		},
		closeAgendaWindow = function(){
			var wM = Math.floor($(window).height()/2);
			$agendaWindow.stop()
				.animate({
					height		: 0,
					top			: wM,
					opacity		: 0
				}, 300, function() {});
		};
		return {
			init : init
		};
	})();
	Khala.init();



				var $background	= $('#background'),
				$bgimage		= $background.find('.bgimage'),
				$loading		= $background.find('.loading'),
				
				$content		= $('#content'),
				$title			= $content.find('h1'),
				$menu			= $content.find('.menu'),
				$mainNav		= $menu.find('ul:first'),
				$menuItems		= $mainNav.children('li'),
				totalItems		= $menuItems.length,
				$ItemImages		= new Array();
				
				$menuItems.each(function(i) {
					$ItemImages.push($(this).children('a:first').attr('href'));
				});
				$ItemImages.push($bgimage.attr('src'));
					  
				$menuItems.find('a').hover(function(){
					$(this).animate({'font-size': '26'}, 200);
				}, function(){
					$(this).animate({'font-size': '16'}, 100);
				});
				
				var Menu = (function(){
					var init = function() {
						loadPage();
						initWindowEvent();
					},
					loadPage = function() {
						$loading.show();
						$.when(loadImages()).done(function(){
							$.when(showBGImage()).done(function(){
								$loading.hide();
								$.when(slideOutMenu()).done(function(){
										$.when(toggleMenuItems('up')).done(function(){
										initEventsSubMenu();
									});
								});
							});
						});
					},
					showBGImage	= function() {
						return $.Deferred(
						function(dfd) {
							adjustImageSize($bgimage);
							$bgimage.fadeIn(1000, dfd.resolve);
						}
					).promise();
					},
					slideOutMenu = function() {
						var new_w	= $(window).width() - $title.outerWidth(true);
						return $.Deferred(
						function(dfd) {
							$menu.stop()
							.animate({
								width	: new_w + 'px'
							}, 700, dfd.resolve);
						}
					).promise();
					},
						toggleMenuItems		= function(dir) {
						return $.Deferred(
						function(dfd) {
							$menuItems.each(function(i) {
										var $el_title	= $(this).children('a:first'),
											marginTop, opacity, easing;
										if(dir === 'up'){
											marginTop	= '0px';
											opacity		= 1;
											easing		= 'easeOutBack';
										}
										else if(dir === 'down'){
											marginTop	= '60px';
											opacity		= 0;
											easing		= 'easeInBack';
						}
								$el_title.stop()
								.animate({
													marginTop	: marginTop,
													opacity		: opacity
												 }, 200 + i * 200 , easing, function(){
									if(i === totalItems - 1)
										dfd.resolve();
								});
							});
						}
					).promise();
					},
					initEventsSubMenu	= function() {
						$menuItems.each(function(i) {
							var $item		= $(this), // the <li>
							$el_title	= $item.children('a:first'),
							el_image	= $el_title.attr('href'),
							$sub_menu	= $item.find('.subitem'),
							$close	= $sub_menu.find('.close');
							
							$el_title.bind('click.Menu', function(e) {

								$.when(toggleMenuItems('down')).done(function(){
									openSubMenu($item, $sub_menu, el_image);
								});
								return false;
							});
							/* closes the submenu */
							$close.bind('click.Menu', function(e) {
								closeSubMenu($sub_menu);
								return false;
							});
						});
					},
					openSubMenu			= function($item, $sub_menu, el_image) {
						$sub_menu.stop()
						.animate({
							height		: '400px',
							marginTop	: '-200px'
						}, 400, function() {
										//the bg image changes
							//showItemImage(el_image);
						});
					},
						/* changes the background image */
					showItemImage		= function(source) {
							//if its the current one return
						if($bgimage.attr('src') === source)
							return false;
								
						var $itemImage = $('<img src="'+source+'" alt="Background" class="bgimage"/>');
						$itemImage.insertBefore($bgimage);
						adjustImageSize($itemImage);
						$bgimage.fadeOut(1500, function() {
							$(this).remove();
							$bgimage = $itemImage;
						});
						$itemImage.fadeIn(1500);
					},
					closeSubMenu		= function($sub_menu) {
						$sub_menu.stop()
						.animate({
							height		: '0px',
							marginTop	: '0px'
						}, 400, function() {
							//show items
										toggleMenuItems('up');
						});
					},
						/*
						on window resize, ajust the bg image dimentions,
						and recalculate the menus width
						*/
					initWindowEvent		= function() {
						/* on window resize set the width for the menu */
						$(window).bind('resize.Menu' , function(e) {
							adjustImageSize($bgimage);
							/* calculate new width for the menu */
							var new_w	= $(window).width() - $title.outerWidth(true);
							$menu.css('width', new_w + 'px');
						});
					},
						/* makes an image "fullscreen" and centered */
					adjustImageSize		= function($img) {
						var w_w	= $(window).width(),
						w_h	= $(window).height(),
						r_w	= w_h / w_w,
						i_w	= $img.width(),
						i_h	= $img.height(),
						r_i	= i_h / i_w,
						new_w,new_h,
						new_left,new_top;
							
						if(r_w > r_i){
							new_h	= w_h;
							new_w	= w_h / r_i;
						}
						else{
							new_h	= w_w * r_i;
							new_w	= w_w;
						}
							
						$img.css({
							width	: new_w + 'px',
							height	: new_h + 'px',
							left	: (w_w - new_w) / 2 + 'px',
							top		: (w_h - new_h) / 2 + 'px'
						});
					},
						/* preloads a set of images */
					loadImages			= function() {
						return $.Deferred(
						function(dfd) {
							var total_images 	= $ItemImages.length,
							loaded			= 0;
							for(var i = 0; i < total_images; ++i){
								$('<img/>').load(function() {
									++loaded;
									if(loaded === total_images)
										dfd.resolve();
								}).attr('src' , $ItemImages[i]);
							}
						}
					).promise();
					};
						
					return {
						init : init
					};
				})();

				Menu.init();

				
	var khalaGMap = new google.maps.LatLng(45.819842399564116, 15.976717472076416);
	function initializeMap() {
		var myOptions = {
			zoom: 13,
			center: khalaGMap,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map"), myOptions);
		var marker = new google.maps.Marker({
			map:map,
			animation: google.maps.Animation.DROP,
			position: khalaGMap
		});
	}
	initializeMap();

	
	$("#mp3player").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				mp3: "http://www.khala.hr/mp3/Katy_Perry_E_T.mp3"
			}).jPlayer("play");
		},
		ended: function (event) {
			$(this).jPlayer("play");
		},
		swfPath: "js/jQuery.jPlayer.2.0.0/",
		supplied: "mp3",
		solution: "flash, html",
		volume: 0.6,
	});
});