gtree.album = Class.create(
{
	//---------------------------------------------------------------------
	// function:	initialize
	//	desc:			class constructor
	//---------------------------------------------------------------------
	initialize : function (parameters)
	{
		this._parameters = Object.extend(parameters, {
			'leftTileHeight'		: 100,
			'leftTilePadding'		: 20,
			'leftTilePageSize'	: 3,
			'initialId'				: '1'
		});

		this._elements = {};
		this.currentMenuPage = 1;
		this.render();
		this.currentShownId  = this._parameters.initialId;
		this.effects			= new Hash();
	},

	//---------------------------------------------------------------------
	// function:	render
	//	desc:			draw album object
	//---------------------------------------------------------------------
	render : function ()
	{
		var e = this._elements;

		e.mainDiv	= new Element('div').setParent($(this._parameters.container));
		e.leftDiv	= new Element('div', {'class' : 'gt_al_leftdiv'}).setParent(e.mainDiv);
		e.rightDiv	= new Element('div', {'class' : 'gt_al_rightdiv'}).setParent(e.mainDiv);

		this.renderLeftMenu();
		this.renderRightContent();

		$('gt_al_album_' + this._parameters.initialId).style.display = '';
	},

	//---------------------------------------------------------------------
	// function:	renderRightContent
	//	desc:			draw album object
	//---------------------------------------------------------------------
	renderRightContent : function ()
	{
		var e		= this._elements;
		var p		= this._parameters;

		var div	= new Element('div').setParent(e.rightDiv);
	
		p.items.each( function(item)
		{
			var albumDiv	= new Element('div', {'class' : 'gt_al_album_container', 'id' : 'gt_al_album_'+item.id}).setParent(div);
			var imgDiv		= new Element('div', {'class' : 'gt_al_album_img_div'}).setParent(albumDiv);
			var descDiv		= new Element('div', {'class' : 'gt_al_album_desc_div'}).setParent(albumDiv);

			var img 			= new Element('img', {'src' : item.image}).setParent(imgDiv);
			img.style.height	= '340px';
			img.style.width	= '340px';
			
			var titleSpan	= new Element('div', {'class' : 'gt_al_album_title'}).setParent(descDiv).update(item.title + " - " + item.artist );
			//var descSpan	= new Element('div', {'class' : 'gt_al_album_desc'}).setParent(descDiv).update(item.desc);

			var tracksDiv 	= new Element('div', {'class' : 'gt_al_album_tracks'}).setParent(descDiv);

			var trackNum = 1;

			item.tracks.each(function (track)
			{
				var trkDiv = new Element('div', {'class' : 'gt_al_album_track'}).setParent(tracksDiv);
				var span = new Element('span', {'class' : 'gt_al_album_track'}).setParent(trkDiv).update(trackNum + ". " + track.name);

				if (!Object.isUndefined(track.sampleLink))
				{
					var link = new Element('div', {'class' : 'gt_al_sample_link'}).setParent(tracksDiv);
					Event.observe(link, 'click', function(){ window.location = track.sampleLink });
					Event.observe(link, 'click', function () { pageTracker._trackPageview(track.sampleLink); } );
				}

				new Element('br').setParent(tracksDiv);
				new Element('div', {'class' : 'clear'}).setParent(tracksDiv);
				trackNum++;
			});

			albumDiv.style.display = 'none';
		});	
	},

	//---------------------------------------------------------------------
	// function:	renderLeftMenu
	//	desc:			draw the left menu
	//---------------------------------------------------------------------
	renderLeftMenu : function ()
	{	
		var e			= this._elements;
		var p			= this._parameters;
		var thisObj	= this;

		if (p.items.length > p.pageSize)
		{
			e.topArrow = new Element('div', {'class' : 'gt_al_slider_menu_nav'}).setParent(e.leftDiv);
			Event.observe(e.topArrow, 'click', this.slideMenu.bind(this, 'U'));
		}

		var smc	= e.sliderMenuContainer = new Element('div', {'class' : 'gt_al_slider_menu_container'}).setParent(e.leftDiv);
		smc.style.height = ( p.leftTileHeight + p.leftTilePadding ) * p.leftTilePageSize;

		e.menuSlider = new Element('div').setParent(smc);

		p.items.each (function (item)
		{
			var itemDiv	= new Element('div', {'class' : 'gt_al_slider_menu_item'}).setParent(e.menuSlider);
			var img		= new Element('img', {'class' : 'gt_al_slider_menu_img', 'id' : 'gt_al_img_'+item.id}).setParent(itemDiv);
			img.src		= item.thumbnail;
			img.style.height	= '80px';
			img.style.width	= '80px';

			Event.observe(img, 'click', thisObj.showAlbum.bind(thisObj, item.id));
			Event.observe(img, 'mouseover', (thisObj.menuItemHover.bind(thisObj, item.id, 'over')));
			Event.observe(img, 'mouseout',  (thisObj.menuItemHover.bind(thisObj, item.id, 'out')));
		});

		if (p.items.length > p.pageSize)
		{
			e.bottomArrow = new Element('div', {'class' : 'gt_al_slider_menu_nav'}).setParent(e.leftDiv);
			Event.observe(e.bottomArrow, 'click', this.slideMenu.bind(this, 'D'));
		}
	},

	//---------------------------------------------------------------------
	// function:	menuItemHover
	//	desc:			react to mouseover/out on menu item
	//---------------------------------------------------------------------
	menuItemHover : function (id, state)
	{
		if (!Object.isUndefined(this.effects.get(id)))
		{
			this.effects.get(id).cancel();
		}

		var effect;

		if (state == 'over')
		{
			effect = new Effect.Morph($('gt_al_img_'+id), { 'style' : 'borderColor:#DDD' });
			//console.log(effect);
		}
		else
			effect = new Effect.Morph($('gt_al_img_'+id), { 'style' : 'borderWidth:#FFF' });

		this.effects.set(id, effect);
	},

	//---------------------------------------------------------------------
	// function:	showAlbum
	//	desc:			show an album
	//---------------------------------------------------------------------
	showAlbum : function (id)
	{
		if (id == this.currentShownId) return;

		Effect.Fade  ($('gt_al_album_'+this.currentShownId));
		Effect.Appear($('gt_al_album_'+id));
		this.currentShownId = id;
	},

	//---------------------------------------------------------------------
	// function:	slideMenu
	//	desc:			move the menu up and down
	//---------------------------------------------------------------------
	slideMenu : function (direction)
	{
		var p				= this._parameters;
		var e				= this._elements;
		var menuOffset = ( p.leftTileHeight + p.leftTilePadding ) * p.leftTilePageSize;

		if (direction == 'D')
		{
			new Effect.Move(e.menuSlider, { 'x' : 0, 'y' : -menuOffset, 'mode' : 'relative', 'duration' : .7 });
		}
		else
		{
			new Effect.Move(e.menuSlider, { 'x' : 0, 'y' : menuOffset, 'mode' : 'relative' , 'duration' : .7});
		}
	}
});