// Script: globals.js :: Rendez, 03/22/09

/**
 * script: BackgroundSwitcher Class
 * @author Luis M (Rendez) :: 04/22/09
 **/
var BackgroundSwitcher = new Class({
	
	Implements: [Events, Options],
	
	options: {
		imagesUri: 'images/backgrounds/',
		placeholder: 'body',
		classname: 'active',
		onInit: $empty,
		onLoading: $empty,
		onComplete: $empty
	},
	
	initialize: function(images, options){
		this.setOptions(options);
		this.images = (images.constructor !== Array) ? [] : images;
		this.elements = document.getElements('.bg_thumbs li a');
		this.elements.each(function(el, index){
			el.addEvent('click', this.switcher.bind(this, [index, el]));
		}, this);
		this.fireEvent('init');
	},
	
	switcher: function(index, element){
		this.fireEvent('loading', element);
		var background = this.options.imagesUri + this.images[index],
			placeholder = document.getElement(this.options.placeholder);
			bg = new Asset.image(background, {onload: function(image){
				placeholder.setStyle('background-image', 'url('+image.src+')');
				this.fireEvent('complete', element, 150);
			}.bind(this)});
		this.removeActive(this.elements);
		this.addActive(element);
		return false;
	},
	
	removeActive: function(els){
		els.removeClass(this.options.classname);
	},
	
	addActive: function(el){
		el.addClass(this.options.classname);
	}
	
});

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

	var BGs = [ 'seventhsign.jpg', 'kingfisher.jpg', 'light_tree.jpg', 'mandala_2.jpg', 'mandala.jpg', 'ostara.jpg', 'candels.jpg', 'tree_planet.jpg',];

	new BackgroundSwitcher(BGs, {
		onInit: function(){
			this.spinner = $('background_loader').setStyle('display', 'none');
		},
		onLoading: function(box){
			var posx = box.getPosition().x;
			this.spinner.setStyles({'left': posx, 'display': ''});
		},
		onComplete: function(){
			this.spinner.setStyle('display', 'none');
		}
	});

	var pages = $$('.navigation li');
	var ajaxs = pages.getElement('a');
	
	var contentFade = new Fx.Tween('ajax_content', {property:'opacity', wait:false, duration:200 });

	// classnames acting like hrefs in this case
	var hrefs = ajaxs.map(function(el){
		return el.getParent().className;
	});
	// no index now
	var currentIndex = -1;

	var req = new Request.HTML({
		update: $('ajax_content'),
		autoCancel: true
	});

	var reqHistory = HistoryManager.register(
		null,
		[0], // default, page 0
		function(values) {
			value = (values[0] == 0) ? 'news' : values[0];
			index = hrefs.indexOf(value);
			ajaxUpdate(value, index);
		},
		function(value) {
			return value;
		},
		/(\w+)/
	);
	
	HistoryManager.start();

	function ajaxUpdate(page, index) {
		var url = page || null;
		if (!url || (currentIndex == index)) return;

		if (currentIndex != -1) ajaxs[currentIndex].removeClass('active_nav');
		ajaxs[index].addClass('active_nav');

		currentIndex = index;

		reqHistory.setValue(0, page);
		contentFade.start(0).chain(function(){
			req.get(url).chain(function(){
				contentFade.start(1);
			});
		});
	};
	
	//ajaxs[0].fireEvent('click');

	ajaxs.each(function(el, i) {
		el.addEvent('click', function(e) {
			ajaxUpdate(hrefs[i], i);
			return false;
		});
	});

});