var Template = {
	options: {
		closeLabel: 'X'
	},

	initialize: function( options ){
		$extend(this.options, options);
		this.mkMultipleUploads();
		this.mkAscensceurs();
		this.mkInfoBulles();
		this.mkAccountMenu();
	},
	
	mkAccountMenu: function(){
		var stretcher = $('account_stretcher');
		var height = stretcher.getElement('div.inner').getSize().y;
		var stretcherFx = new Fx.Tween(stretcher, 'height', {
			wait: true
		});
		$extend(stretcher, {
			'opened': false,
			'canMove': true,
			'open': function(){
				if(this.canMove){
					this.canMove = false;	
					stretcherFx.start(0, height).chain(function(){
						this.opened = true;
						this.canMove = true;	
					}.bind(this));				
				}
			},
			'close': function(){
				if(this.canMove){
					this.canMove = false;	
					stretcherFx.start(height, 0).chain(function(){
						this.opened = false;
						this.canMove = true;	
					}.bind(this));				
				}
			},
			'toggle': function(){
				if(this.opened){
					this.close();
				}else{
					this.open();
				}
			}
		});
		$('account_toggler').addEvent('click', function(){
			stretcher.toggle();
		});
	},
	
	mkMultipleUploads: function(){	
		var uploadFields = $$('input.multiple');		
		if(!uploadFields.length){
			return;
		}
		uploadFields.each(function(uploadField, i){
			uploadField.baseName = uploadField.get('name');
			uploadField.fileNumber = 1;
			uploadField.set('name', uploadField.baseName+'[1]');
			uploadField.addEvent('change', function(){
				Template.addUploadField(uploadField, uploadField.baseName, uploadField.fileNumber+1);
			});
		});
	},
	
	addUploadField: function(uploadField, baseName, fileNumber){
		new Element('input', {
			'type': 'file',
			'class': 'multiple',
			'name': baseName+'['+fileNumber+']',
			'events': {
				'change': function(){
					Template.addUploadField(this, baseName, fileNumber+1);
				}
			}
		}).injectAfter(uploadField);
	},
		
	mkAscensceurs: function(){
		var togglers = $$('h3.section_toggler');	
		if(!togglers.length){
			return;
		}	
		
		var stretchers = $$('div.section_toggled');
		togglers.each(function(toggler, i){
			var stretcher = stretchers[i];
			var stretcherInner = stretcher.getElement('div.section_toggled_inner');
			var stretcherClosers = stretcher.getElements('a.section_toggled_closer');
			var stretcherCloser = stretcherClosers[stretcherClosers.length-1];
			var h = stretcher.getStyle('height');
			var stretcherFx = new Fx.Morph(stretcher);
			$extend( stretcher, {
				'opened' : true,
				'open': function(){
					if(this.opened){
						return;
					}
					stretcherFx.start({
						'height' : [0, stretcherInner.getStyle('height')],
						'opacity' : [0, 1]
					}).chain(function(){
						toggler.addClass('opened');
						this.opened = true;
						this.setStyle('height', 'auto');					
					}.bind(this));
				},
				'close': function(){
					if(!this.opened){
						return;
					}
					stretcherFx.start({
						'height' : [stretcherInner.getStyle('height'), 0],
						'opacity' : [1, 0]
					}).chain(function(){
						toggler.removeClass('opened');
						this.opened = false;					
					}.bind(this));		
				},
				'fastClose': function(){
					if(!this.opened){
						return;
					}
					this.setStyles({
						'height' : 0,
						'opacity' : 0					
					});	
					toggler.removeClass('opened');
					this.opened = false;		
				},			
				'toggle': function(){
					if(this.opened){
						this.close();
					}
					else{
						this.open();
					}
				}
			});
			stretcher.fastClose();
			toggler.addEvent('click', function(){
				stretcher.toggle();
			});
			stretcherCloser.setHTML(this.options.closeLabel);
			stretcherCloser.addEvent('click', function(){
				stretcher.close();
			});
		}.bind(this));
		
		
		
	
	
	},
	
	mkInfoBulles: function(){
		var togglers = $$('span.infobulle');
		var stretchers = $$('div.infobulle');
		if(!togglers.length || !stretchers.length){
			return;
		}		
		new InfoBulle(togglers, stretchers);		
	}
	
};

var InfoBulle = new Class ({
	initialize: function(togglers, stretchers){
		this.infobulle = $('info_bulle');
		this.togglers = togglers;
		this.stretchers = stretchers;
		this.padder = this.infobulle.getElement('div.padder');
		
		var infobulleFx = new Fx.Tween(this.infobulle, 'opacity', {
			wait: true
		});
		
		$extend(this.infobulle, {
			show: function(){
				infobulleFx.start(0,1);
			},
			hide: function(){
				infobulleFx.start(1,0);	
			}
		});
		
		var closer = new Element('span');
		closer.inject($('info_bulle_bottom'));
		
		closer.addEvent('click', function(e){ 
			this.infobulle.hide();
		}.bind(this));
		
		
		this.togglers.each(function(toggler, i){
			stretchers[i].setStyle('display', 'none');
			toggler.addEvent('click', function(e){ 
				var e = new Event(e);
				this.padder.empty();
				var clone = stretchers[i].clone();
				clone.inject(this.padder);
				clone.setStyle('display', 'block');
				var infobulleH = e.client.y - this.infobulle.getSize().y.toInt() + window.getScroll().y.toInt() - 5;
				//console.log(infobulleH);
				this.infobulle.setStyles({
					top: infobulleH,
					left: e.client.x - 70
				});
				this.infobulle.show();
			}.bind(this));
		}.bind(this));			
	}
});