var Gallery = {
	_anchors: null,
	
	init: function( e ) {
		Event.observe( window, "unload", this.dispose.bind( this ), false );
		
		this.event_view = this.view.bindAsEventListener( this );
		
		var element = $( "gallery_list" );
		this._anchors = element.getElementsByTagName( "a" );
		for( var a = null, i = 0; null != (a = this._anchors[ i ]); i++ ) {
			a.info = this.items[ i ];
			Event.observe( a, "click", this.event_view, false );
			Event.observe( a, "mouseover", this.over, false );
			Event.observe( a, "mouseout", this.out, false );
		}
	},
	
	dispose: function( e ) {
		for( var a = null, i = 0; null != (a = this._anchors[ i ]); i++ )
			a.info = null;
	},
	
	view: function( e ) {
		var sender = Event.findElement( e, "a" );
		
		// change
		try {
			var queue = Effect.Queues.get( "view" );
			queue.each( function( e ){ e.cancel(); } );
			
			var opacity = 0.45;
			new Effect.Fade( sender, { to: opacity } );
			new Effect.Appear( sender, { from: opacity, delay: 2.5 } );
			
			var element = $( "gallery_view" );
			Element.setStyle( element, { height: "", opactiy: "" } );
			Element.hide( element );
			Element.hide( "gallery_error" );
			Element.show( "gallery_loading" );
			
			// moved to image onload event
			//var param = { queue: { scope: "view" } };
			//new Effect.BlindDown( element, param );
			//new Effect.Appear( element, param );
	
			var img = element.getElementsByTagName( "img" )[ 0 ];
			img.alt = sender.info.name;
			img.onerror = function() {
				Element.hide( "gallery_loading", "gallery_view" );
				Element.show( "gallery_error" );
			};
			img.onload = function() {
				Element.hide( "gallery_loading", "gallery_error" );
				
				var param = { queue: { scope: "view" } };
				var element = this.parentNode;
				new Effect.BlindDown( element, param );
				new Effect.Appear( element, param );
			};
			img.src = sender.info.image;
			
			this.render( sender );
		} catch( ex ) {
			var m = "";
			for(var p in ex)
				if(typeof ex[p] != "function")m += p + ": " + ex[p] + "\n";
			if(m)alert(m);
		}
		
		// log
		setTimeout( function(){ try {
			var href = sender.href;
			if( href && typeof urchinTracker == "function" )
				urchinTracker( href );
		} catch( ex ) { } }, 20 );
		
		// prevent
		Event.stop( e );
	},
	
	over: function( e ) {
		var sender = Event.findElement( e, "a" );
		window.status = "View image '" + sender.info.name + "'";
		Event.stop( e );
		return true;
	},
	
	out: function( e ) {
		window.status = "";
	},
	
	render: function( sender ) {
		var info = sender.info;
		$("gallery_name").innerHTML = info.name;
		$("gallery_description").innerHTML = info.description.replace( /\n/g, " <br />\n" );
		
		if( info.size && info.medium )
			this.renderPainting( sender );
		
		this.renderPortfolio( sender );
	},
	
	renderPainting: function( sender ) {
		var el, info = sender.info;
		if( info.size && (el = $("gallery_size")) ) el.innerHTML = info.size;
		if( info.medium && (el = $("gallery_medium")) ) el.innerHTML = info.medium;
		if( info.price && (el = $("gallery_price")) ) el.innerHTML = info.price;
	},
	
	renderPortfolio: function( sender ) {
		var a = $( "gallery_website" ), info = sender.info;
		if( a ) {
			if( info.website ) {
				Element.show( a.parentNode );
				a.href = info.website;
				a.update( "View the " +  info.name + " website" );
			} else {
				Element.hide( a.parentNode );
			}
		}
	},
	
	items: null
};