if (typeof(SC) == "undefined") { SC = {}; }

SC.container.Base = Class.create();
Object.extend(SC.container.Base.prototype, Event.Listener);
Object.extend(SC.container.Base.prototype, Event.Publisher);
Object.extend(SC.container.Base.prototype, {
	
	options: $H({
		css_container: "container",
		css_header: "header",
		css_body: "body",
		css_footer: "footer",
		style_container: "display:none",
		style_header: "",
		style_body: "",
		style_footer: "",
                id: "prueba"
	}),
	
	container: null,
	header: null,
	body: null,
	footer: null,
	
	resizeMonitor: null,
	
	initialize: function(options) {
		if ( options ) this.options = this.options.merge(options);
		
		this.create();
		//this.setupResize();
	},
	
	create: function(){
		if ( !this.container ){
			this.container = new Element('div',{'id':this.options.get('id'),'class':this.options.get('css_container'),'style':this.options.get('style_container')});
			
			var tpl_content = new Template("<div class=\"#{css_header}\" style=\"#{style_header}\"></div>" +
				  			   		   "<div class=\"#{css_body}\" style=\"#{style_body}\"></div>" +
				  			   		   "<div class=\"#{css_footer}\" style=\"#{style_footer}\"></div>");
			this.container.update( tpl_content.evaluate(this.options) );
			
			this.header = this.container.down( "div." + this.options.get('css_header') );
			this.body = this.container.down( "div." + this.options.get('css_body') );
			this.footer = this.container.down( "div." + this.options.get('css_footer') );
		}
	},
	
	getElement: function(){
		return this.container;
	},
	
	mergeOptions: function(options1,options2){
		this.options = this.options.merge(options1);
		if (options2) this.options = this.options.merge(options2);
	},
	
	setHeader: function(html){
		if ( this.header ){
			this.header.update( html );
		}
	},
	
	appendToHeader: function(html){
		if ( this.header ){
			this.header.insert( html );
		}
	},
	
	styleToHeader: function(style){
		if ( this.header ){
			this.header.writeAttribute("style",style);
		}
	},
	
	getHeader: function(){
		return this.header;
	},
	
	sizeToHeader: function(width,height){
		this.header.style.width = width + "px";
		this.header.style.height = height + "px";
	},	
	
	setBody: function(html){
		if ( this.body ){
			this.body.update( html );
		}
	},

	appendToBody: function(html){
		if ( this.body ){
			this.body.insert( html );
		}
	},
	
	styleToBody: function(style){
		if ( this.body ){
			this.body.writeAttribute("style",style);
		}
	},	
	
	getBody: function(){
		return this.body;
	},
	
	sizeToBody: function(width,height){
		this.body.style.width = width + "px";
		this.body.style.height = height + "px";
	},
	
	getBodyHeight: function(){
		return this.getBody().getHeight();
	},
	
	setFooter: function(html){
		if ( this.footer ){
			this.footer.update( html );
		}
	},
	
	appendToFooter: function(html){
		if ( this.footer ){
			this.footer.insert( html );
		}
	},	
	
	styleToFooter: function(style){
		if ( this.footer ){
			this.footer.writeAttribute("style",style);
		}
	},		
	
	getFooter: function(){
		return this.footer;
	},
	
	sizeToFooter: function(width,height){
		this.footer.style.width = width + "px";
		this.footer.style.height = height + "px";
	},		
	
	scroll: function(){
		this.container.style.overflow = "auto";
	},
	
	size: function(width,height){
		if ( width ) this.setWidth( width );
		if ( height ) this.setHeight( height );
	},
	
	margin: function(top,right,bottom,left){
		if (!top) top = 0;
		if (!right) right = 0;
		if (!bottom) bottom = 0;
		if (!left) left = 0;
		this.container.style.margin = top + "px " + right + "px " + bottom + "px " + left + "px";
	},
	
	padding: function(top,right,bottom,left){
		if (!top) top = 0;
		if (!right) right = 0;
		if (!bottom) bottom = 0;
		if (!left) left = 0;
		this.container.style.padding = top + "px " + right + "px " + bottom + "px " + left + "px";		
	},
	
	setWidth: function(width){
		if (width) {
			this.container.style.width = width + "px";
			this.body.style.width = width + "px";
		}
	},
	
	setHeight: function(height){
		if ( height ) {
			this.container.style.height = height + "px";
			this.body.style.height = height + "px";
		}
	},
	
	setStyle: function(style){
		this.container.writeAttribute('style',style);
	},
	
	getStyle: function(){
		this.container.readAttribute('style');
	},
	/*
	 * 
	 * @param {Object} element: referencia en donde se debe insertar el elemento
	 * @param {Object} kinship_with: parentesco con element. 
	 * Sus valores pueden ser 'parent' o 'sibling'. Por defecto es "parent".
	 */
	render: function(element, kinship_with){
		if ( !kinship_with ) kinship_with = SC.constant.kinship.PARENT;
		
		switch( kinship_with ){
			case SC.constant.kinship.PARENT:
				element.insert( this.container );
			break;
			case SC.constant.kinship.SIBLING:
				element.insert( { after: this.container } );
			break;
			case SC.constant.kinship.SIBLING_LEFT:
				element.insert( { before: this.container } );
			break;
			case SC.constant.kinship.SIBLING_RIGHT:
				element.insert( { after: this.container } );
			break;			
		}
		
		/*if ( kinship_with == SC.constant.kinship.PARENT ) {
			element.insert( this.container );
		}else if( kinship_with == SC.constant.kinship.SIBLING ){
			element.insert( { after: this.container } );
		}*/
		
		/* insertar en el body si el elemento no fue especificado */
		if ( !element ){
			$(document.body).insert( this.container );
		}
	},
	
	show: function(){
		this.container.show();
	},
	
	hide: function(){
		this.container.hide();
	},
	
	setupResize: function(){
		var self = this;
		this.resizeMonitor = new PeriodicalExecuter(function(){
			self.resize();
		}, 1); 
	},
	
	resize: function(){
		var parent = this.container.ancestors()[0];
		this.size( parent.getWidth(),parent.getHeight() );
	}

});

SC.container.Multiple = Class.create(SC.container.Base, {

	defaults: function(){
		this.multi_options = $H({
			style_header: '',
			style_body: 'position: relative; /*border:1px solid blue;*/',
			style_footer: '',
			style_container: 'display:none'
		});	
		
		this.content_options = $H({
			style: 'position:absolute; top:0; left:0; /*border:1px solid red;*/',
			css: 'content',
			width: 0,
			height: 0,
			resize_direction: "horizontal"
		});
		
		this.child_options = $H({
			style: 'float:left;',
			css: 'child',
			width: 0, 
			height: 0,
			margin: {top: 0, right: 0, bottom: 0, left:0 },
			padding: {top: 0, right: 0, bottom: 0, left:0 }
		});
		
		/* SC.Container intances */
		this.containers = new Array();
		this.content = null;
		this.parent_element = null;
		this.has_overflow = false;
	},
	
	initialize: function($super,parent_element,options){
		//if ( options ) this.multi_options = this.multi_options.merge(options);
		this.defaults();
		this.mergeOptions( this.multi_options, options );	
		
		$super( this.options );
		this.parent_element = parent_element;
	},
	
	create: function($super){
		this.options.set('style_body', this.options.get('style_body') ); 
				
		$super();
		
		this.content = new Element('div',{'class':this.content_options.get('css'),'style':this.content_options.get('style')});
		this.setBody( this.content );
		this.add_clearing();
	},
	/*
	 * 
	 * @param {Object} html
	 * @return {index,element} - index: indice del arreglo, element: nuevo contenedor
	 */
	add: function( html, position ){
		var container = new SC.container.Base();
		container.setStyle( this.child_options.get('style') );
		this.configChild(container);
		container.setBody( html );

		if ( !position ) {
			position = this.containers.length;
		}
		
		if ( this.containers[position] ){
			this.containers.splice( position,0,container );
		}else{
			this.containers[ position ] = container;
		}
		
		this.renderContainer( position );
		this.resizeContent();
		
		return {index: position, 
				element: container};
	},
	
	get: function( index ){
		var container = this.containers[index];
		if ( container ) {
			return container;
		}else{
			return null;
		}
	},
	
	renderContainer: function(index){
		this.remove_clearing();
		
		if ( this.get(index - 1) ){
			this.get(index).render( this.get(index - 1).getElement(), SC.constant.kinship.SIBLING_RIGHT );
		}else if( this.get(index + 1) ){
			this.get(index).render( this.get(index + 1).getElement(), SC.constant.kinship.SIBLING_LEFT );
		}else{
			this.get(index).render( this.content, SC.constant.kinship.PARENT );
		}
		
		this.add_clearing();
		this.showContainer(index);
	},

	showContainer: function( index ){
		this.get(index).show();
	},	

	add_clearing: function(){
		this.content.insert( new Element('div',{'class':'clear','style':'clear:both'}) );
	},

	remove_clearing: function(){
		this.content.down('div.clear').remove();
	},
	
	render: function($super){
		$super(this.parent_element);
	},
	
	setSizeToChild: function(width,height){
		this.child_options.set('width',width);
		this.child_options.set('height',height);
	},
	
	setMarginToChild: function(top,right,bottom,left){
		if (!top) top = 0;
		if (!right) right = 0;
		if (!bottom) bottom = 0;
		if (!left) left = 0;		
		this.child_options.get('margin').top = top;
		this.child_options.get('margin').right = right;
		this.child_options.get('margin').bottom = bottom;
		this.child_options.get('margin').left = left;
	},
	
	getMarginChild: function(){
		return this.child_options.get('margin');
	},
	
	setPaddingToChild: function(top,right,bottom,left){
		if (!top) top = 0;
		if (!right) right = 0;
		if (!bottom) bottom = 0;
		if (!left) left = 0;		
		this.child_options.get('padding').top = top;
		this.child_options.get('padding').right = right;
		this.child_options.get('padding').bottom = bottom;
		this.child_options.get('padding').left = left;
	},	
	
	getPaddingChild: function(){
		return this.child_options.get('padding');
	},	
	
	configChild: function(container){
		container.size( this.child_options.get('width'),
						this.child_options.get('height') );
		
		container.margin( this.child_options.get('margin').top,
						  this.child_options.get('margin').right,
						  this.child_options.get('margin').bottom,
						  this.child_options.get('margin').left	);
						  
		container.padding( this.child_options.get('padding').top,
						  this.child_options.get('padding').right,
						  this.child_options.get('padding').bottom,
						  this.child_options.get('padding').left	);						  
	},
	
	sizeToContent: function(width,height){
		if ( width ) this.content.style.width = width + "px";
		if ( height ) this.content.style.height = height + "px";
	},
	
	overflow: function(width,height){
		if ( (width) && (height) ) {
			this.has_overflow = true;
			this.body.style.overflow = "hidden";
		}else{
			this.has_overflow = false;
			this.content.style.overflow = "auto";
		}
		var size = this.getChildSize();
		if ( size.height != 0 ) height = size.height;
		this.body.style.height = height + "px";
		this.resizeContent();
	},
	
	resizeContent: function(){
		if ( this.getContentSizeDirection() == "horizontal" ){
			this.content.style.width = ( this.containers.size() * ( this.getChildSize().width + 2 ) ) + "px";
			this.content.style.height = this.body.style.height;			
		}else if( this.getContentSizeDirection() == "vertical" ){
			this.content.style.width = this.getChildSize().width + 2;
			this.content.style.height = ( this.containers.size() * ( this.getChildSize().height + 2 ) ) + "px";
		}
	},
	
	getContentSizeDirection: function(){
		return this.content_options.get('resize_direction');
	},
	
	setContentSizeDirection: function(value){
		this.content_options.set('resize_direction',value);
	},
	
	getChildSize: function(){
		return { height: this.child_options.get('height') + this.child_options.get('margin').top + this.child_options.get('margin').bottom + this.child_options.get('padding').top + this.child_options.get('padding').bottom,
				 width: this.child_options.get('width') + this.child_options.get('margin').left + this.child_options.get('margin').right + this.child_options.get('padding').left + this.child_options.get('padding').right
				};
	}
});

SC.container.Slider = Class.create(SC.container.Multiple, {
	defaults: function($super){
		$super();
		this.slider_options = $H({
			direction: "horizontal",
			refresh_navbar_on_add: true,
			moveto_on_add: false,
			navbar_visible_amount: 4
		});
		
		this.current = {
			element: null,
			index: 0
		};
		
		this.effect = {
			scrolling: null
		};
	},
	
	initialize: function($super,parent,options){
		this.mergeOptions( this.slider_options, options );		
		$super( parent,options );
	},

	add: function($super,html,position){
		/* convertir el nuevo indice y elemento como el actual */
		var container = $super(html,position);
		
		/* mover el contenido hacia la posicion del nuevo elemento, por defecto no lo hace */
		if ( this.slider_options.get('moveto_on_add') ){
			this.setCurrent( container.index );
			this.moveTo( this.getCurrent().index );
		}
		
		/* refrescar la barra de navegacion */
		if ( this.slider_options.get('refresh_navbar_on_add') ){
			if (this.slider_options.get('moveto_on_add')) {
				this.createNavBar( this.getCurrent().index );
			}else{
				this.createNavBar(0);
			}
		}		
	},
	
	moveto_on_add: function(){
		this.slider_options.set('moveto_on_add',true);
	},
	
	setDirection: function(value){
		this.setContentSizeDirection(value);
		this.slider_options.set('direction',value);
	},
	
	getDirection: function(){
		return this.slider_options.get('direction');
	},
	
	create_previous_button: function(){
		return new Element("button").update("<").observe('click',function(event){
			this.previousContainer();
		}.bind(this));
	},
	
	create_next_button: function(){
		return new Element("button").update(">").observe('click',function(event){
			this.nextContainer();
		}.bind(this));
	},
	
	createNavBar: function(from_index){
		this.setFooter("");
		
		var to_index = from_index + this.slider_options.get('navbar_visible_amount');
		
		this.containers.each( function(c,i){
				
			if ( ( i >= from_index ) && ( i <= to_index ) ) {
				var button = new Element("button").update(i + 1).observe('click', function(event){
					this.nav_button_click_handler(i);
				}.bind(this));
				this.appendToFooter(button);				
			}

		}.bind(this));
		
		this.appendToFooter( this.create_previous_button() );
		this.appendToFooter( this.create_next_button() );
	},
	
	getCurrent: function(){
		return this.current;
	},
	
	setCurrent: function( index ){
		this.current.index = index;
		this.current.element = this.get( index ).getElement();
	},
	
	nav_button_is_needed: function(index){
		var visible_amount = 2;
		var is_needed = false;
		if ( ( index >= ( this.getCurrent().index - (visible_amount-1) ) ) && 
			 ( index <= ( this.getCurrent().index + visible_amount) ) ){
			is_needed = true;
		}	
		return is_needed;
	},
	
	nav_button_click_handler: function(index_or_direction){
		this.moveTo(index_or_direction);
		this.createNavBar(this.getCurrent().index);
	},
	
	moveTo: function(index_or_direction){
		
		if ( index_or_direction == "back" ) { 
			if (this.getCurrent().index > 0) {
				this.setCurrent( this.getCurrent().index-1 );
			}else{
				this.setCurrent(this.containers.size() - 1);
			}
		}
		if ( index_or_direction == "forward" ) {
			
			if (this.getCurrent().index < this.containers.size() - 1) {
				this.setCurrent( this.getCurrent().index+1 );
			}else{
				this.setCurrent(0);
			}
		}

		if ( Object.isNumber( index_or_direction ) ){
			this.setCurrent( index_or_direction );
		}

		this.scrollTo( this.getCurrent().element );		
	},
	
	nextContainer: function(){
		this.nav_button_click_handler("forward");
	},
	
	previousContainer: function(){
		this.nav_button_click_handler("back");
	},
	
	scrollTo: function(element){
		offset = element.positionedOffset();
		
		var _x = 0;
		var _y = 0;
		if ( this.getDirection() == "horizontal" ){ 
			_x = -offset[0];
		}else if( this.getDirection() == "vertical" ){
			_y = -offset[1]
		}
		if ( this.effect.scrolling ) this.effect.scrolling.cancel();
		this.effect.scrolling = new Effect.Move(this.content, {x: _x, y: _y, mode: 'absolute'});
	}	
});

SC.container.Slider.Remote = Class.create(SC.container.Slider, {
	
	defaults: function($super){
		$super();
		this.remote_options = $H({
			refresh_navbar_on_add: false
		});
		this._requests = [];
		this._on_loading = false;
		this._last_request_done = -1;
	},
	
	initialize: function($super,parent,options){
		this.mergeOptions( this.remote_options, options );		
		$super( parent,options );		
		this.moveto_on_add();
	},
	
	addLoading: function(){
		var loading = new Element('div',{'class':'loading','style':'position:absolute;z-index:9999;top:0;left:0;'});
		loading.update( SC.globals.templates.loading );
		this.appendToBody( loading );	
	},
	
	removeLoading: function(){
		this.getBody().down('div.loading').remove();
	},
	
	start: function(){
		this.makeRequest(0);
	},
	
	makeRequest: function(index){
		if ( this._requests.size() > 0 ){
			var request = this.getRequest(index);
			if (!request.done) {
				request.object.start(); //hacer el request
				this.addLoading(); //agregar el loading
				this._on_loading = true; //activar bloqueo para evitar llamadas mientras hay una activa
				this._last_request_done = index; //indicar el ultimo request hecho
			}else{
				this.moveTo(index);
				this.createNavBar(this.getCurrent().index);				
			}
		}
	},
	
	addRequest: function(xhr_function){
		this._requests.push( { done: false, object: new SC.utils.Request( xhr_function ) } );
		this.createNavBar(0);
	},
	
	getRequest: function(index){
		return this._requests[index];
	},
	
	getLastRequestIndex: function(){
		return this._last_request_done;
	},
	
	handle_on_success: function(request){
		if ( this._on_loading ) {
			this.add( request.responseText,this.getLastRequestIndex() ); //agregar contenedor con el nuevo contenido
			this.removeLoading(); //remover el loading
			this._on_loading = false; //desactivar el bloqueo para permitir futuras llamadas
			this._requests[this.getLastRequestIndex()].done = true; //indicar que la petición ya fue hecha
		}
	},
	
	nav_button_click_handler: function(index_or_direction){
		var index = -1;
		if ( index_or_direction == "back" ) { 
			if (this.getCurrent().index > 0) {
				index = this.getCurrent().index-1;
			}else{
				index = this._requests.size() - 1;
			}
		}
		if ( index_or_direction == "forward" ) {
			
			if (this.getCurrent().index < this._requests.size() - 1) {
				index = this.getCurrent().index+1;
			}else{
				index = 0;
			}
		}
		
		if ( Object.isNumber( index_or_direction ) ){
			index = index_or_direction;
		}			
		this.makeRequest(index);
	},	
	
	createNavBar: function(from_index){
		this.setFooter("");
		
		var to_index = from_index + this.slider_options.get('navbar_visible_amount');
		
		this._requests.each( function(c,i){
			if ( ( i >= from_index ) && ( i <= to_index ) ) {
				
				var button = new Element("button").update(i + 1).observe('click', function(event){
					this.nav_button_click_handler(i);
				}.bind(this));
				this.appendToFooter(button);
				
			}
		}.bind(this));
		
		this.appendToFooter( this.create_previous_button() );
		this.appendToFooter( this.create_next_button() );
	}
	
	/*,
	
	moveTo: function(index_or_direction){
		
		if ( index_or_direction == "back" ) { 
			this.setCurrent( this.getBackIndex(this.getCurrent().index) );
		}
		if ( index_or_direction == "forward" ) {
			this.setCurrent( this.getForwardIndex(this.getCurrent().index) );
		}

		if ( Object.isNumber( index_or_direction ) ){
			this.setCurrent( index_or_direction );
		}

		this.scrollTo( this.getCurrent().element );		
	},
		
	getBackIndex: function(from_index){
		var index = -1;
		for ( var i = from_index-1; i >= 0; i-- ){
			if (this.containers[i]) {
				index = i;
				break;
			}
		}
		if ( index == -1 ) index = this.containers.size() - 1;
		return index;
	},
	
	getForwardIndex: function(from_index){
		var index = -1;
		for ( var i = from_index+1; i < this.containers.size(); i++ ){
			if (this.containers[i]) {
				index = i;
				break;
			}
		}
		//if ( index == -1 ) index = this.getForwardIndex(-1);
		if ( index == -1 ) index = this.getForwardIndex(-1);
		return index;
	}
*/
});