/********************************************************************
 * Globals
 *******************************************************************/
 
g = {};
g.preload = [];

window.addEvent('domready', function() {

/********************************************************************
 * Preload
 *******************************************************************/

g.preload.each(function(s) {
	new Element('img').src = s;
});
	
/********************************************************************
 * Gradiant settings
 *******************************************************************/
 
g.gradchange = {
	'trigger': 'img.l_gradchange_trigger',
	'target': 'div.gradrad',
	'duration': 100,
	'delay': 500,
	'assoc': {
		'fallback': '#fff',
		'logo': '#ff6c00',
		'portfolio': '#f9b224',
		'portfolio_vin': '#f49820',
		'portfolio_tofs': '#f49820',
		'portfolio_web': '#f49820',
		'portfolio_l-autre': '#f49820',
		'misc': '#f49820',
		'contact': '#f47520',
		'about': '#f45220',
		'clients': '#f45220',
		'passwd': '#fff'
	}
};
/**
 * c string color
 * return void
 */
g.gradchange.apply = function(c) {
	var oo = $$(g.gradchange.target);
	var fx = {'background-color': c};
	var effects = {}
	oo.each(function(o, i) {
		effects[i] = fx;
	});
	if (g.gradchange.fx) g.gradchange.fx.cancel();
	g.gradchange.fx = new Fx.Elements(oo, {wait: false, duration: g.gradchange.delay}).start(effects);
}
// Gradiant color triggers
$$(g.gradchange.trigger).each(function(o) {
	o.fx = new Fx.Tween(o, {property: 'opacity', transition: Fx.Transitions.Expo.easeOut, duration: 500});
	//o.fx = o.effect('opacity', {transition: Fx.Transitions.Expo.easeOut, duration: 500});
	o.addEvent('mouseover', function() {
		g.gradchange.apply(g.gradchange.assoc[o.id]);
		o.fx.cancel();
		o.fx.start(0.5);
	});
	o.addEvent('mouseout', function() {
		g.gradchange.apply(g.gradchange.assoc.fallback);
		o.fx.cancel();
		o.fx.start(1);
	});
	if (o.id == 'portfolio') {
		var oi = $('portfolio_items');
		o.addEvent('click', function(evt) {
			new Event(evt).stop();
			if (!oi.state || oi.state == 'hidden') {
				oi.set('opacity', 0);
				oi.set('visibility', 'visible');
				new Fx.Tween(oi, {wait:false, property: 'height', transition: Fx.Transitions.Expo.easeOut, duration: 400}).start(35).chain((
					function() {
						new Fx.Tween(oi, {wait:false, property: 'opacity', transition: Fx.Transitions.Expo.easeOut, duration: 500}).start(1);
					}
				).call());
				oi.state = 'visible';
			} else {
				oi.set('opacity', 1);
				new Fx.Tween(oi, {wait:false, property: 'opacity', transition: Fx.Transitions.Expo.easeOut, duration: 500}).start(0).chain((
					function() {
						new Fx.Tween(oi, {wait:false, property: 'height', transition: Fx.Transitions.Expo.easeOut, duration: 750}).start(5);
					}
				).call());
				oi.state = 'hidden';
			}
		});
	}
});

g.glow = {
	state: false,
	apply:	function() {
		if (g.glow.state) var effect = [0.75, 1];
		else var effect = [1, 0.75];
		var oo = $$('.glow');
		var fx = {'opacity': effect};
		var effects = {}
		oo.each(function(o, i) {
			effects[i] = fx;
		});
		new Fx.Elements(oo, {wait: false, duration: 2000, transition: Fx.Transitions.Bounce.easeIn}).start(effects);
		g.glow.state = !g.glow.state;
	}
};
// init
(function() {g.gradchange.apply(g.gradchange.assoc.fallback)}).delay(g.gradchange.delay);
(function() {g.glow.apply()}).periodical(3000);

/********************************************************************
 * Stack Addon
 *******************************************************************/

Stack = new Class({
	$stack: [],
	add: function() {
		this.$stack.extend(Array.flatten(arguments));
		if (this.$stack.length == 1) this.call.bind(this).delay(10);
		return this;
	},
	call: function() {
		if (this.$stack.length) {
			this.$stack[0].apply(this, arguments);
		}
	},
	next: function() {
		this.$stack.shift();
		this.call();
	},
	clear: function() {
		this.$stack.empty();
		return this;
	}
});

/********************************************************************
 * Carousel
 *******************************************************************/
var layout = {};
layout.portfolio = {};

layout.portfolio.vin = {

	container: $(document.body).getElement('div.tween-container'),
	stack: new Stack,

	addItem: function(src, text, color, forward){
		if (!forward) forward = true;
		if (this.stack.$stack.length > 1) this.stack.$stack.pop();
		this.stack.add((function() {
			var c = new Element('div').setProperty('class', 'container');
			var b = new Element('div').setProperty('class', 'background').setStyle('background-image', 'url(' + src + ')');
			var d = new Element('div').setProperty('class', 'description').set('html', text);
			c.adopt(b.adopt(d)).inject(this.container, (forward?'bottom':'top'));
			if (!forward) {
				c.setStyle('left', '0px');
				this.container.setStyle('left', '0px');
				//c.setStyle('left', - c.getStyle('width').toInt());
			}
			this.startFx(color, forward);
		}).bind(this));
	},

	startFx: function(color, forward) {
		var oo = this.container.getElements('div.container');
		var effects = {};
		oo.each(function(o, i) {
			if (forward) {
				effects[i] = {
					'left': [o.getStyle('left'), o.getStyle('left').toInt() - o.getStyle('width').toInt()]
				};
			} else {
				effects[i] = {
					'left': [o.getStyle('left'), o.getStyle('left').toInt() +  o.getStyle('width').toInt()]
				};
			}
		});
		new Fx.Elements(oo, {/*transition: Fx.Transitions.Cubic.easeInOut,*/ duration: 1000, fps: 30}).start(effects).chain((function(){
			if (forward) {
				oo[1].setStyle('left', oo[1].getStyle('width'));
				oo[0].dispose();
			} else {
				oo[0].setStyle('left', oo[0].getStyle('width'));
				oo[1].dispose();
			}
			g.gradchange.apply(color);
			this.stack.next();
		}).bind(this));
	}
	
};


function ll(src) {
	new Request.JSON({
		url: src,
		onRequest: function() {},
		onSuccess: function(json) {
			// wait for image loading...
			var pload = new Element('img').addEvent('load', function() {
				// image loaded, rendering effect
				layout.portfolio.vin.addItem(
					json.image,
					json.description,
					json.color
				);
			});
			// load image
			pload.src = json.image;
			makeSubPaginate(json.base, json.pages, json.current);
		},
		onFailure: function() {}
	}).get({'xhr': ''});
}

function makeSubPaginate(b, p, c) {
	var t = $$('div.subpagination')[0];
	if (!t) return;
	t.empty();
	if (p > 1) {
		for(var i=1;i<=p;i++) {
			t.adopt(new Element('a').setProperties({
				'href': b + i,
				'class': (i==c?'current':''),
				'text': (i<10?'0'+i:i),
				'title': 'Page '+i
			}).addEvent('click', function(evt) {
				new Event(evt).stop();
				ll(this.href);
			}));
		}
	}
}

var oo = $(document.body).getElements('div.pagination a');
if (oo) {
	oo.each(function(o) {
		o.addEvent('click', function(evt) {
			new Event(evt).stop();
			if (!o.hasClass('current')) {
				oo.each(function($o) {
					$o.removeClass('current');
				});
				o.addClass('current');
				ll(o.href);
			}
		});
	});
}

/********************************************************************
 * Subfooter Menu Triggers
 *******************************************************************/
if ($('subfooter')) {
	var menu = $('subfooter').getElement('ul.menu');
	var subs = menu.getElements('li ul.sub');
	// opacity fix
	subs.each(function(sub) { sub.setStyle('opacity', 0) });
	menu.getElements('li a.trigger').each(function(a) {
		a.addEvent('click', function(evt) {
			new Event(evt).stop();
			var effects = {};
			subs.each(function(sub, i) {
				if (sub.getParent('li').getElement('a.trigger') == a && !sub.getStyle('opacity')) {
					effects[i] = {'opacity': [0,1]};
				} else if (sub.getStyle('opacity')) effects[i] = {'opacity': [1,0]};
			});
			new Fx.Elements(subs, {wait:false, duration:250}).start(effects);
		});
	});
}
	
});