/**
 * 
 * Routes Online - Slidr.js
 * Copyright © Fluid Creativity 2008
 *
 * Not-so-generic Sliding ticker Box functionality - Uses Mootools 1.2dev
 * This is WEB TWO POINT OOOOH, can't you tell by the name?
 *
 */

var Slidr = new Class({
	
	Implements: [Options, Events],
	
	data: null,
	type: null,
	el: null,
	markup: null,
	url: '/ajax/profiles.php',
	dimensions: {}, // container dimensions
	popupTimer: null,
	popup: null,
	
	options: {
		initialDelay: 5000,
		animDuration: 1500,
		pauseDuration: 10000,
		transition: 'quad:out',
		rows: 2,
		pauseOnHover: true,
		popupDelay: 300,
		popupFadeDuration: 400
	},
	
	initialize: function (el, type, options) {
		this.el = $(el);
		this.type = type;
		this.setOptions(options);
		this.fetchData();
	},
	
	prepare: function () {
		this.el.empty();
		this.dimensions = this.el.getSize();
		new Element('div', { 
			styles: { 
				'background': 'url(images/loading.gif) no-repeat 50% 50%', 
				'overflow': 'hidden',
				'width': this.dimensions.x - 3, 
				'height': this.dimensions.y - 3 
			}
		}).inject(this.el);
	},
	
	fetchData: function () {
		new Request.JSON({
			url: this.url,
			onComplete: function (data) {
				if (data) {
					this.data = data;
					this.prepare();
					this.buildStructure();
				}
			}.bind(this)
		}).get({ orgtype : this.type, lang: MultiLingual.langCode });
	},
	
	buildStructure: function () {
		this.markup = new Element('ul', { 'class': 'slideList', styles: { 'width': this.dimensions.x * 3 } });
		
		// odd number of results, so remove one!
		if (this.options.rows > 1 && this.data.length & 1) this.data.pop();
		
		for (var i = 0; i < this.data.length; i += this.options.rows) {
			var slider = new Element('li', { styles: { 'float': 'left', 'width': this.dimensions.x } }).inject(this.markup);
			var subUl  = new Element('ul', { 'class': 'memberList' }).inject(slider);
			
			for (var j = i; j < i + this.options.rows; j++) {
				var infoHolder = new Element('li').inject(subUl);
				infoHolder.store('eventTypes', this.data[j].eventTypes);
				infoHolder.store('attending', this.data[j].attending);
				
				var link1 = new Element('a').inject(infoHolder);
				var link2 = new Element('a', { text: this.data[j].title.truncate(15) }).inject(infoHolder);
				
				if (this.data[j].href) {
					link1.set('href', this.data[j].href);
					link2.set('href', this.data[j].href);
				}
				
				new Element('img', { src: this.data[j].image, alt: this.data[j].title }).inject(link1);
				new Element('span', { text: this.data[j].type.truncate(15) }).inject(infoHolder);
				new Element('span', { text: this.data[j].location.truncate(15) }).inject(infoHolder);
				
				if (this.data[j].eventTypes.length || this.data[j].attending.length) {
					infoHolder.addEvent('mouseenter', function (event, el) {
						this.popupTimer = this.buildPopup.delay(this.options.popupDelay, this, el);
					}.bindWithEvent(this, infoHolder));
					
					infoHolder.addEvent('mouseleave', function () {
						this.popupTimer = $clear(this.popupTimer);
						if (this.popup) this.removePopup();
					}.bindWithEvent(this));
				}
			}
		}
		
		this.markup.inject(this.el.getFirst().setStyle('background', 'none'));
		
		if (this.markup.getChildren().length > 1) {
			if (this.options.pauseOnHover) {
				this.markup.addEvent('mouseover', function () {
					this.markup.store('mouseOver', true);
				}.bindWithEvent(this));
				
				this.markup.addEvent('mouseout', function () {
					this.markup.store('mouseOver', false);
				}.bindWithEvent(this));
			}
			
			this.animate.delay(this.options.initialDelay, this);
		}
	},
	
	animate: function() {
		var slideMe = this.markup.getFirst();
		
		if (!this.markup.retrieve('mouseOver')) {
			var fx = new Fx.Tween(slideMe, {
				duration: this.options.animDuration,
				transition: this.options.transition,
				onComplete: function () {
					slideMe.dispose().setStyle('margin-left', 0).inject(this.markup);
					this.animate.delay(this.options.pauseDuration, this);
				}.bind(this)
			}).start('margin-left', -this.dimensions.x);
		} else {
			this.animate.delay(2000, this);
		}
	},
	
	buildPopup: function (infoHolder) {
		this.popupTimer = $clear(this.popupTimer);
		var popup  = new Element('div', { 'class': 'hoverPopup' }).fade('hide');
		var nested = new Element('div', { 'class': 'popupNestedElement' }).inject(popup);
		this.popup = popup.inject(document.body);
		
		var eventTypes = infoHolder.retrieve('eventTypes');
		var attending  = infoHolder.retrieve('attending');
		
		if (eventTypes && eventTypes.length > 0) {
			new Element('strong', { text: MultiLingual.getString('js_attendingevents') }).inject(nested);
			var ul = new Element('ul').inject(nested);
		
			eventTypes.each(function (eventType) {
				new Element('li', { text: eventType.title, styles: { color: eventType.colour } }).inject(ul);
			});
		} else if (attending && attending.length > 0) {
			new Element('strong', { text: MultiLingual.getString('js_attendingevents') }).inject(nested);
			var ul = new Element('ul').inject(nested);
		
			attending.each(function (event) {
				new Element('li', { text: event.title, styles: { color: event.colour } }).inject(ul);
			});
		}
		
		var elCoords = this.el.getCoordinates();
		var infoCoords = infoHolder.getCoordinates();
		
		this.popup.setStyles({
			position: 'absolute',
			top: infoCoords.top,
			left: elCoords.left + elCoords.width - 8
		});
		
		var fx = new Fx.Tween(this.popup, { duration: this.options.popupFadeDuration });
		if (Browser.Engine.trident) {
			/* internet exploder and animated opacity on png's with alpha just 
			   don't go well together (text rendering looks broken during animation) */
			fx.set('opacity', 1);
		} else {
			fx.start('opacity', 1);
		}
	},
	
	removePopup: function () {
		var fx = new Fx.Tween(this.popup, {
			duration: this.options.popupDelay - 50,
			onComplete: function () {
				this.popup.destroy();
			}.bind(this)
		});
		
		if (Browser.Engine.trident) {
			this.popup.destroy();
		} else {
			fx.start('opacity', 0);
		}
	}
	
});