/***** constructor ****/
var VCXMLDATA;
var VCCURRENTCHILD = 1;
var VCCOUNT = [];

function init_vcElements()
{
	vcloadXML();
	
	// css
	$(".vc_navi_back, .vc_navi_play, .vc_navi_next, .vc_like, .vc_join").css({
		"cursor": "pointer"
	})
	
	$(".vc_like, .vc_join, .vc_info").css({
		"border-radius": "3px"
	})
}


function vcloadXML()
{
    $.get("data/vc/vcdata.xml", function(data){
		VCXMLDATA = data;
		
		//prepare counter
		for(var i = 0; i < $(VCXMLDATA).find("vid").length; i++)
		{
			VCCOUNT.push(0);
		}
		
		vcInitEvents();
		vcVidLoader();
    });
}

function vcInitEvents()
{
	$("#vcuploadbutton").live("click", function(){
		$("#vcuploadbutton").attr("value", "Bitte warten...")
		$("#vcuploadbutton").parent().append("<br><img src='images/ajax-loader_blue.gif'> \
		<h2> Dein Video wird hochgeladen!</h2>")
	});
	
	// events
	$(".vc_navi_back, .vc_navi_play, .vc_navi_next").mouseover(function(){
		$(this).css({
			opacity: 1
		})
	}).mouseout(function(){
		$(this).css({
			opacity: .5
		})
	}).css({
		opacity: .5
	})
	
	$(".vc_navi_wrapper").mouseover(function(){
		$(this).stop().animate({
			opacity: 1
		}, 500)
	}).mouseout(function(){
		$(this).stop().animate({
			opacity: 0
		}, 1000)
	}).delay(1000).animate({
		opacity: 0
	}, 1000)
	
	$(".vc_like").mouseover(function(){
		$(this).css({
			background: 'url("images/videocontest/vc_icon_like.png") no-repeat, #000'
		})
	}).mouseout(function(){
		if(VCCOUNT[VCCURRENTCHILD-1] == 1) {
			vcLikeMouseOverYes();
		} else {
			vcLikeMouseOverNo();
		}
	}).click(function(){
		vcLikeClick();
	})
	
	$(".vc_join").mouseover(function(){
		$(this).css({
			background: 'url("images/videocontest/vc_icon_join.png") no-repeat, #000'
		})
	}).mouseout(function(){
		$(this).css({
			background: 'url("images/videocontest/vc_icon_join.png") no-repeat, #2BB1FF'
		})
	})
	
	$(".vc_info").mouseover(function(){
		$(this).css({
			background: 'url("images/videocontest/vc_icon_info.png") no-repeat, #0D91BF'
		})
	}).mouseout(function(){
		$(this).css({
			background: 'url("images/videocontest/vc_icon_info.png") no-repeat, #0EA4E8'
		})
	})
	
	/// navigation
	$(".vc_navi_play").click(function(){
		var vid = document.getElementById("vcvideo");

		if(!vid.paused)
		{
			vid.pause();
			$(".vc_navi_play").css({
				background: 'url("images/videocontest/vc_play.png") no-repeat'
			})
		} else {
			vid.play();
			$(".vc_navi_play").css({
				background: 'url("images/videocontest/vc_pause.png") no-repeat'
			})
		}
	})
	
	$(".vc_navi_next").click(function(){
		VCCURRENTCHILD++;
		if( VCCURRENTCHILD > $(VCXMLDATA).find("vid").length) VCCURRENTCHILD = 1; 
		vcVidLoader();
	})
	$(".vc_navi_back").click(function(){
		VCCURRENTCHILD--;
		if( VCCURRENTCHILD < 1) VCCURRENTCHILD = $(VCXMLDATA).find("vid").length; 
		vcVidLoader();
	})
}

function vcLikeClick()
{
	if(VCCOUNT[VCCURRENTCHILD-1] == 0)
	{
		VCCOUNT[VCCURRENTCHILD-1] = 1;
		vcAjaxLikeHandler(1)
		vcLikeMouseOverYes();
	} else {
		VCCOUNT[VCCURRENTCHILD-1] = 0;
		vcAjaxLikeHandler(-1)
		vcLikeMouseOverNo();
	}
}

function vcAjaxLikeHandler(value)
{
	vcSavePrefInDB();
	//  http://jugendmedientage.de/assets/vchandler.php?child=1&value=1
	var cChild = VCCURRENTCHILD-1;
	//alert(USERPREFS.vc)
	$.ajax({
		type: "POST",
		url: "assets/vchandler.php",
		data: "child="+cChild+"&value="+value,
		success: function(data){
			//info aktualisieren
			$(VCXMLDATA).find("vid:nth-child(" + VCCURRENTCHILD + ")").each(function()
			{
				$(".vc_info").attr("title", "<div style='text-align:left;'>Von "+$(this).attr("name")+"<br>"+data+" Besuchern gefällt das Video!</div>" );
			});
		}
	});
}

function vcLikeMouseOverYes()
{
	$(".vc_like").css({backgroundColor: "#8fff0b"})
	$(".vc_like").attr("title", '<div style="text-align:left;">Dir gefällt das Video!</div>')
}

function vcLikeMouseOverNo()
{
	$(".vc_like").css({backgroundColor: "#2BB1FF"})
	$(".vc_like").attr("title", '<div style="text-align:left;">Gefällt dir<br>das Video?</div>')
}


function vcSavePrefInDB()
{
	//Formvalidierung!!
	/*var newUserPrefs = {
			name: USERPREFS.name,
			age: USERPREFS.age,
			about: USERPREFS.about,
			id: USERPREFS.id,
			sex: USERPREFS.sex,
			fb: USERPREFS.fb,
			foot: USERPREFS.foot,
			body: USERPREFS.body,
			head: USERPREFS.head,
			beard: USERPREFS.beard,
			glasses: USERPREFS.glasses,
			hair: USERPREFS.hair,
			vc: "true"
		};
	$.ajax({
		type: "POST",
		url: "assets/avatarUpdateMe.php",
		data: "t=1&id=" + MYDBID + "&content=" + $.toJSON(newUserPrefs),
		success: function(data){
			alert($.toJSON(newUserPrefs))
		}
	});*/
}


















function vcVidLoader()
{
	$(".vc_navi_back").stop().animate({opacity:0},200).delay(400).animate({opacity:.5},300, function(){
			//like button
			if(VCCOUNT[VCCURRENTCHILD-1] == 1) {
				vcLikeMouseOverYes();
			} else {
				vcLikeMouseOverNo();
			}
	})
	$(".vc_navi_next").stop().animate({opacity:0},200).delay(400).animate({opacity:.5},300)
	$(".vc_navi_play").stop().animate({opacity:0},200).delay(1000).animate({opacity:.5},300)
	
	
	var path = "data/vc/";
	$(VCXMLDATA).find("vid:nth-child(" + VCCURRENTCHILD + ")").each(function()
	{
		var cChild = VCCURRENTCHILD-1;
		$.ajax({
			type: "POST",
			url: "assets/vchandler.php",
			data: "child="+cChild+"&value=0",
			success: function(data){
				$(VCXMLDATA).find("vid:nth-child(" + VCCURRENTCHILD + ")").each(function()
				{
					$(".vc_info").attr("title", "<div style='text-align:left;'>Von "+$(this).attr("name")+"<br>"+data+" Besuchern gefällt das Video!</div>" );
				});
			}
		});
		
		
		//$("#vcvideo source:nth-child(1)").attr("src", path + $(this).attr("path") + ".ogv");
		//$("#vcvideo source:nth-child(2)").attr("src", path + $(this).attr("path") + ".mp4");
		//$("#vcvideo source:nth-child(3)").attr("src", path + $(this).attr("path") + ".webm");
		
		//document.getElementById("vcvideo").load();
		//document.getElementById("vcvideo").play();
			
		var str = ' \
				<video id="vcvideo" width="272" height="156" style="width:272px;height:156px;position:absolute;left:22px;bottom:29px;"> \
							  <source src="data/vc/webclips/'+$(this).attr("path")+'.ogv" type="video/ogg" /> \
							  <source src="data/vc/webclips/'+$(this).attr("path")+'.mp4" type="video/mp4" /> \
							  <source src="data/vc/webclips/'+$(this).attr("path")+'.webm" type="video/webm" /> \
							</video> \
		';
		$("#vcvideowrapper").html(str);
		
			//playbutton
			$(".vc_navi_play").css({
				background: 'url("images/videocontest/vc_play.png") no-repeat'
			})
	})
}