var AlbumMenu = new Class({
	element: [],
	options: {},
	albums: $H({}),
	visible: true,
	photoDiv: false,
	photoDivVisible: false,
	
	initialize: function(elm, options) {
		this.element = $(elm);
		this.options = options;
		
		this.createAlbums( options.albums );
		
		this.photoDiv = $(this.options.photoDiv);
		
		this.createPhotoDiv();
	},
	
	createAlbums: function( albums ) {
		// vul array
		$each( albums, function( elem ) {
			var jaar = elem["info"][1].substring(0,4);
			
			if( !$chk( this.albums[ jaar ] ) ) {
				this.albums[ jaar ] = [];
				var i = this.albums.getKeys().length-1;
				new Element('div', {'class': 'year', html: jaar, id: 'year_'+jaar, styles: {opacity: 0.3}} ).inject( this.element).store('year', jaar).addEvents( { 
					mouseenter: function() {
						this.showAlbumMenu( i );
					}.bind(this) } );
			}
			this.albums[jaar].push( elem );
		}.bind(this) );

		// positioneer divs met jaartallen en voeg albums toe
		
		var size = this.element.getSize();
		var yearDivs = this.element.getElements('.year');
		var width = size.x / yearDivs.length;
		
		$each( yearDivs, function( elem, i ) {
			var year = elem.retrieve('year');
			
			var menu = new Element( 'div', { 'class': 'yearMenu', styles: { left: (i*width).limit(0, size.x-200) }, opacity: 0, id: 'yearMenu_'+year } ).inject( this.element );
			elem.setStyles( {left: i*width});
		
			// insert albums
			$each( this.options.albums, function(a, i) {
				if( a["info"][1].substring(0,4) == year ) {
					var titel = a["info"][0];
					titel = titel.charAt(0).toUpperCase() + titel.substr(1);
					new Element('div', {html: titel, id: 'album_'+i  }).inject( menu ).setStyles( { color: '#333', width: 200,'background-color': '#000', cursor: 'pointer' }).addEvents( {
						mouseenter: function() {
							this.setStyles( { color: '#fff' } );
							this.retrieve('albumMenu').showPhoto( this.retrieve('album') );
						},
						mouseleave: function() {
							this.setStyles( { color: '#666' } );
						//	this.retrieve('albumMenu').hidePhoto();
						},
						click: function() {
							var album = this.retrieve('album');
							document.location.href = 'photos/' + album['id'] + '/';
						}
					} ).store('albumMenu', this).store( 'album', a );					
				}
			}.bind(this) )
		
		    menu.addEvent( 'mouseleave', function() { this.hidePhoto(); }.bind(this) );

		}.bind(this) );
		
//		this.element.addEvent( 'mouseleave', function() { this.hidePhoto(); }.bind(this) );
	},
	
	createPhotoDiv: function() {
		var size = this.photoDiv.getSize();

		new Element( 'div', {styles: { 'background-color': '#000', position: 'absolute', width: this.options.width, height: this.options.height, top: 0, left: ((size.x-this.options.width)/2) }, id: 'photoMouseOver' } ).inject( this.photoDiv.setStyles( {display:'none'}) );
	},
	
	showAlbumMenu: function( index ) {
		this.hideAll();
		
		this.element.getElements('.year')[index].morph( {opacity: 0.99} );
		this.element.getElements('.yearMenu')[index].morph( {opacity: 0.99} );

	},
	
	hideAll: function() {
		this.element.getElements('.year').each( function(e) {e.get('morph').cancel();} );
		this.element.getElements('.yearMenu').each( function(e) {e.get('morph').cancel();} );
		
		this.element.getElements('.year').setStyles( {opacity: 0.3} );
		this.element.getElements('.yearMenu').setStyles( {opacity: 0} );
		
		this.hidePhoto();
	},
	
	hide: function() {
		if(this.visible < 0) return;
		this.visible = -1;

		this.element.getElements('.yearMenu div').setStyles( {color:'#666'} );
		this.hideAll();
	},
	
	show: function( index ) {
		if( this.visible == index ) return;
		this.visible = index;
		
		this.hideAll();

		var album = this.options.albums[index];
		var year =  album["info"][1].substring(0,4);
		
		this.element.getElement('#yearMenu_'+year).morph(  {opacity: 0.99} );
		this.element.getElement('#year_'+year).morph(  {opacity: 0.99} );
		this.element.getElement('#album_'+index).morph(  {color: '#fff'} );
	},
	
	showPhoto: function( album ) {
		this.photoDivVisible = true;
		
		this.photoDiv.getElement('#photoMouseOver').empty().grab( new Element('img', {src: album.thumb}) );
		this.photoDiv.setStyles( { display: 'block' } ).morph( { opacity: 1 } );
		
		this.options.text.set( 'html', album.title.clean() + "<font style='font-size:50%'> / "+album.date.clean()+'</font>' ).morph( { opacity: 0.99 } );
	},
	
	hidePhoto: function() {
		if( !this.photoDivVisible) return;
		
		this.options.text.morph( { opacity: 0 } );
		
		this.photoDiv.morph( { opacity: 0 } ).get('morph').chain( function() {
			this.photoDivVisible = false;
			this.photoDiv.setStyles( { display: 'none' } );
		}.bind(this) );
	}
});


var ImageMenu = new Class({
	elements: [],
	options: {},
        item: -1,

	initialize: function(elm, options) {
		this.elements = $(elm).getElements('div');
		this.options = options;
		
		this.elements.each( function( el, i) {
			el.addEvents( {
				mouseenter: function() {
					this.show( i );
				}.bind(this),
				mouseleave: function() {
					this.hide();
				}.bind(this) 
			} );
			
			el.set( 'morph', {duration: 600} );
		}.bind(this)  );
		
		this.hide();
	},
	
	show: function(item) {
		if( this.item == item ) return;

		this.item = item;

		this.elements.each( function( el, i ) {
			var l = this.options.mWidth*i;
			l += ( i > item )?this.options.xWidth-this.options.mWidth:0;
			
			el.morph( { left: l } );
			
			if( i == item ) {
				this.showText( el.get('rel'), {'margin-left': l } );
			}
		}.bind(this) );
	},
	
	hide: function() {
		this.item = -1;
		this.options.albumMenu.hide();

		this.elements.each( function( el, i ) {
			el.morph( { left: this.options.nWidth*i } );
		}.bind(this) );
		
		this.showText( '' );
	},
	
	showText: function( str, style ) {
		if( !this.options.text ) return;
		
		this.options.text.morph( { opacity: 0 } ).get('morph').chain( function() {
			this.options.text.set('html', str );
			this.options.text.setStyles(style).morph( { opacity: 0.99 } );
                        if(this.item >= 0 ) this.options.albumMenu.show(this.elements[this.item].get('id') );
		}.bind( this ) );
	}
});