// Extending MooTools 1.2. Basic show / hide / toggle and isVisible
Element.implement({
	show: function() {
		this.setStyle('display', 'block');
	},
	hide: function() {
		this.setStyle('display', 'none');
	},
	toggle: function() {
		this.isVisible() ? this.hide() : this.show();
	},
	isVisible: function() {
		return this.getStyle('display') !== 'none';
	},
	dissolve: function (speed) {
		var el = this, speed = speed || 500;
		el.setStyle('opacity', 1);
		el.set('tween', {
			duration: speed,
			onComplete: function () {
				el.hide();
			}
		});
		el.tween('opacity', 0);
	},
	reveal: function (speed) {
		var el = this, speed = speed || 500;
		el.setStyle('opacity', 0);
		el.set('tween', {
			duration: speed,
			onStart: function () {
				el.show();
			}
		});
		el.tween('opacity', 1);
	}
});

// Basic tab class
var MooTabs = new Class({
	
	Implements: [Options],
	
	options: {
		activeTabClass: 'active',
		tabSelector: 'ul li',
		panelSelector: 'div',
		selectedTab: 0,
		rememberTab: false,
		cookieID: ''
	},
	
	container: 'tabs', // the container id string/element
	tabs: [], // the tab elements
	panels: [], // the panel elements
	cookieName: 'tabFxRemember', // the cookie name (prefix)
	
	initialize: function(container, options) {
		
		this.setOptions(options);
		this.container = (container ? $(container) : $(this.container));
		
		this.cookieName = this.options.cookieID || this.cookieName;
		this.options.selectedTab = this.options.selectedTab || Cookie.read(this.cookieName) || 0;
		
		if (this.options.rememberTab && !Cookie.read(this.cookieName)) {
			Cookie.write(this.cookieName, this.options.selectedTab);
		}
		
		this.tabs = this.container.getElements(this.options.tabSelector);
		this.panels = this.container.getElements(this.options.panelSelector);
		
		if (this.tabs.length != this.panels.length) {
			return false;
		}
		
		this.panels.each(function(element, index) {
			if (index != this.options.selectedTab)
				element.hide();
		}.bind(this));
		
		this.tabs.each(function(element, index) {
			element.addEvent('click', function(e) {
				e.stop();
				this.activate(index);
			}.bind(this));
			
			if (index == this.options.selectedTab)
				element.addClass(this.options.activeTabClass);
		}.bind(this));
	}, 
	
	activate: function(tab) {
		this.panels.each(function(element, index) {
			if (element.isVisible() && tab != index) {
				element.hide();
			} else if (tab == index) {
				element.show();
			}
		});
		
		this.tabs.each(function(element, index) {
			(tab == index) ? element.addClass(this.options.activeTabClass) : element.removeClass(this.options.activeTabClass);
		}.bind(this));
		
		if (this.options.rememberTab) {
			Cookie.write(this.cookieName, tab);
		}
	}
});


// Player Card
var PlayerCard = new Class({
	
	Implements: [Options],
	
	container: null,
	content: null,
	title: null,
	isHighest: false,
	
	options: {
		position: {x: 0, y: 0},
		html: '',
		titleHtml: '',
		id: null
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.options.id = 'card_'+this.options.id;
		
		// check if card allready exists
		if (cards.checkIfExists(this.options.id)) {
			//return $(this.options.id); // return the element
		}
		
		this.zIndex = cards.getHigherZIndex();
		
		this.container = new Element('div', {
			'styles': {
				'position': 'absolute',
				'left': this.options.position.x,
				'top': this.options.position.y,
				'z-index': this.zIndex
			},
			'class': 'playerCard',
			'id': this.options.id,
			'events': {
				'mousedown': function() {
					this.setHighest();
				}.bind(this)
			}
		});
		
		var html = '<span class="left"></span><span class="title"><strong>title</strong>';
		html += '<a href="#"></a></span><span class="right"></span>';
		
		var titleBar = new Element('div', {
			'class': 'titleBar',
			'html': html
		});
		
		this.title = titleBar.getElement('strong');
		this.title.set('html', this.options.titleHtml);
		
		var closeBtn = titleBar.getElement('a');
		closeBtn.addEvent('click', function(e) {
			e.stop();
			this.close();
		}.bind(this));
		
		this.content = new Element('div', {
			'class': 'content',
			'html': this.options.html
		});
		
		var myDragInstance = new Drag(this.container, {
			handle: titleBar
		});
		
		titleBar.inject(this.container);
		this.content.inject(this.container);
	},
	
	getRandomId: function() {
		return String((new Date()).getTime()).replace(/\D/gi,'');
	},
	
	setContent: function(html) {
		this.options.html = html;
		this.content.set('html', this.options.html);
	},
	
	setTitle: function(html) {
		this.options.titleHtml = html;
		this.title.set('html', this.options.titleHtml);
	},
	
	render: function() {
		this.container.inject($('wrapper'));
		cards.add(this);
		cards.resetIsHighest();
		this.isHighest = true;
	},
	
	setHighest: function() {
		if (cards.instances.length > 1 && !this.isHighest) {
			this.zIndex = cards.getHigherZIndex();
			this.container.setStyle('z-index', this.zIndex);
			cards.resetIsHighest();
			this.isHighest = true;
		}
	},
	
	close: function() {
		cards.remove(this);
		this.container.destroy(); // bye bye
	}
});

var CardInstances = new Class({
	instances: [],
	
	add: function(instance) {
		this.instances[this.instances.length] = instance;
	},
	
	remove: function(instance) {
		this.instances.erase(instance);
		this.setNextInstanceIsHighest();
	},
	
	resetIsHighest: function() {
		this.instances.each(function(instance) {
			instance.isHighest = false;
		});
	},
	
	getHigherZIndex: function(instance) {
		if (this.instances.length > 0) {
			var zIndexes = [];
			this.instances.each(function(instance) {
				zIndexes[zIndexes.length] = instance.zIndex;
			});
			
			return Math.max.apply(null, zIndexes) + 1; // TODO: browser support?
		}
		
		return 99;
	},
	
	setNextInstanceIsHighest: function() {
		if (this.instances.length == 1) {
			this.instances[0].isHighest = true;
		} else if (this.instances.length > 1) {
			var zIndexes = [];
			this.instances.each(function(instance) {
				zIndexes[zIndexes.length] = instance.zIndex;
			});
			
			var zMax = Math.max.apply(null, zIndexes); // TODO: browser support?
			
			this.instances.each(function(instance) {
				if (instance.zIndex == zMax) {
					instance.isHighest = true;
				}
			});
		}
	},
	
	checkIfExists: function(id) {
		if ($(id)) {
			return true;
		}
		
		return false;
	}
});

var cards = new CardInstances();