var Slider = Class.create({
	initialize: function( element ){
		// Set default parameters
		this.randomize = false;
		this.transitionSpeedSeconds = 1;
		this.elementDurationSeconds = 6;
		
		this.sliderDiv = jQuery(element);
		
		// Set opacity of images to 0
		this.sliderDiv.find('div.content').css({opacity: 0.0});
		
		// Read config from json
		var jsonspan = this.sliderDiv.find('span.jsondata');
		
		if(jsonspan) {
			// We remove the content class to avoid the config content asset to be shown
			jsonspan.parents('div.content').removeClass('content');
			
			// We read the json configuration and set the new parameters
			var jsondata = this.getJSON(jsonspan);
			if(jsondata.randomize) {
				this.randomize = jsondata.randomize;
			}
			if(jsondata.transitionSpeed) {
				this.transitionSpeedSeconds = parseFloat(jsondata.transitionSpeed);
			}
			if(jsondata.elementDuration) {
				this.elementDurationSeconds = parseFloat(jsondata.elementDuration);
			}
		}
		
		this.transitionSpeedMs = this.transitionSpeedSeconds * 1000;
		this.elementDurationMs = this.elementDurationSeconds * 1000;
		
		// The duration value at the inner logic starts to count when the transition starts. Due to this,
		// we need to add the transition time to the duration time value
		this.elementDurationMs += this.transitionSpeedMs;
		
		// Get first image and display it
		this.sliderDiv.find('div.content:first').css({opacity: 1.0})
		.addClass('show')
		.addClass('showAsBlock');
		
		// Call slide function to run the slideshow
		theElem = this;
		setInterval('theElem.slide()',this.elementDurationMs);
		
		// Show the slider
		this.sliderDiv.fadeIn(this.transitionSpeedMs);
	},
	
	slide: function() {
		var divShow = this.sliderDiv.find('div.show');
		var divContentFirst = this.sliderDiv.find('div.content:first');
		
		// Get first image
		var current = divShow ? divShow : divContentFirst;
		
		var nextDivContent = current.next('div.content');
		
		// Get next image. When it reaches the end, go back to the first image
		var next = nextDivContent.length ? nextDivContent : divContentFirst;
		
		//Get the images in random order
		if(this.randomize) {
			var siblings = current.siblings('div.content');
			var rand = Math.floor(Math.random() * siblings.length);
			var next = jQuery(siblings[rand]);
		}
		
		//Set the fade in effect for the next image
		next.css({opacity: 0.0})
		.addClass('show')
		.addClass('showAsBlock')
		.animate({opacity: 1.0}, this.transitionSpeedMs);

		//Hide the current image
		current.animate({opacity: 0.0}, this.transitionSpeedMs)
		.removeClass('show');
		
		current.delay(this.transitionSpeedMs).queue(function(next){
		    current.removeClass("showAsBlock");
		    next();
		});

	},
	
	getJSON : function(jsonData) {
		var json = {};
		if (jsonData) {
			var plainData = '';
			if(jsonData.html()!=undefined) {
				plainData = new String(jsonData.html());
			} else {
				plainData = new String(jsonData);
			}
			var attr = plainData.split('<!-- json:');
			if (attr.length >= 2) {
				var json_raw = attr[1].split('-->')[0];
				try {
					// The json_raw var is HTML encoded.
					json_raw = json_raw.unescapeHTML();

					// JS code in JSON object is not allowed
					json = json_raw.evalJSON(true);
				} catch (e) {
					console.error("JSON could not be parsed (%o)",e);
				}
			}
		}
		return json;
	}
});
	

jQuery(document).ready(function() {
	jQuery('div.jsSlider').each( function(){
		new Slider(this);
	});
});