$(function() {		
	
	// email and embed tab actions
	$("#shareTabs a").click(function(e)  { 
		if ($(this).attr("id") != "exposeTab")
		{
			$("#theplayer, #player_fullscreen").hide(true);
			$f().hide(true);  
		
			// toggle tab class
			var tab = $(this); 
			$("#shareTabs a").removeClass("current");
			tab.addClass("current");
		
			// show / hide panes
			$(tab.attr("href")).show();
			var other = (tab.attr("href") == "#emailPane") ? $("#embedPane") : $("#emailPane");
			other.hide();		
		
			// prevent link's default behaviour
			return e.preventDefault();
		}
	});
	
	// close buttons
	$("#panes div.close").click(function() {
		$("#shareTabs a").removeClass("current");
		$("#emailPane, #embedPane").hide();
		$("#theplayer, #player_fullscreen").show();
		$f().show();
	});
	
	/*
		email form setup. depends on simple JSON responses of the form
			- on error: {message: 'error message'}
			- otherwise it's successs
	*/
	$("#shareForm").submit(function(e) {
			
		var form = $(this);
		form.fadeTo(500, 0.1);
		
		$.getJSON(form.attr("action") + "?" + form.serialize() + "&format=json&jsoncallback=?", function(json) {
			form.fadeTo(500, 1);
			var info = $("#info").show();
			
			if (json.message) {
				info.html(json.message);			
			} else {
				info.html("Email was successfully sent");
			} 
		});	
		
		e.preventDefault();
		return false;		
	});
	
});

	
$(function() {
	menu_hover_image = new Image(); 
	menu_hover_image.src = "/media/images/template/menu_img_hover.png";

	$("#embedPane textarea").html($f().embed().getEmbedCode().replace(',"plugins":{"controls":null}', ''));			
	
	$("#exposeTab").click(function() { 		         
	    // this simple call performs exposing 
	    $("#player_container").expose();   	     
	}); 
	
	$("#player_fullscreen").click(function() {
		$("div.overlay").overlay().load();	
		$f().hide().pause();
	});	
	
	// setup overlay
	$("div.overlay").overlay({ 
	
		// 1. start expose effect when overlaying begins 
		onBeforeLoad: function() {
			this.getBackgroundImage().expose();
		},

		// 2. when overlay is loaded we reposition  and resize the player on top of it
		onLoad: function() {
	
			// get handle to the embed element
			var embed = $("#playerLoader :first"); 
		
			/* and reposition / resize it. you propably have to tweak
				these when placing this thing on your site */		
		
			var img = this.getBackgroundImage();
			var height = img.css("height");
			if (height == 'auto') height = 641; 	
	
			embed.css({
				// size
				width:parseInt(img.css("width")) -80,
				height:parseInt(height) -80,
		
				// position
				left: parseInt(img.css("left")) + 40,
				top: parseInt(img.css("top")) + 40,
				position: 'absolute'
			});

			// when overlay grows we were in paused state
			$f().resume();		
		},

		// when overlay closes  
		onClose: function() {

			// 1. put our player to the original size/position			
			$("#playerLoader :first").css({top: null, left: null, width: 579, height: 300});
	
			// 3. unexpose (remove the darkened browser canvas)
			$.expose.close();
		}	
	});
});