window.addEvent('domready', function() {
	/*var val = new Element('div', {'id': 'val'}).inject($('twoColumnPage'));
	val.setStyles({
		'position': 'fixed',
		'left': 0,
		'width': '100%',
		'top': 440,
		'height': 150,
		'z-index': 1234
	});
	var swiff = new Swiff('fileadmin/flash/val.swf', {'container': val, 'width': 1718, 'height': 150});*/
	
	$$('.clown-ringtone-player-info').fade('hide').setStyle('display', 'block').addEvent('mouseenter', function() {
		//var test = this.get('id').substring(27); debugger;
		showInfo(this.get('id').substring(27));
	}).addEvent('mouseleave', function() {
		hideInfo(this.get('id').substring(27));
	});
	
	// functions for showing and hiding the info panes
	var showInfo = function(which) {
		$(which + '-content-inner').slide('show');
		$('clown-ringtone-player-info-' + which).fade('in');
	}
	
	var hideInfo = function(which) {
		$('clown-ringtone-player-info-' + which).fade('out');
	}
	
	oo.ringtonePlayer.classes = {
		playing: 'clown-ringtone-player-playing',
		playingHover: 'clown-ringtone-player-playing-hover',
		hover: 'clown-ringtone-player-hover'
	};
	oo.ringtonePlayer.embed('clown-ringtone-player-flash');
	
	// ringtone players
	$$('.clown-ringtone-player').addEvent('mouseenter', function() {
		if (oo.ringtonePlayer.currentlyPlaying == this.get('id')) {
			this.removeClass('clown-ringtone-player-playing');
			this.addClass('clown-ringtone-player-playing-hover');
		} else {
			this.addClass('clown-ringtone-player-hover');
		}
		showInfo(this.get('id').substring(22));
	});
	
	$$('.clown-ringtone-player').addEvent('mouseleave', function() {
		if (oo.ringtonePlayer.currentlyPlaying == this.get('id')) {
			this.removeClass('clown-ringtone-player-playing-hover');
			this.addClass('clown-ringtone-player-playing');
		} else {
			this.removeClass('clown-ringtone-player-hover');
		}
		hideInfo(this.get('id').substring(22));
	});
	
	$$('.clown-ringtone-player').addEvent('click', function() {
		if (oo.ringtonePlayer.currentlyPlaying == this.get('id')) {
			oo.ringtonePlayer.pause();
			this.removeClass('clown-ringtone-player-playing-hover');
			this.addClass('clown-ringtone-player-hover');
		} else {
			// set all others to pause
			$$('.clown-ringtone-player').removeClass('clown-ringtone-player-playing');
			oo.ringtonePlayer.play(this.retrieve('audioFile'), this.get('id'));
			this.removeClass('clown-ringtone-player-hover');
			this.addClass('clown-ringtone-player-playing-hover');
		}
	});
	
	// set up slide for the info content
	$$('.content-inner').set('slide', {}).slide('show');
	// add click events to show info when clicking an "i"
	$$('.info-link').addEvent('click', function() {
		var id = this.get('id');
		var toneType = id.substring(id.indexOf('-') + 11);
		var infoType = id.substring(0, id.indexOf('-'));
		// loop through info panes to set the z-indices
		var i = 10;
		$$('.info').each(function(item) {
			// order the panes and hide them
			item.setStyle('z-index', i).setStyle('display', 'none'); 
			i++;
		});
		// set a higher z-index to the pane to show and display it
		$(toneType + '-info-' + infoType).setStyle('z-index', i + 1).setStyle('display', 'block');
		// slide out the content pane to show the info pane underneath
		$(toneType + '-content-inner').slide('out');
		
	});
	
	// hover classes for info links
	$$('.info-link').addEvent('mouseenter', function() {
		this.addClass('info-link-hover');
	}).addEvent('mouseleave', function() {
		this.removeClass('info-link-hover');
	});
	
	// hover classes for back links
	$$('.back-link').addEvent('mouseenter', function() {
		this.addClass('back-link-hover');
	}).addEvent('mouseleave', function() {
		this.removeClass('back-link-hover');
	});
	
	$$('.back-link').addEvent('click', function() {
		var id = this.get('id');
		var toneType = id.substring(id.indexOf('-') + 11);
		$(toneType + '-content-inner').slide('in');
	});
	
	// info modal box
	$('info').addEvent('click', function() {
		this.fade(0.8, 0);
	});
	
	$('info-toggler').addEvent('click', function() {
		$('info').setStyles({display: 'block'});
		$('info').fade(0, 0.8);
		/*
		window.addEvent('resize', function() {
			$('info').setStyles({
				width:(window.getScrollSize().x),
				height:(window.getScrollSize().y)
			});
		});
		*/
	});
		
});