/*
 * @name Simple Prototype Tabs and Slideshow Class
 * @version 0.3
 * @author Andrew Peel <http://dotandpixel.com/>
 * @copyright 2011 Apparent Communications Pty Ltd <http://apparent.com.au/>
 * @license FreeBSD
 * @url http://dotandpixel.com/dev/tabs-slideshow
 * @require prototype.js, effects.js, tabs.js, prototype.class.slideshow.js
 */
if(typeof(Prototype) == "undefined") {
    throw "Slideshow requires Prototype to be loaded."; }
if(typeof(Effect) == "undefined") {
	throw "Slideshow requires Effects to be loaded."; }
if(typeof(Control.Tabs) == "undefined") {
	throw "Slideshow requires Effects to be loaded."; }
if(typeof(Slideshow) == "undefined") {
	throw "Slideshow requires Effects to be loaded."; }
	
	
var TabsSlideshow = Class.create({
    initialize:function(_options){
		
		// options
		this.options = {
			loop: 0,
			startDelay: 4000,
			fadeInDuration: 0.3,
			fadeInDelay: 0,
			fadeOutDuration: 0.3,
			fadeOutDelay: 1.5,
			navImageURL:"http://mynikonlife.com.au/pages/dev/tabs-slideshow/",
			onComplete: this.slideshowLoopComplete.bind(this),
			completeVisible: false,
			continuous: true /* different to infinite looping */
        };
		Object.extend(this.options, _options || {});
		
		this.msg = "Hello World!";
		this.tabIDPrefix = "gear-nav-",
		this.slideshowIDPrefix = "slideshow-"
		this.iconPath = this.options.navImageURL;
		
		// create new tabs instance
		this.Tabs = new Control.Tabs('gear-nav', { hover:false }); 
		
		// create new slideshow instance
		this.Slideshow = new Slideshow(this.getActiveSlideshowID(),this.options);
	
		// prepare tabs navigation handlers
		this.initTabsNavigation();
		
		// set tabs navigation to display active tab as active
		this.setActiveNavImage();
		
		// start slideshow on active tab
		this.Slideshow.start();
		
		//console.log("getActive("+getActive()+"), getActiveSlug("+getActiveSlug()+"), getActiveSlideshowID("+getActiveSlideshowID()+"), getActiveTabID("+getActiveTabID()+")" );
	},

	start: function(){
		this.Slideshow.start();
		return true;
	},
	
	slideshowLoopComplete: function(){
		//console.log("continuous: "+this.getContinuous());
		if(this.getContinuous()){
			if(this.getActive() != this.getLastTab()){
				this.Tabs.next();
			} else {
				this.Tabs.first();
			}
		} else {
			this.Slideshow.stop();
			this.Slideshow = null;
			this.Slideshow = new Slideshow(this.getActiveSlideshowID(),this.options);
			this.Slideshow.start();
			this.setActiveNavImage();
		}
	},
	
	
	
	// getters/setters
	getActive: function(){
		return	this.Tabs.activeContainer.identify();
	},
	
	getActiveSlug: function(){
		return this.getActive().substr(9,1000); 
	},
	
	getActiveSlideshowID: function(){
		return this.slideshowIDPrefix.concat(this.getActiveSlug());
	},
	
	getActiveTabID: function(){
		return this.tabIDPrefix.concat(this.getActiveSlug());
	},
	
	getPrevious: function(){
		return this.tabIDPrefix.concat(this.getActiveSlug());
	},
	
	getPreviousSlug: function(){
		return this.getPrevious().substr(9,1000); 
	},
	
	getPreviousTabID: function(){
		return this.tabIDPrefix.concat(this.getPreviousSlug());
	},
	
	getTabsLength: function(){
		return $('gear-nav').select('li').length;
	},
	
	getLastTab: function() {
		return $('gear-nav').select('li').last().down('a').readAttribute('href').substr(1,1000);
	},
	
	getContinuous: function (){
		return this.options.continuous
	},
	
	setContinuous: function (b){
		this.options.continuous = b;
	},
	
	
	// tabs navigation ui
	initTabsNavigation: function(){
		
		// click change event handlers
		this.Tabs.observe('beforeChange',function(){
			this.unSetActiveNavImage();
			this.Slideshow.stop();
			this.Slideshow = null;
		}.bind(this)); 
		
		this.Tabs.observe('afterChange',function(){
			this.Slideshow = new Slideshow(this.getActiveSlideshowID(),this.options);
			this.Slideshow.start();
			this.setActiveNavImage();
		}.bind(this));	
		
		// mouseover/mouseout
		$('gear-nav').select('div').each(function(e){
			e.observe('mouseout', function(event){
				var element = event.element();
				var range = element.up().readAttribute('href').substr(10,1000);
				if(range != this.getActiveSlug()){
					element.setStyle({"background":"url("+this.iconPath+"images/icons-"+range+"-sprite.png) no-repeat center top"});
				}
			}.bind(this));
			e.observe('mouseover', function(event){
				var element = event.element();
				var range = element.up().readAttribute('href').substr(10,1000);
				element.setStyle({"background":"url("+this.iconPath+"images/icons-"+range+"-sprite.png) no-repeat center bottom"});
			}.bind(this));
			e.observe('click', function(event){
				this.setContinuous(false);
			}.bind(this));
		}.bind(this));
		
	},
		
	// set active nav callback
	setActiveNavImage: function(){
		console.log("setActiveNavImage("+this.getActiveSlug()+")")
		$('gear-nav').down('.'+this.getActiveSlug()).select('div')[0].setStyle({"background":"url("+this.iconPath+"images/icons-"+this.getActiveSlug()+"-sprite.png) no-repeat center bottom"});
	},
	
	// unset active nav callback
	unSetActiveNavImage: function (){
		console.log("unSetActiveNavImage("+this.getPreviousSlug()+")")
		if(this.getPreviousTabID()){
			$('gear-nav').down('.'+this.getPreviousSlug()).select('div')[0].setStyle({"background":"url("+this.iconPath+"images/icons-"+this.getPreviousSlug()+"-sprite.png) no-repeat center top"});
		}
	}

})


/* Now, create an instance of myFirstClass, and call the function somefunction */

//var myTabsSlideshow = new TabsSlideshow();
//myTabsSlideshow.somefunction();