/* 	media.album
*	Nice album display
*
*	
*										*/

MediaAlbum = function( action, vars, objid )	{
	
	Object.extend( obj = ( objid )? $$( '.MediaAlbum' ).pop().down( '.' + action + '[ref="'+ objid +'"]' ) : $$( '.MediaAlbum.' + action ).pop(), MediaAlbum.prototype );
	Object.extend( obj, MediaAlbum[ "proto_" + action ] );

	obj.objid	= objid;
	obj.vars	= vars;
	
	return obj.init( vars );
}

// GENERAL PROTOS
MediaAlbum.prototype = {

	init		: function( vars ) {
	
		return this;
	}

};

// ACTION SPECIFIC OVERWRITES

// ACTION: Album.
MediaAlbum.proto_album = {

	init		: function( vars ) {
		
		this.current 	= -1;
		this.observe('click', function() {

			if( this.vars.album.link )
				window.location = this.vars.album.link + "?id=" + this.objid;
			else
				this.focus_target();
		});

		this.effect();
		
		return this;
	},
	
	effect		: function() {

		src = '/public.img?sze=' + this.vars.album.size + '&id='+ this.vars.media[ ++this.current ];
		if( this.vars.album.unt ) src += '&unt=' + this.vars.album.unt; 

		this.down( ".thumb" ).update(
			this.img = new Element('img', { src: src, 'style':'opacity:0;' }).observe('load', this.finish.bind( this ))
		);
		
		if( this.current >= this.vars.media.length-1 ) this.current = -1;
	},
	
	effect_out	: function() {
		this.img.fade({ duration: this.vars.album.fade * 0.5 });
	},
	
	finish		: function() {

		this.img.appear({ duration: this.vars.album.fade });
		if( this.vars.media.length > 1 ) {
			
			setTimeout( this.effect_out.bind( this ), this.vars.album.interval );
			setTimeout( this.effect.bind( this ), this.vars.album.interval + 800 );
		}
	}

};

// ACTION: Target.
MediaAlbum.proto_target = {

	ah			: 0,
	current		: 0,

	init		: function( vars ) {
		
		this.img = this.down( ".cont" );
		
		if( this.vars.album.navtype && this.vars.media.length > 1 ) {
			Object.extend( this, this.navtypes[ this.vars.album.navtype ] );
			this.init_nav();
		}
		
		this.size = this.vars.album.size.split( "." );
		this.setStyle({ width: this.size[0] + "px" });
		
		this.load();
		
		return this;
	},
	
	load		: function( n ) {

		this.current = ( typeof n == "number" )?  
			(( n >= 0 )? n : this.current + n ) : this.current;
			
		if( this.current < 0 ) this.current = this.vars.media.length + this.current;
		
		
		src = '/public.img?sze=' + this.vars.album.size + '&id='+ this.vars.media[ this.current++ ];
		if( this.vars.album.unt ) src += '&unt=' + this.vars.album.unt; 

		this.img.observe('load', this.finish.bind( this )).src = src;
		
		if( this.current >= this.vars.media.length ) this.current = 0;
		
		this.fire( "MediaAlbum:display" );

	},
	
	finish		: function() {
		this.calcheight();
		this.setStyle({ backgroundImage : "url( " + this.img.src + " )" });
	},
	
	calcheight	: function() {
		mh = this.getHeight();
		ih = this.img.getHeight();
		
		if( this.ah < ih ) {
			this.ah = ih;
			this.setStyle({ height: ih + "px" });
		}
		
	},
	
//	The target navigation types
	navtypes	: {
		
		hover	: {
			
			init_nav	: function() {
				
				this.down( ".right" ).observe( "click", this.load.bind( this ));
				this.down( ".left" ).observe( "click", this.load.bind( this, -2 ));
			}		
		},
		classic	: {
			
			init_nav	: function() {
				
				this.down( ".right" ).observe( "click", this.load.bind( this ));
				this.down( ".left" ).observe( "click", this.load.bind( this, -2 ));
				
				//this.insert( new Element( "div", { "class":"count" }).update( "loading" ).observe( "click", this.load.bind( this )));
				
			}		
		}

	}

};

// ACTION: Slide.
MediaAlbum.proto_slide = {

	ah			: 0,
	current		: 0,

	init		: function( vars ) {
		
		this.prev = 0;
		this.ref 	= $( vars.album.anchor );
		this.body	= this.down( ".in" );
		this.width	= Number( this.vars.album.size.split( "." ).shift());
		this.offs 	= Math.round( (this.getWidth() - this.width ) *0.5 );
		this.src	= "/public.img?unt=1&sze=" + this.vars.album.size + "&id=";
		
		if( this.ref.vars.media.length > this.getWidth()/this.width )
			this.body.setStyle({ width: this.ref.vars.media.length * this.width + "px"});
		
		this.ref.vars.media.each( this.seed, this );
		//var fx = new Effect.Move( this.body, { x: this.offs, mode: 'relative' });
		this.body.firstChild.setOpacity( .24 );
		this.body.setStyle({ left: this.offs + "px" });
		
		document.observe( "MediaAlbum:display",	this.trace.bind( this ));
		
		
		//this.prev = -1;
		
		//
		this.down( ".left" ).observe( "click",	this.shuffle.bind( this, -1 ));
		this.down( ".right" ).observe( "click",	this.shuffle.bind( this, 1 ));
		//this.trace( 1 );
		
		//if( this.vars.album.extend_thumbs ) this.extend_thumb();
		
		
		return this;
	},
	
	seed		: function( n, i ) {

		this.body.insert( new Element( "img", { src: this.src + n, alt: "" }).observe( "click", this.ref.load.bind( this.ref, i )));
	},
	
	calcpos	: function( n ) {
		pos = (this.body.getStyle( "left" ))? Number( this.body.getStyle( "left" ).split( "px" ).shift()) : 0;
		
		//cur = -50 (img 5), next = img 7 ( = -70 ) cur + (5-7)*10
		
		return this.offs + this.width * -( n-1 );
	},
	
	shuffle	: function( n ) {
		
		cur = this.ref.current + n -1;
		if( cur <= 0 ) cur = this.ref.vars.media.length - 1;
		else if( cur == this.ref.vars.media.length ) cur = 0; 
		
		//this.ref.current = cur;
		
		this.ref.load( cur );
		
		//main	= ( this.prev + n < 0 )? this.ref.vars.media.length -1 : ( this.prev + n == this.ref.vars.media.length )? 0 : this.prev + n;
		//left	= ( !main )? this.ref.vars.media.length - 1 : main - 1 ;
		//right	= ( main + 1 == this.ref.vars.media.length )? 0 : main + 1;
		
		//this.pos( left, main, right, (n+1) );
	},
	
	trace	: function( e ) {
		
		n = ( this.ref.current + 1 == this.ref.vars.media.length )? 0 : this.ref.current -1;
		this.body.setStyle({ left: this.calcpos( this.ref.current ) + "px" });
		
		childs = this.body.select( "img" );
		childs.invoke( "setOpacity", 1 );
		this.body.childNodes[ n ].setOpacity( .24 );
		//console.log( n )
		
		//var fx = new Effect.Move( this.body, { x: this.calcpos( this.ref.current ), mode: 'relative' });
		
		//childs = this.body.select( "img" );
		
		//n = ( this.ref.current + 1 == this.ref.vars.media.length )? 0 : this.ref.current -1;
		//childs.invoke( "setOpacity", 1 );
		//this.body.childNodes[ n ].setOpacity( .24 );
		
		
		//this.left_or_right( n );

		
		/*left	= (( !(this.ref.current-1) )? this.ref.vars.media.length : this.ref.current ) - 2;
		main	= ( this.ref.current + 1 == this.ref.vars.media.length )? 0 : this.ref.current -1;
		right	= this.ref.current;

		this.pos( left, main, right );*/
	},

	
	pos		: function( left, main, rght, up ) {
		
		if( typeof up == "undefined" ) up = ( this.prev < main );
		if( this.prev > -1 ) fx.cancel();
		
		this.down( ".in" ).setStyle({ left: up? "34px" : "-110px" });
		
		src = "/public.img?unt=1&sze=" + this.vars.album.size + "&id=";
		
		this.down( ".in" ).update( new Element( "img", { src: src + this.ref.vars.media[ left ], alt: "" }).observe( "click", this.ref.load.bind( this.ref, left )));
		this.down( ".in" ).insert( new Element( "img", { src: src + this.ref.vars.media[ main ], alt: "" }).observe( "click", this.ref.load.bind( this.ref, main )));
		this.down( ".in" ).insert( new Element( "img", { src: src + this.ref.vars.media[ rght ], alt: "" }).observe( "click", this.ref.load.bind( this.ref, rght )));
		
		fx = new Effect.Move( this.down( ".in" ) , { x: up? -72:72, mode: 'relative' });
		this.prev = main;
		
		this.info( main + 1 );
	},
	
	info	: function( n ){
		
		this.down( ".info" ).update( new Element( "span", { "class": "stat" }).update( n ));
	},
	
	extend_thumb	: function() {
		
		this.insert({ after: this.thumb = new Element( "span", { "class": "MediaAlbum thumbs" })});
		this.thumb.setStyle({ height: (this.vars.album.extend_thumbs * 28) + "px" });
		
		this.thumb.src	= "/public.img?unt=1&sze=" + this.vars.album.thumbsize + "&id=";
		this.int		= Math.floor(( this.vars.album.extend_thumbs - 1 ) *0.5 );
		
		document.observe( "MediaAlbum:display",	this.thumbs.bind( this ));
		this.thumbs();
	},
	
	thumbs	: function() {
		
		this.thumb.update();
		
		for( n = - this.int; n < this.vars.album.extend_thumbs - this.int; n++ ) {
			
			id = ( this.ref.current -1 + n > this.ref.vars.media.length )? this.ref.current + n - this.ref.vars.media.length : ( this.ref.current -1 + n < 0 )? this.ref.vars.media.length + this.ref.current -1 + n : this.ref.current -1 + n;
			this.thumb.insert(
				new Element( "img", { src: this.thumb.src + this.ref.vars.media[ id ], alt: "" }).observe( "click", this.ref.load.bind( this.ref, id ))
			);
		}
		
		if( this.thumb.down( ".active" ))
			this.thumb.down( ".active" ).removeClassName( "active" );
		
		this.thumb.select( "img" )[ this.int ].addClassName( "active" )
		
	}
};

// ACTION: Snake.
MediaAlbum.proto_snake = {

	ah			: 0,
	current		: 0,

	init		: function( vars ) {
		
		this.ref	= $( vars.album.anchor );
		this.prev	= -1;
		this.src	= "/public.img?unt=1&sze=" + this.vars.album.size + "&id="; 
		this.width	= Number( this.vars.album.size.split( "." ).shift());
		this.body	= this.down( ".in" );
		
		this.setStyle({ width : this.ref.size[0] + "px" });
		
		this.ref.vars.media.each( this.seed, this );
		
		if( this.ref.vars.media.length > (this.getWidth() *0.92)/this.width )
			this.body.setStyle({ width: this.ref.vars.media.length * this.width + "px"});
		
		document.observe( "MediaAlbum:display",	this.pos.bind( this ));
		this.body.firstChild.setOpacity( .24 );
		this.down( ".left" ).observe( "click",	this.left_or_right.bind( this, 0 ));
		this.down( ".right").observe( "click",	this.left_or_right.bind( this, this.ref.vars.media.length ));

		return this;
	},
	
	seed		: function( n, i ) {

		this.body.insert( new Element( "img", { src: this.src + n, alt: "" }).observe( "click", this.ref.load.bind( this.ref, i )));
	},
		
	pos		: function( e ) {
		
		childs = this.body.select( "img" );
		
		n = ( this.ref.current + 1 == this.ref.vars.media.length )? 0 : this.ref.current -1;
		childs.invoke( "setOpacity", 1 );
		this.body.childNodes[ n ].setOpacity( .24 );
		
		//Contemporary solution:
		this.left_or_right( n );
		
	},
	
	left_or_right	: function( n ) {
		this.body.setStyle({ left: (( n < Math.round( this.ref.vars.media.length/2 ))? 0 : this.getWidth() - this.body.getWidth()*1.04 ) + "px" });
	}

};