// Element.Styles.backgroundPositionX = '@%';
// Element.Styles.backgroundPosition = '@% @%';
// Element.Styles.left = '@%';


this.C4 = this.C4 || {};
C4.Slider = new Class({
	
	Implements: [Options, Events],
	
	options:{
		root:'#site-content',
		page:'#site-content .page-content',
		trans:'#site-content .transition'
	},
	
	initialize: function(options){
		this.setOptions(options);
		
		// Find my stuff
		this.root = $$(this.options.root)[0];
		this.pages = $$(this.options.page);
		this.trans = $$(this.options.trans);
		this.currentPage = this.pages.filter('.current-page')[0];
		this.currentTrans = this.trans.filter('.current-transition')[0];
		
		this.bg = this.root.getElement('.bg-top');
		
		// Set FX Defaults
		this.pages.set('tween',{
			// transition: 'expo:out',
			duration: 2000,
			unit:'%'
		});
		this.trans.set('tween',{
			// transition: 'expo:out',
			duration: 4000,
			unit:'px'
		});
		this.bg.set('tween',{
			transition: 'sine:in:out',
			duration: 1000
		});
		
		var self = this;
		this.fxs = this.pages.map(function(page,i,pages){
			// self.rocks = true;
			
		});
		
	},
	
	next: function(){
		this.nextPage = this.pages[this.pages.indexOf(this.currentPage) + 1];
		this.nextPage = this.nextPage || this.pages[0];
		
		var nextPageTween = this.nextPage.get('tween').start('left', 150, 50).pause();
		var bg = this.bg.fade('out');
		this.currentPage.tween('left', 50, -150).get('tween').chain(function(){
			nextPageTween.resume();
			setTimeout(bg.fade.bind(bg,['in']), 750);
		});
		// this.currentTrans.tween('background-position', 40, 60);
		this.currentTrans.tween('margin-left', -100, 100);
	},
	
	reset: function(){
		this.currentPage.removeClass('current-page').setStyle('left');
		this.currentPage = this.nextPage;
		this.currentPage.addClass('current-page');
		
		this.currentTrans.removeClass('current-transition').setStyle('background-position');
		this.currentTrans = this.trans[this.trans.indexOf(this.currentPage)];
		this.currentTrans = this.currentTrans || this.trans[0];
		this.currentTrans.addClass('current-transition');
	}
	
});