var canvasInstance;

var Canvas = function(height, width, wrapperid) {
	this.height = height;
	this.width = width;
	this.wrapper = $(wrapperid);
	this.slides = new Array();
	this.currentSlide = 0;
	this.slideDuration = 2000;
	this.developmentMode = false;
	canvasInstance = this;
	
	//disable fading for ie8 or less
	if($.browser.msie && parseInt($.browser.version) <= 8)
	{
		this.fade = false;
	}
	else
	{
		this.fade = true;
	}
	
	if($.browser.msie && parseInt($.browser.version) <= 6)
	{
		this.compatible = false;
	}
	else
	{
		this.compatible	= true;
	}
}

Canvas.prototype.init = function(mode, currentSlide) {
	if(!this.compatible) return;
	
	this.developmentMode = typeof(mode) != 'undefined' ? mode : false;
	this.currentSlide 	 = typeof(currentSlide) != 'undefined' ? currentSlide : 0;
	
	//preload images
	this.preload();
	
	//Create slideshow canvas
	this.wrapper.html('<div class="canvas"></div>');

	var css = {
		position: 'relative',
		height: this.height,
		width: this.width
	};
	
	if(this.developmentMode)
		css.overflow = 'visible';
	else
		css.overflow = 'hidden';
	
	//Size Canvas
	this.getCanvas().css(css);
}

Canvas.prototype.start = function() {
	if(!this.compatible) return;
	this.nextSlide();
}

Canvas.prototype.nextSlide = function(){
	var slide = this.getNextSlide();
	
	this.initSlide(this.getCurrentSlide());

	var animationLength = 0;

	for(key in slide)
	{
		var sprite = slide[key];
		var startTime 	= sprite.startTime ? sprite.startTime 	: 0;
		var startTop 	= sprite.startTop 	? sprite.startTop 	: 0;
		var startLeft 	= sprite.startLeft 	? sprite.startLeft 	: 0;
		
		//set animation length
		var spriteTime = parseInt(sprite.duration) + parseInt(sprite.startTime);
		if(animationLength < spriteTime)
			animationLength = spriteTime;
		
		switch(sprite.effect)
		{
			case 'animate':
				setTimeout('$("#' + this.getId(key, this.currentSlide - 1) + '").animate({top: "' + sprite.endTop + '", left: "' + sprite.endLeft + '"}, ' + sprite.duration + ')', sprite.startTime);
			break;
			
			case 'fadeIn':
				
				if(this.fade || this.getImageType(sprite.src) == 'jpg')
					setTimeout('$("#' + this.getId(key, this.currentSlide - 1) + '").fadeIn(' + sprite.duration + ')', sprite.startTime);
				else
					setTimeout('$("#' + this.getId(key, this.currentSlide - 1) + '").css({display: "inline-block"})', sprite.startTime);
			break;
		}
	}
	
	setTimeout('canvasInstance.hideSlide(' + this.getCurrentSlide() + ')', parseInt(animationLength) + parseInt(this.slideDuration));
	setTimeout('canvasInstance.nextSlide()', parseInt(animationLength) + parseInt(this.slideDuration));
}

Canvas.prototype.getImageType = function(src) {
	return src.substr(src.length - 3, 3);
}

Canvas.prototype.getCurrentSlide = function() {
	return this.currentSlide - 1;
}

Canvas.prototype.getId = function(spriteKey, slideKey){
	return 'sprite-' + slideKey + '-' + spriteKey;
}

Canvas.prototype.initSlide = function(slideInt) {
	for(key in this.slides[slideInt])
	{
		var sprite = this.slides[slideInt][key];
		var spriteId = 'sprite-' + slideInt + '-' + key;
		
		if(!this.developmentMode)
		{
			if(sprite.guide === true)
				continue;
		}
		
		if(this.developmentMode)
		{
			if(sprite.background === true)
				continue;
		}
		
		if($('#' + spriteId).length == 0)
			this.getCanvas().append('<img src="' + sprite.src + '" id="' + spriteId + '" class="sprite"/>');
		
		var css = new Object();
		
		css.top 		= sprite.startTop 	? sprite.startTop 	: 0;
		css.left 		= sprite.startLeft 	? sprite.startLeft 	: 0;
		css['z-index']	= sprite.zindex 	? sprite.zindex 	: 0;
		
		if(!this.developmentMode)
			css.display = 'none';
	
		css.position = 'absolute';
		
		$('#' + spriteId).css(css);
		
		if(sprite.effect != "fadeIn")
			if(this.fade)
				$('#' + spriteId).fadeIn();
			else
				$('#' + spriteId).css({display: 'inline-block'});
	}
	
	if(this.developmentMode)
	{
		$('.sprite').draggable({
			drag: function(event, ui){
				var id = $(this).attr('id');
				console.log('(#'+id+') top: ' + $(this).css('top'));
				console.log('(#'+id+') left: ' + $(this).css('left'));
			}
		});
		
		$('.sprite').mouseenter(function(){
			$(this).css({opacity: .5});
		});
		
		$('.sprite').mouseleave(function(){
			$(this).css({opacity: 1});
		});
	}
}

Canvas.prototype.hideSlide = function(slideInt) {
	for(key in this.slides[slideInt])
	{
		if(this.fade || this.getImageType(this.slides[slideInt][key].src) == 'jpg')
			$('#' + this.getId(key, slideInt)).fadeOut();
		else
			$('#' + this.getId(key, slideInt)).css({display: 'none'});
	}
}

Canvas.prototype.getNextSlide = function() {
	if(this.currentSlide == this.slides.length)
	{
		this.currentSlide = 1;
		return this.slides[0];
	}
	else
	{
		this.currentSlide = this.currentSlide + 1;
		return this.slides[this.currentSlide - 1];
	}
}

Canvas.prototype.addSprite = function(slideInt, spriteConfig) {
	
	if(!this.slides[slideInt])
	{	
		this.slides[slideInt] = new Array();
	}
	
	this.slides[slideInt].push(spriteConfig);
}

Canvas.prototype.print = function() {
	for(key in this.slides)
	{
		console.log('Slide: ' + key);
		for(sprite in this.slides[key])
		{
			console.log(this.slides[key][sprite]);
		}
	}
}

Canvas.prototype.preload = function() {
	for(key in this.slides)
	{
		for(sprite in this.slides[key])
		{
			(new Image()).src = this.slides[key][sprite].src;
		}
	}
}

Canvas.prototype.getCanvas = function(){
	return $(this.wrapper).find('.canvas');
}