$(document).addEvent('domready', function () {
	
	if (!$('hdr') || !$('hdr-content')) {
		return;
	}
	var div = function (c) {
		return new Element('div', {'class':c});
	}
	var hide = !$('hdr-dir-page-content')
	
	var DirectoryPage = new Class({
	    Implements: Options,

		options: {
			'id':null,
			'hasBack':false,
			'type':'directory',
			'breadcrumbs':null,
			'previous':null
		},
		
		contentEl: null,
		dataLoaded: false,

		initialize: function (options) {
			this.setOptions(options);
			if (!this.options.id) {
				throw 'No ID';
			}
			var el = div('hdr-dir-page');

			//////////////////////////////for initial release
			

			if (this.options.type) {
				//alert(this.options.type);
				el.addClass('hdr-dir-page-t-' + this.options.type);
			} else {
				el.addClass('hdr-dir-page-t-directory');
			}

			var ibg = div('hdr-dir-page-icon-bg').inject(el);
			div('hdr-dir-page-icon').setStyle('background-image','url("/a/img/dir/icons-large/' + this.options.type +'.png")').inject(el);

			this.contentEl = div('hdr-dir-page-content').inject(el);
		

			t = $extend(el, this);


			if (this.options.hasBack) {
				var back = new Element('a', {'class':'hdr-dir-page-back','href':'#dir-back'}).inject(el);
				back.addEvent('click', function (e) {
					if (e) {e.preventDefault();}				
					this.fireEvent('dir-back', [this, this.options.previous]);
				}.bindWithEvent(t));
			}
			

			if (!this.dataLoaded) {
				new Request.JSON({url:'/directory/get/' + this.options.id +'/' + this.options.type + '.json','onSuccess':this.onData.bind(t)}).get();
			}

			return t;
		},

		onData: function (d) {
			this.dataLoaded = true;

			div('hdr-dir-page-title-c').set('text', d.title||'(No Title)').inject(div('hdr-dir-page-title-b').inject(div('hdr-dir-page-title-a').inject(this)));
			if (d.breadcrumbs) {
				div('hdr-dir-page-breadcrumbs').set('html', d.breadcrumbs).inject(this);
			}
			// pass in o[itemInfo]
			if (d.itemInfo) {
				
				var ss = div('hdr-dir-page-item-ss').inject(this.contentEl);
				var ds = div('hdr-dir-page-item-ds').inject(ss);
				var ac = new Element('a', {'class':'hdr-dir-page-item-ss-link', 'href':d.itemInfo.url, 'alt':'albumCover'}).inject(ds);
				var ii = div('hdr-dir-page-item-info').inject(this.contentEl);
				
				var img = new Element('img', {'src':d.itemInfo.imageURL}).inject(ac);
				img.setStyle('margin-left','22px');
				img.setStyle('margin-top','5px');
				img.setStyle('height','80px');
				img.setStyle('width','80px');
				
				div('hdr-dir-page-item-album').set('text', d.itemInfo.albumName).inject(ii);
				div('hdr-dir-page-item-year').set('html', '© ' + d.itemInfo.artistCopyYear + ' ').inject(ii);
			
				div('hdr-dir-page-item-copy').set('text',  d.itemInfo.artistCompany).inject(ii);
				var rw = div('hdr-dir-page-item-rating-w').inject(ii);
				
				div('hdr-dir-page-item-rating').set('text', 'Rating:').inject(rw);
				div('hdr-dir-page-item-rating-stars item-rating item-rating-' + d.itemInfo.rating).inject(rw);

				//div('hdr-dir-page-item-desc').set('text', d.itemInfo.description).inject(ii);
				new Element('a', {'class':'hdr-dir-page-item-url', 'href':d.itemInfo.url, 'alt':'Go'}).inject(ii);
			//pass in o[items]
			} else if (d.items) {
				var items = d.items;
			
				for (var i = 0; i < items.length; i++) {
					var item = items[i];
					var a = new Element('a', {'class':'hdr-dir-page-list-item', 'href':'#dir-next'}).set('text', item.title).inject(this.contentEl);
					if ((!this.options.type || this.options.type == 'directory') && item['type']) {
						//div('hdr-dir-page-list-item-icon').setStyle('background-image', 'url(\'/a/img/dir/icons-small/' + (item.type||'none') + '.png\')').inject(a);
					}
					a.addEvent('click', function (e) {
						if (e) {e.preventDefault();}
						item = this[1];

						item['hasBack'] = true;
						item['previous'] = this[0];

						if (!item['page']) {
							var nextPage = new DirectoryPage(item);
							item['page'] = nextPage
						}
						
						this[0].fireEvent('dir-open-next', [this[0], item['page']])

					}.bindWithEvent([this, item]));
				}
			}
		}

	});

	var hdrDir = new Element('div', {'id':'hdr-dir'}).set('html', '<div id="hdr-dir-content"><div id="hdr-dir-hdr"><a id="hdr-dir-dir" href="#dir-dir"><img src="/a/img/l10n/en/hdr-dir-dir.png" alt="Directory" /></a><a id="hdr-dir-closer" href="#dir-close"><div class="text">Close</div><div class="icon"></div></a></div><div id="hdr-dir-viewport"></div><div class="hdr-dir-viewport-corner" id="hdr-dir-viewport-corner-bot-left"></div><div class="hdr-dir-viewport-corner" id="hdr-dir-viewport-corner-bot-right"></div></div>');
	hdrDir.inject($('hdr'), 'after');

	var viewport = $('hdr-dir-viewport');
	var rootPage = null;
	var currentPage = null;

	$('hdr-dir-dir').addEvent('click', function (e) {
		if (e) {e.preventDefault();}
		if (currentPage && currentPage != rootPage) {
			goBack(currentPage, rootPage);
		}
	}.bindWithEvent());

	var dirOpener = $('hdr-dir-opener') || new Element('a', {'id':'hdr-dir-opener','href':'#dir-open'}).inject($('hdr-content'));
	var dirCloser = $('hdr-dir-closer')

	var hideScrollbars = function (els, x) {
		els.each(function (el) {
			el.getElement('.hdr-dir-page-content').setStyle('overflow-y', x);
		});
								
	};



	var goBack = function (current, prev) {
		var fx =new Fx.Elements([current, prev], {'unit':'%'});
		fx.addEvent('start', function (e) { hideScrollbars([current, prev], 'hidden'); });
		fx.addEvent('complete', function (e) { hideScrollbars([current, prev], 'auto'); });
		fx.start({
			'0':{'left':[0,100]},
			'1':{'left':[-100,0]}
		});
		currentPage = prev;
	};
	
	var goNext = function (current, next) {
		if (!next.isListeningToBackNext) {
			next.addEvent('dir-back', goBack);
			next.addEvent('dir-open-next', goNext);
			next.isListeningToBackNext = true;
		}

		next.setStyle('left', '100%');
		next.inject(viewport);

		var fx =new Fx.Elements([current, next], {'unit':'%'});
		fx.addEvent('start', function (e) { hideScrollbars([current, next], 'hidden'); });
		fx.addEvent('complete', function (e) { hideScrollbars([current, next], 'auto'); });
		fx.start({
			'0':{'left':[0,-100]},
			'1':{'left':[100,0]}
		});

		currentPage = next;
	};

	
	var openDirectory = function (e) {
		if (e) {e.preventDefault();}

		dirOpener.removeEvent('click', openDirectory);
		dirOpener.addEvent('click', closeDirectory);

		if (!rootPage) {
			rootPage = new DirectoryPage({'id':1});

			rootPage.inject(viewport);

			rootPage.addEvent('dir-open-next', goNext);
		}

		var fx =new Fx.Elements([$('hdr-dir')]);
		fx.start({
			'0':{'height':[0,155],'padding-top':[0,14]}
		});

	}.bindWithEvent();

	var closeDirectory = function (e) {
		if (e) {e.preventDefault();}

		dirOpener.removeEvent('click', closeDirectory);
		dirOpener.addEvent('click', openDirectory);
		

		
		var fx =new Fx.Elements([$('hdr-dir')], {'duration':'short'});
		fx.start({
			'0':{'height':[159,0],'padding-top':[14,0], 'overflow':'hidden'}
		});
		

	}.bindWithEvent();


	dirOpener.setStyle('display', 'block');
	dirOpener.addEvent('click', openDirectory);
	dirCloser.addEvent('click', closeDirectory);
});