var video_flv = Path + 'app/views/images/djlive/video/video1.flv';
var video_png = Path + 'app/views/images/djlive/video/video1.png';
var player_url = Path + 'app/views/images/djlive/video/flowplayer-3.2.5.swf';

var video = '' +
'<div style="margin:10px 10px 10px 12px;">' +
	'    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
	'    <object id="flash_fallback_1" class="vjs-flash-fallback" width="641" height="381" type="application/x-shockwave-flash"' +
	'      data="' + player_url + '">' +
	'      <param name="allowfullscreen" value="false" />' +
	'      <param name="flashvars" value=\'config={"playlist":["' + video_flv + '", {"url": "' + player_url + '","autoPlay":true,"autoBuffering":true}]}\' />' +
	'      <!-- Image Fallback. Typically the same as the poster image. -->' +
	'      <img src="' + video_png + '" width="641" height="381" alt="Poster Image"' +
	'        title="No video playback capabilities." />' +
	'      ' +
	'    </object>' +
'</div>';

var show_player = function(_video){
	if(_video === undefined){
		$("body > div#body > #container > #content > div.what div.video .el-video")
		.removeClass("el-video")
		.addClass("el-video-play")
		.html(video);
	}else{
		_video = '<div style="margin:10px 10px 10px 12px;">' + _video + '</div>';
		if($("ul#control").hasClass("video-no-played-yet")){
			$("body > div#body > #container > #content > div.what div.video .el-video")
			.removeClass("el-video")
			.addClass("el-video-play")
			.html(_video);
		}else{
			$("body > div#body > #container > #content > div.what div.video .el-video-play")
			.html(_video);
		}
	}
	
	$("ul#control").removeClass("video-no-played-yet");
}

$(function(){
	/* WHAT */
	var elvideo = $("body > div#body > #container > #content > div.what div.video .el-video");
	var msgNoFlash = $("body > div#body > #container > #content > div.what div.video .el-video").html();

	$("body > div#body > #container > #content > div.what div.video .el-video").bind("click",function(){
		$(this).unbind("click").removeClass("el-video").addClass("el-video-play").html(video);
		show_player();
	}).bind("mouseover",function(){
		$(this).css("cursor","pointer");
	});
	
	var video_links = '' +
	'<ul id="control" class="video-no-played-yet">' +
		'<li class="first"><a href="1" title="¿Qué es Dj-Live?"><span>¿Qué es Dj-Live?</span></a></li>' +
		'<li class="second"><a href="2" title="¿Cómo funciona?"><span>¿Cómo funciona?</span></a></li>' +
		'<li class="third"><a href="3" title="Géneros Musicales"><span>Géneros Musicales</span></a></li>' +
		'<li class="fourth"><a href="4" title="Karaoke y MP3"><span>Karaoke y MP3</span></a></li>' +
		'<li class="fifth"><a href="5" title="Precios"><span>Precios</span></a></li>' +
		'<li class="sixth"><a href="'+Path+'/index/reservacion" title="Reservacion"><span>Reserva Ahora. Llena tu solicitud</span></a></li>' +
	'</ul>';
	
	$("body > div#body > #container > #content > div.what div.video").append(video_links);
	//si dan clic en la botonera para ir a una determinada parte del video
	$("body > div#body > #container > #content > div.what div.video ul#control li a").bind("click",function(){
		//segun el link presionado obtenemos los segundos.
		var ir_a = $(this).attr("href");

		switch(ir_a){
			case "1":
				elvideo.html('<span class="photo photo1"></span>');
				break;
			case "2":
				elvideo.html('<span class="photo photo2"></span>');
				break;
			case "3":
				elvideo.html('<span class="photo photo3"></span>');
				break;
			case "4":
				elvideo.html('<span class="photo photo4"></span>');
				break;
			case "5":
				elvideo.html(msgNoFlash);

				//Cambiamos al video seleccionado.
				$video = $(video)
				.find("object#flash_fallback_1 param[name='flashvars']")
				.attr("value",'config={"playlist":["'+Path+'app/views/images/djlive/video/video1.flv", {"url": "'+Path+'app/views/images/djlive/video/flowplayer-3.2.5.swf","autoPlay":true,"autoBuffering":true}]}')
					.parent()
					.parent()
				.html();

				show_player($video);
				break;
			default:
				return true;
		}

		return false;
	});
	
	$(".datepicker")
	.datepicker({
		"dateFormat": "yy-mm-dd",
		"minDate": 0
	});
	
	/* INFORMATION */
	$("#accordion h4").each(function(index){
		var value = $(this).html();
		$(this).html("<a href=#>"+value+"</a>");
	});
	
	$("div#accordion").accordion({ header: "h4" });
	
	/* PACKAGES */
	$("#content > div.packages div.transparent div").hide();
	$("#content > div.packages div.transparent div.first").show();
	$("#content > div.packages div.metal div")
		.mouseover()
		.css("cursor","pointer")
		.bind("click",function(){
			$("#content > div.packages div.transparent div").hide();
			$("#content > div.packages div.transparent div." + $(this).attr("class")).show();
		});
	/* VIDEOS */
	var _video_name = $("#content > div.images div.metal1 div#video").attr("class");
	
	var _video_flv = Path + 'app/views/images/uploads/videos/' + _video_name + '.flv';
	var _video_png = Path + 'app/views/images/uploads/videos/' + _video_name + '.jpg';
	var _w = "568";
	var _h = "376";
	
	var _video = '' +
	'<div>' +
		'    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
		'    <object id="flash_fallback_1" class="vjs-flash-fallback" width="' +_w+ '" height="' +_h+ '" type="application/x-shockwave-flash"' +
		'      data="' + player_url + '">' +
		'      <param name="movie" value="' + player_url + '" />' +
		'      <param name="allowfullscreen" value="false" />' +
		'      <param name="flashvars" value=\'config={"playlist":["' + _video_flv + '", {"url": "' + player_url + '","autoPlay":true,"autoBuffering":true}]}\' />' +
		'      <!-- Image Fallback. Typically the same as the poster image. -->' +
		'      <img src="' + _video_png + '" width="' +_w+ '" height="' +_h+ '" alt="Poster Image"' +
		'        title="No video playback capabilities." />' +
		'      ' +
		'    </object>' +
	'</div>';
	
	$("#content > div.images div.metal1 div#video").html(_video);
	
	
	/* Google Analytics 
	try {
		var pageTracker = _gat._getTracker("UA-6043638-1");
		pageTracker._trackPageview();
	} catch(err) {}
	*/
	/* Facebook Like box */
	$("div#content div.banners div.facebook").html('<fb:like href="http://www.dj-live.com"></fb:like>');

	/* FIX jquery ui accordion */
	$("div#accordion div[role='tabpanel']").css("height","inherit");
});