$(document).ready(function(){ready_step()});

function show_step_tp(id, e){
	var t = (e.pageY + 20) + 'px';
	var l = (e.pageX + 20) + 'px';

	$('div.step_tp:eq('+id+')').css({display:'block',top: t,left: l});
	
	$(document).bind('mousemove',function(ev){
		$('div.step_tp:eq('+id+')')
			.css({
			    top: (ev.pageY + 20) + "px",
			    left: (ev.pageX + 20) + "px"
			});
	});
}
function hide_step_tp(id){
	$('div.step_tp:eq('+id+')').css('display','none');
	$(document).unbind('mousemove');
}

function ready_step()
{
	/* SCROLLER FUNCTIONALITY */
	$("#scroll_r, #scroll_l").click(function(){

		var n = parseFloat($(this).attr("scroll"));

		var w = parseInt($("#list_func > ul li").width());
		var m = parseInt($("#list_func > ul li").css("margin-left"));

		var sign = n > 0? "+": "-";
		n = Math.abs(n);

		var to = sign + "=" + (n*(w+m)) + "px";
		$("#list_func, #list_pres").scrollTo( to, { axis:'x',duration:700 } );
	});


	var n =	parseInt($("#list_func > ul li").length);
	if(n>5){
		var w = parseInt($("#list_func > ul li").width());
		var m = parseInt($("#list_func > ul li").css("margin-left"));
		var pad = parseInt($("#list_func > ul").css("padding-left"));

		var width = n*(w+m);

		$("#container ul").width(width);
	}

	/************ MOUSEOVER FOR STEPS, INTRO AND NEW  ************/
	
	$(".new").hover(function(){$(this).addClass('new_hv');},function(){$(this).removeClass('new_hv');});

	$(".intro").hover(
		function(e){$(this).addClass('intro_hv'); show_step_tp(0,e);},
		function(){$(this).removeClass('intro_hv');hide_step_tp(0);}
	);
	$(".intro_act").hover(function(e){show_step_tp(0,e);},function(){hide_step_tp(0);});
	
	$("#list_func > ul li a").hover(
		    function (e) {
		    	var id = $(this).parent().attr('id').split('_');
		    	id = id[1];
		    	
		    	if($(this).parent().attr("class")!='active'){
			        $("#list_pres > ul li#p_"+id).addClass('active');
		    	}
		    	//id++;
		    	show_step_tp(id,e);
		    },
		    function () {
		        var id = $(this).parent().attr('id').split('_');
		    	id = id[1];
		    	
		    	if($(this).parent().attr("class")!='active'){
			        $("#list_pres > ul li#p_"+id).removeClass('active');
		    	}
		    	//id++;
		    	hide_step_tp(id);
		    }
	);
	
	if($.browser['msie']==true){
		var vers = $.browser.version.split('.');
		if(vers[0]=='6'){	
			$("#list_pres > ul li > a,#list_pres > ul li>div").hover(
			    function (e) {
			    	var step = $(this).parent();
			    	var id = $("#list_pres > ul li").index(step)+1;
			    	show_step_tp(id,e);
			    },
			    function () {
			        var step = $(this).parent();
			    	var id = $("#list_pres > ul li").index(step)+1;
			    	hide_step_tp(id);
			    }
			);
		}
	}
	
	/* video player */
	if(typeof(youtube_id) != 'undefined')
	{
		// allowScriptAccess must be set to allow the Javascript from one
		// domain to access the swf on the youtube domain
		var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "transparent" };
		// this sets the id of the object or embed tag to 'thumbnail_player'.
		// You then use this id to access the swf and make calls to the player's API
		var atts = { id: "thumbnail_player" };
		swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=thumbnail_player", "thumbnail_player", "140", "70", "8", null, null, params, atts);
		var atts = { id: "video_player" };
		swfobject.embedSWF("http://www.youtube.com/v/" + youtube_id + "&enablejsapi=1&playerapiid=video_player", "video_player", "425", "344", "8", null, null, params, atts);
	}
	
	/* show comment form */
	$("div#comments_top_right_0").click(function(){
		if(is_logged_in)
			$("div#comment_form").removeClass("no_display");
		else
			show_login_box();
	});

	// Scroll to current step
	var cur_pos = parseInt($('#list_pres ul li.active').find("div").html())-1;
	if(cur_pos>=4){
		var to = cur_pos-2;
		$("#list_func, #list_pres").scrollTo( "li:eq("+to+")", { axis:'x'} );
	}
	
	var ImgLoader = new Image();
	ImgLoader.onload = function(){show_notes("1");};
	ImgLoader.src = $('#displayed_image').attr('src');
}

function remove_notification(){
	var pos = $('#remove_notification').offset();
	var top = parseInt(pos.top) - 201;
	var left = pos.left;
	
	ajax(JSON.encode({
		controller_url:'/controllers/remove_notification.php',
		step_id: step_id,
		pointer_position: '20',
		top: top,
		left: left,
		pointer_direction: 'bottom',
		'selector': 'div#remove_notification'
	}));
}

function facebook(uri)
{
	uri = encodeURIComponent(uri);
	window.open("http://www.facebook.com/sharer.php?u=" + uri, "facebook", "status=yes,scrollbars=yes,resizable=yes,width=600,height=450");
}

function twitter(title, uri)
{
	uri = encodeURIComponent(uri);
	var status = "Coole Anleitung: " + uri + " " + title;
	window.open("http://twitter.com/home/?status=" + status, "twitter", "status=yes,scrollbars=yes,resizable=yes,width=800,height=600")
}
	
function add_comment(selector)
{
	cur_bubble = '#login_add_comment';
	var pos = $(selector).offset();
	
	var top = parseInt(pos.top) - 239;
	var left = pos.left;
	var text = $("div#comment_form textarea").val();
	var receive_comment_notifications = $("input[name='receive_comment_notifications']").attr("checked");
	
	ajax(JSON.encode({
		controller_url:'/controllers/add_comment.php',
		step_id: step_id,
		receive_comment_notifications: receive_comment_notifications,
		text: text,
		pointer_position: '20',
		top: top,
		left: left,
		locked_element:'.com_bubble',
		pointer_direction: 'bottom',
		'selector': 'div#submit_comment'
	}));
}

function send_friend(){
	
	var message = $("div#send_friend textarea").val();
	var friend_email = $("div#send_friend input[name='friend_email']").val();
	var friend_name = $("div#send_friend input[name='friend_name']").val();
	var sender = $("div#send_friend input[name='sender']").val();
	var subject = $("div#send_friend input[name='subject']").val();
	
	ajax(JSON.encode({
		controller_url:'/controllers/send_friend.php',
		message:message,
		subject:subject,
		friend_email:friend_email,
		friend_name:friend_name,
		instruction_id:instruction_id,
		sender:sender
	}));
}
function pdf(selector){
	cur_bubble = '#login_pdf';
	
	var pos = $(selector).offset();
	var top = parseInt(pos.top) + 27;
	var left = pos.left;
		
	ajax(JSON.encode({
		controller_url:'/controllers/pdf.php',
		pointer_position: '20',
		top: top,
		left: left,
		pointer_direction: 'top',
		'selector': selector
	}));
}
function show_send_friend(){
	cur_bubble = '#send_friend';
	
	var display = $('#send_friend').css('display')=='none'? 'block':'none';
	hide_login_boxes();
	$('#send_friend').css('display',display);
}
function show_notes(img_pos){
	var img = document.getElementById("displayed_image");
	
/*	if(!img.complete){
		window.setInterval(show_notes(img_pos),1000);
	}else{*/
		$('.img_note').remove();
		if(typeof(arguments[1])!='undefined' && arguments[1]){
			$("#border_displayed_image").css('display','block');
		}
		var img = $(img);
	 	var cont = $('#border_displayed_image');
		for(var i in notes){
			if(notes[i].image_position == img_pos){
							
				var frame = $('<div id="fr_'+i+'" class="img_note"></div>')
				.css ({
					top: 	notes[i].frame_y + 'px',
					left:	notes[i].frame_x + 'px',
					width:	notes[i].frame_width + 'px',
					height: notes[i].frame_height + 'px'
				});
				cont.append(frame);
				
				if(notes[i].text!=''){
					var note_box = $('<div id="note_'+i+'" class="note_clpsd">'+notes[i].text+'</div>')
					.css({
						top: parseInt(notes[i].frame_y) + parseInt(notes[i].frame_height) + 2*2,
						left: notes[i].frame_x + 'px',
						display: 'none'		
					});
				}
				cont.append(note_box);
			}
		}
		$('.img_note').hover(
			function(){
				var id = $(this).attr('id').split('_'); id = id[1];
				$('#note_'+id).css('display','block');
				$(this).addClass('img_note_act');
			},
			function(){
				var id = $(this).attr('id').split('_'); id = id[1];
				$('#note_'+id).css('display','none');
				$(this).removeClass('img_note_act');
			}
		);
	//}
}

function display_image(src, height, width, img_pos)
{
	var cont = document.getElementById("border_displayed_image");
	var img = document.getElementById("displayed_image");
	
	cont.style.height = height;
	cont.style.width = width;
	
	img.height = height;
	img.width = width;
	img.src = src;
	
	try{document.getElementById("player_area").style.display = "none";}catch(e){}
	try{document.getElementById("video_container").style.display = "none";}catch(e){}
	
	show_notes(img_pos,true);
}

function gotoComment()
{
	$('#comments .blue_right_content').empty();
	$('.com_bubble a:contains(Kommentar)').replaceWith('&nbsp;');
	$('#comment_form textarea').focus();
	window.scroll(0, $('#comment_form textarea').offset().top + 200);
}

function onYouTubePlayerReady(playerid)
{
	document.getElementById(playerid).cueVideoById(youtube_id, 0);
}

function show_player()
{
	$('.img_note').remove();
	try{document.getElementById("player_area").style.display = "block";}catch(e){}
	try{document.getElementById("video_container").style.display = "block";}catch(e){}
	document.getElementById("border_displayed_image").style.display = "none";
}