// JavaScript Document

jQuery(document).ready(function($){
	$('.Subcategoria .SubCategoria_productos').hide();
	$('.Subcategoria .SubCategoria_productos:first').show();
	$('.Subcategoria h3').click(function(){
		$(this).parent('.Subcategoria').children('.SubCategoria_productos').slideToggle();
	});
	
	$('#FAQ h3 + div').hide();
	$('#FAQ h3 + div:first').show();
	$('#FAQ h3').click(function(){
		$(this).next('div').slideToggle();
	});
	
	$('#Nav li').bind('mouseenter', function(){
		$(this).children('ul').fadeIn();
	});
	$('#Nav li').bind('mouseleave', function(){
		$(this).children('ul').fadeOut();
	});
	$('#Nav ul').hide();
	

	// Test Tabs
	$(".TestSlide").hide();
	
	// This one seemed truly useful...until I noticed that you could just refresh and be in the same slide but with
	// all the other options erased, so I commented this, after I wrote it, because I couldn't use it...but since it
	// worked, i didn't wanted to delete it so I had to write it again somewhere else...so yeah, I'm bored...
	//if(window.location.hash && window.location.hash.match('Slide')) {
		//$("#Test div#"+window.location.hash).fadeIn();
	//} else {
		$("#Test div:first").fadeIn();
	//}

	$(".TestSlide a").click(function() {
		var activeTab = $(this).attr("href");
		window.location.hash = activeTab;
	
		$(this).parents('.TestSlide').hide();
		$(activeTab).fadeIn();
		return false;
	});
	
	$('.TestSlide input:radio').click(function() {
		var id = $(this).parents('.TestSlide').attr('id');
		if(id == "Slide9") {
			$('#' + id + ' .Last').show();
		} else {
			$('#' + id + ' .Next').show();
		}
		
		// Let's jump from slide2 to slide4
		if(id === "Slide2") {
			if($(this).val() == 4) {
				$('#Slide2 .Next').attr('href', '#Slide4');
				$('.TestSlide .mightchange').attr('href', '#Slide2');
				$('#Slide4 .Back').attr('href', '#Slide2');
			} else {
				$('#Slide2 .Next').attr('href', '#Slide3');
				$('.TestSlide .mightchange').attr('href', '#Slide3');
				$('#Slide4 .Back').attr('href', '#Slide3');
			}
		}
	});
	
	$('.TestSlide a.Last').click(function() {
		$('form#TestForm').submit();
	});
	
	$('a.BottleBack').click(function() {	$('div.Summary').fadeIn();	});
	$('div.Summary a').click(function() {	$('div.Summary').fadeOut();	});
});


function video_color(cual_color){
	var selector = '.VideoLayer.'+cual_color;
	console.log(selector);
	ventanaGris(selector);
}

function ventanaGris(selector){
	var ventana = $('<div class="ventana_gris" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:12;">\
		<div class="fondo_ventana_gris" style="position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7; filter:alpha(opacity=70); z-index:11;"></div>\
		<a href="#" class="cerrar" style="float:right; color:white; position:relative; z-index:13; border:2px solid white;padding: 10px;border-radius: 20px;font: 30px/20px Arial;text-decoration: none;\
				width: 20px;height: 20px; margin:20px;" onclick="$(\'.ventana_gris\').empty().remove(); return false;">X</a>\
		<div class="contenido" style="text-align:center; position:relative; z-index:12;"></div>\
		</div>');
	ventana.find('.contenido').append( $(selector).clone() ).find('div').show();
	
	$('body').append(ventana);
}