/**
 *   sliderHome v1.0.5
 *
 *   A jQuery plugin based on Marcofolio's article "Advanced Query background image slideshow"
 *   (http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html)
 *
 *   @param options (Array) An array containing the settings to override the defaults one
 *
**/

(function($) {
	var defaults = {
			divContainer: "#sliderHomeContainer",
			slideshowSpeed: 6000,
			photos: []
		},
		currentImg = 0,
		animating  = false,
		options,
		interval,
		photos_length;

	$.fn.sliderHome = function (options) {
		return this.each(function () {
			// Extends the defaults options
			if (options) {
				$.extend(defaults, options);
			}


			// Create the structure
			$(defaults.divContainer).append(
				'<div id="headerimgs">\
					<div class="slider-link">\
						<div id="headerimg1" class="headerimg"></div>\
						<div id="headerimg2" class="headerimg"></div>\
					</div>\
				</div>\
				<div id="slider-wrapper">\
					<div id="headercontainer">\
							<a class="linkSlider">\
								<div class="titleText">\
									<p id="copeteText"></p>\
									<p id="tituloText"></p>\
								</div>\
							</a>\
							<a class="linkSlider">\
								<div class="descriptionText">\
									<p id="nombreProgramaText"></p>\
									<p id="bajadaText"></p>\
								</div>\
							</a>\
					</div>\
				</div><div><ul id="slider-selector"></ul></div>'
			);

			// For better performance
			photos_length = defaults.photos.length;

	

			navigateButtons();

			// Start animating the slide
			navigate("next");

			// Create a new timer to slide the pics automatically
			interval = setInterval(function() {
				navigate("next");
			}, defaults.slideshowSpeed);
		});
	};

	function navigateButtons() {
		var li_controls = '';

		// Create the nav
		for (var i = 1; i <= photos_length; i++) {
			li_controls += '<li id="slider-item-' + i + '" class="slider-selector-item"><div><p class="nombreProgramaMenu">'+defaults.photos[i-1].nombrePrograma+'</p><p class="fechaMenu">'+defaults.photos[i-1].fechaEmision + '</p></div></li>';
		}
		// Append the nav
		$('#slider-selector').append(li_controls);
		// Assign a click event to each item
		$('.slider-selector-item').each(function (index) {
			$(this).click(function (e) {
				e.stopPropagation();
				if ($(this).hasClass('slider-item-active')) {
					return;
				}
				stopAnimation();
				navigate(index + 1);
			});
		});

	}

	function navigate(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}

		// Check which current image we need to show
		if(direction === "next") {
			currentImg++;
			if(currentImg == photos_length + 1) {
				currentImg = 1;
			}
		} else if (direction === "back") {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos_length;
			}
		} else {
			currentImg = direction;
		}

		showImage(defaults.photos[currentImg - 1]);
	}

	function stopAnimation() {
		// Clear the interval
		clearInterval(interval);
	}

	function showImage(photoObject) {
		animating = true;

		// Set the new nav item active
		$('.slider-item-active').removeClass('slider-item-active');
		$('#slider-item-' + currentImg).addClass('slider-item-active');

		// Fade out the header text
		$("#headertxt").css({"display" : "none"});

		// Set the new header text
		$("#copeteText").html(photoObject.copete);
		$("#tituloText").html(photoObject.titulo);
		$("#bajadaText").html(photoObject.descripcion);
		$("#nombreProgramaText").html(photoObject.nombrePrograma);

		// Set the slide link
		$(".linkSlider").attr("href", photoObject.linkTo);

		// Set the new background, make the fading animation
		// and display the header text when animation is complete
		if ($("#headerimg2").is(":visible")) {
			$("#headerimg1").css({
				"background-image" : "url('" + photoObject.imagen + "')"
			});
			$("#headerimg2").fadeOut(function () {
				animating = false;
			});
		} else {
			$("#headerimg2").css({
				"background-image" : "url('" + photoObject.imagen + "')"
			}).fadeIn(function () {
				animating = false;
			});
		}
		$("#headertxt").css({"display" : "block"});
	}
}($jq));