/**
 * Standard Pic Changer with categories and titles
 *
 * Replace an element with a picture changer
 *
 * @version 1.0
 * @author Lars Kemnah
 * @copyright Werbewind 2010
 *
 * Usage:
 *
 * // Init the changer with an array of pictures, the element to be replaced by the changer,
 * // an array of categories and an array of titles
 * //  - this will invoke preloading of the pictures
 * var img=['pic01.jpg','pic02.jpg'];
 * var cats=['Kategorie 1','Kategorie 2'];
 * var titles=['Titel 1','Titel 2'];
 * WW_StandardChanger.init(img,'dummy',cats,titles);
 *
 * // - - - optional settings - - -
 * // miliseconds until the next picture is shown
 * WW_StandardChanger.setChangeTime(4000);
 * // miliseconds of fading out of the picture
 * WW.StandardChanger.setSpeed(2000);
 * // - - - optional settings end - - -
 *
 * // run the changer
 * WW_StandardChanger.run();
 */
var WW_StandardChangerTitles={
	// index of currently shown picture
	current_pic:0,
	// wrapper which holds the pictures and navi
	container:'',
	// id of the element which will be replaced by the wrapper
	dummy:'',
	// container for picture 1
	container_1:'',
	// container for picture 2
	container_2:'',
	// picture 1
	pic_1:'',
	// picture 2
	pic_2:'',
	// category of picture 1
	cat_1:'',
	// category of picture 2
	cat_2:'',
	// title of picture 1
	title_1:'',
	// title of picture 2
	title_2:'',
	// array with all picture urls
	sources:'',
	// categories of gallery
	categories:'',
	// titles of pictures
	titles:'',
	// time until next picture is shown
	timeout:6000,
	// time how long the fading will last
	speed:2000,
	// timeout function 1
	changer_1:'',
	// timeout function 2
	changer_2:'',
	// status of changer
	running:false,
	
	/**
	 * Init the changer and preload all pictures
	 * @param Array sources
	 */
	init: function(sources, dummy, categories, titles){
		this.sources    = sources;
		this.dummy      = dummy;
		this.categories = categories;
		this.titles     = titles;
		for(var x=1; x<sources.length; x++) {
      		this._preload(sources[x]);
    	}
	},
	
	/**
	 * Set speed of fading out
	 * @param Integer time in milliseconds
	 */
	setSpeed: function(speed){
		this.speed = speed;
	},
	
	/**
	 * Set time for showing a picture before changing
	 * @param Integer time in milliseconds
	 */
	setChangeTime: function(timeout){
		this.timeout = timeout;
	},
	
	/**
	 * Run the application. The dummy element will be replaced with the gallery wrapper.
	 * Then the start of changing pictures is invoked.
	 */
	run: function(){
		if(this.sources.length>1){
			this.container = $('<div id="wwstandardchanger_wrapper"></div>');
			
			this.container_1 = $('<div id="wwstandardchanger_c1"></div>').css({position:'absolute',zIndex:5});
			this.container_2 = $('<div id="wwstandardchanger_c2"></div>').css({position:'absolute',display:'inline'});
			
			var tc1 = $('<div class="wwstandardchanger_ct"></div>').css({position:'absolute',zIndex:7});
			var tc2 = $('<div class="wwstandardchanger_ct"></div>').css({position:'absolute',zIndex:4});
			
			this.cat_1 = $('<span id="wwstandardchanger_c1" class="title">'+this.categories[0]+'</span>');
			this.cat_2 = $('<span id="wwstandardchanger_c2" class="title">'+this.categories[1]+'</span>');
			
			if(this.categories[0] == ''){
				this.cat_1.hide();
			}
			if(this.categories[1] == ''){
				this.cat_2.hide();
			}
			this.title_1 = $('<span id="wwstandardchanger_t1">'+this.titles[0]+'</span>');
			this.title_2 = $('<span id="wwstandardchanger_t2">'+this.titles[1]+'</span>');
			
			if(this.titles[0] == ''){
				this.title_1.hide();
			}
			if(this.titles[1] == ''){
				this.title_2.hide();
			}
			
			tc1.append(this.cat_1);
			tc2.append(this.cat_2);
			tc1.append(this.title_1);
			tc2.append(this.title_2);
			
			this.container_1.append(tc1);
			this.container_2.append(tc2);
			
			this.pic_1 = $('<img src="'+this.sources[0]+'" />');
			this.pic_2 = $('<img src="'+this.sources[1]+'" />');
			
			this.container_1.append(this.pic_1);
			this.container_2.append(this.pic_2);
			this.container.append(this.container_1);
			this.container.append(this.container_2);
			
			this._start();
		}
	},
	
	/**
	 * Actually start changing pictures when they are completely loaded
	 */
	_start: function(){
		this.running=true;
		var x = this;
		if(this._imgComplete(this.sources[1])) {
			$('#'+this.dummy).replaceWith(this.container);
			setTimeout(function(){
				x._changeFirst();
			}, x.timeout);
		}
		else{
			setTimeout(function(){
				x._start();
			}, x.timeout);
    	}
	},
	
	/**
	 * Change the first picture and call changing of the second picture
	 */
	_changeFirst: function(){
		if(this.running===false){
			return;
		}
		var x = this;
		this._callExternal();
		this.container_1.fadeOut(this.speed, function() {
    		x.container_1.css({display:'inline',zIndex:0});
    		x.container_2.css({zIndex:5});
			x._next();
			x.pic_1.attr('src',x.sources[x.current_pic]);
			if(x.categories[x.current_pic] != ''){
			  x.cat_1.html(x.categories[x.current_pic]);
			  x.cat_1.show();
			}
			else{
			  x.cat_1.hide();
			}
			if(x.titles[x.current_pic] != ''){
			  x.title_1.html(x.titles[x.current_pic]);
			  x.title_1.show();
			}
			else{
			  x.title_1.hide();
			}
			x.changer_1 = setTimeout(function(){
				x._changeSecond();
			},x.timeout);
    	});
	},
	
	/**
	 * Change second picture and call changing of the first picture
	 */
	_changeSecond: function(){
		if(this.running===false){
			return;
		}
		var x=this;
		this._callExternal();
		this.container_2.fadeOut(this.speed, function() {
    		x.container_2.css({display:'inline',zIndex:0});
    		x.container_1.css({zIndex:5});
			x._next();
			x.pic_2.attr('src',x.sources[x.current_pic]);
			if(x.categories[x.current_pic] != ''){
			  x.cat_2.html(x.categories[x.current_pic]);
			  x.cat_2.show();
			}
			else{
			  x.cat_2.hide();
			}
			if(x.titles[x.current_pic] != ''){
			  x.title_2.html(x.titles[x.current_pic]);
			  x.title_2.show();
			}
			else{
			  x.title_2.hide();
			}
			x.changer_2 = setTimeout(function(){
				x._changeFirst();
			}, x.timeout);
    	});
	},
	
	/**
	 * Increment current picture number
	 */
	_next: function(){
		this.current_pic++;
		if(this.current_pic >= this.sources.length){
			this.current_pic = 0;
		}
	},
	
	/**
	 * Decrement current picture number
	 */
	_prev: function(){
		this.current_pic--;
		if(this.current_pic < 0){
			this.current_pic = this.sources.length-1;
		}
	},
	
	/**
	 * Show specific pic
	 */
	_show: function(pic){
		this._stop();
		this.running=false;
		this.current_pic=pic;
		if(this.current_pic < 0 || this.current_pic >= this.sources.length){
			this.current_pic = 0;
		}
		this.container_2.css({display:'inline',zIndex:0});
    	this.container_1.css({zIndex:5});
		this.pic_1.attr('src',this.sources[this.current_pic]);
		if(this.categories[this.current_pic] != ''){
			this.cat_1.html(this.categories[this.current_pic]);
			this.cat_1.show();
		}
		else{
			this.cat_1.hide();
		}
		if(this.titles[this.current_pic] != ''){
		  this.title_1.html(this.titles[this.current_pic]);
		  this.title_1.show();
		}
		else{
		  this.title_1.hide();
		}
		var n=this.current_pic+1;
		if(n >= this.sources.length){
			n = 0;
		}
		this.pic_2.attr('src',this.sources[n]);
		if(this.categories[n] != ''){
			this.cat_2.html(this.categories[n]);
			this.cat_2.show();
		}
		else{
			this.cat_2.hide();
		}
		if(this.titles[n] != ''){
		  this.title_2.html(this.titles[n]);
		  this.title_2.show();
		}
		else{
		  this.title_2.hide();
		}
		this._callExternal();
	},
	
	/**
	 * Stop auto change
	 */
	_stop: function(){
		clearTimeout(this.changer_1);
		clearTimeout(this.changer_2);
	},
	
	/**
	 * Call external function(s) if implemented
	 */
	_callExternal: function(){
		if(typeof this.picChanged == 'function') {
          this.picChanged(this.current_pic);
        }
	},
	
	/**
	 * Preload an image
	 * @param String url of the image
	 */
	_preload: function(src){
		var d = document;
  		if (d.images) {
    		if (!d.p) {
      			d.p = new Array();
    		}
    		var key = d.p.length;
    		d.p[key] = new Image;
    		d.p[key].src = src;
  		}
	},
	
	/**
	 * Check if an image is completely loaded
	 * @param String url of the image
	 */
	_imgComplete: function(src){
		var img = new Image();
	    img.src = src;
	    if(!img.complete){
		    return false;
	    }
	    if(typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0){
	    	return false;
	    }
	    return true;
	}
};