/**
* only used by new aggregator element buttons 
*/
var i4_Edit_singlebutton = {

	add: function(id, parameter, file){
	
		if ($(id)) {
			// add cursor: pointer
			$(id).setStyle({ 'cursor': 'pointer' });
			
			// observeing
			$(id).observe('click', function(){
				// alert(file+'?'+Object.toQueryString(parameter));

				i4_Popup.add().
					set_ajax(file+'?'+Object.toQueryString(parameter)).
					show();
			});
		}
	}
}



var i4_Edit_toolbar = {
	instances: [],
	initialized: false,

	button_edit: {},
	button_delete: {}, 
	button_move: {},
	button_new_below: {},
	button_grid: {},
	button_play: {},

	factory: function(){
		var instance = new i4_Toolbar_instance();
		this.instances.push(instance);
		
		this.initialize();
		
		return instance;
	}, 
	
	initialize: function() {
		if (!this.initialized) {
			// document listner
			i4_Document_listener.click({
				exclude: ['.edit_bar', '.edit_button_container', '.edit_button_container *'],
				callback: (function() {
					this.hide_all();		
				}).bind(this)
			});
			
			this.initialized = true;
		}
	
	},
	
	set_button_edit: function(object) { this.button_edit = object; return this; },
	set_button_delete: function(object) { this.button_delete = object; return this; },
	set_button_move: function(object) { this.button_move = object; return this; },
	set_button_new_below: function(object) { this.button_new_below = object; return this; },
	set_button_grid: function(object) { this.button_grid = object; return this; },
	set_button_play: function(object) { this.button_play = object; return this; },
	
	hide_all: function() {
		this.instances.each(function(item) {
			item.hide();
		});
	},
	
	renew_height: function() {
		this.instances.each(function(item) {
			item.renew_height();
		});
	}
	
}

var i4_Toolbar_instance = Class.create({ 
	container: '',
	button: [],
	url: '',
	navigation_element: '',
	instance: '',
	container: '',
	ajax_file: '',
	id: '',
		
	distance_left: 10, // distance between edit_bar and the content
	edit_bar_width: 9,
	bar_back: true, // just for vertical aggregator
	width: 0, // spezific width for navigation element
	
	button_rendered: false,
	clicked: false,
	
	
	initialize: function() {
		this.button = [];
	},
	
	set_id: function(id) { this.id = id; return this; },
	set_selector: function(selector) { this.id = $$(selector)[0].readAttribute('id'); return this; },
	add_button: function(parameter, option) { this.button.push([parameter, option]); return this; },
	set_url: function(url) { this.url = url; return this; },
	set_navigation_element: function(navigation_element) { this.navigation_element = navigation_element; return this; },
	set_instance: function(instance) { this.instance = instance; return this; },
	set_container: function(container) { this.container = container; return this; },
	set_bar_back: function(bar_back) { this.bar_back = bar_back; return this; },
	set_distance_left: function(distance) { this.distance_left = distance; return this; },
	set_ajax_file: function(file) { this.ajax_file = file; return this; },
	
	
	render: function() {
		
		if (this.id != null && $(this.id)) {
		// log(this.id);
			$(this.id).insert({ 
				top: new Element('div').
					addClassName('edit_overlay').
					setStyle({
						'marginLeft': '-'+this.distance_left+'px'
					}).
					hide()
			});
			
			$(this.id).insert({ 
				top: new Element('div').
					addClassName('edit_bar').
					setStyle({
						'width': this.edit_bar_width+'px',
						'marginLeft': '-'+(this.distance_left+this.edit_bar_width)+'px'
					}).
					observe('mouseover', (function() {
						if (!this.clicked) {
							i4_Edit_toolbar.hide_all();
							$(this.id).down('.edit_bar').addClassName('edit_bar_active');
							$(this.id).down('.edit_bar').next('.edit_overlay').show();
						}
					}).bind(this)).
					observe('mouseout', (function(event) {
						if (!this.clicked) {
							this.hide();
						}
					}).bind(this)).
					observe('click', (function(event) {
						this.clicked = true;
						this.render_toolbar(event);
					}).bind(this))
			});
			
			this.renew_height();
			
			// render bar back
			if ($(this.id).up('.aggregator_container') && this.bar_back) {
				if (!$(this.id).up('.aggregator_container').down('.edit_bar_back')) {
					$(this.id).up('.aggregator_container').insert({ 
						top: new Element('div').
							addClassName('edit_bar_back').
							setStyle({
								'marginLeft': '-'+(this.distance_left+this.edit_bar_width)+'px'
							})
					});
				}
				$(this.id).up('.aggregator_container').down('.edit_bar_back').setStyle({ 'height' : $(this.id).up('.aggregator_container').getHeight()-8+'px' });
			}
		
		}
				
	}, // i4_Toolbar_instance.render()
	
	render_toolbar: function(event) {
		
		if (!this.button_rendered) {
			
			var button_container = new Element('div').
				addClassName('edit_button_container').
				setStyle({
					'marginLeft': '-'+this.distance_left+'px'
				}).
				hide();

			$(this.id).down('.edit_overlay').insert({
				after: button_container
			});
			
			this.button.each((function(item){
				button_container.insert(this.get_button(item[0], item[1]));
				this.width += item[1].icon_width;
			}).bind(this));
			
			if (i4_Sort.get(this.id)) {
				i4_Sort.get(this.id).run();
			}
			
			if(typeof this.after_render_toolbar_function == 'function') {
		    	this.after_render_toolbar_function();
			}
			this.button_rendered = true;
		}

		$(this.id).down('.edit_button_container').setStyle({
			'marginTop': event.pointerY()-$(this.id).cumulativeOffset().top-10+'px',
			'width': this.width+'px'
		}).show();
				
	}, // i4_Toolbar_instance.render_toolbar()
		
	hide: function() {
		if (this.id != null && $(this.id)) {
			$(this.id).down('.edit_bar').removeClassName('edit_bar_active');
			$(this.id).down('.edit_overlay').hide();
			if ($(this.id).down('.edit_button_container')) {
			    $(this.id).down('.edit_button_container').hide();
			}
		}
		
		this.clicked = false;
	}, // i4_Toolbar_instance.hide()
	
	get_button: function(plugin_parameter, option) {
		var result = new Element('span').addClassName('edit_icon');
	
		switch (plugin_parameter.call) {
			case 'edit': 
				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_edit.src,
						alt: i4_Edit_toolbar.button_edit.alt, 
						title: i4_Edit_toolbar.button_edit.title 
					})
				).observe('click', (function(){
					this.show_popup(plugin_parameter);
					this.hide(); 
				}).bind(this));
			break;
			case 'new_below': 
				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_new_below.src,
						alt: i4_Edit_toolbar.button_new_below.alt, 
						title: i4_Edit_toolbar.button_new_below.title 
					})
				).observe('click', (function(){
					this.show_popup(plugin_parameter);
					this.hide(); 
				}).bind(this));
			break;
			case 'move': 
				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_move.src,
						alt: i4_Edit_toolbar.button_move.alt, 
						title: i4_Edit_toolbar.button_move.title 
					})
				).
				addClassName(option.class_name).
				setStyle({ 'cursor': 'move' });
			break;
			case 'delete': 
				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_delete.src,
						alt: i4_Edit_toolbar.button_delete.alt, 
						title: i4_Edit_toolbar.button_delete.title 
					})
				).observe('click', (function(){
					this.show_popup(plugin_parameter);
					this.hide(); 
				}).bind(this));
			break;
			/* slideshow buttons */
			case 'grid': 
				eval('var grid_click_'+this.id+' = function(){ '+option.click+' }');
				
				var grid_click = 'var grid_click_function = function(){ '+option.click+' }';
				eval(grid_click);
				this.grid_click_function = grid_click_function;
				
				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_grid.src,
						alt: i4_Edit_toolbar.button_grid.alt, 
						title: i4_Edit_toolbar.button_grid.title 
					})
				).
				writeAttribute('id', option.id).
				observe('click', (function(){ 
					this.grid_click_function(); 
					this.hide(); 
				}).bind(this));
				
			break;
			case 'play': 
				eval('var play_click_'+this.id+' = function(){ '+option.click+' }');
				
				var play_click = 'var play_click_function = function(){ '+option.click+' }';
				eval(play_click);
				this.play_click_function = play_click_function;


				result.insert(
					new Element('img', { 
						src: i4_Edit_toolbar.button_play.src,
						alt: i4_Edit_toolbar.button_play.alt, 
						title: i4_Edit_toolbar.button_play.title 
					})
				).
				writeAttribute('id', option.id).
				observe('click', (function(event){ 
					this.play_click_function(); 
					this.hide(); 
				}).bind(this));
				
				
			break;
		}
		
		
				
		return result;
	},
	
	/**
	* renews the height for edit_overlay and edit_bar
	*/
	renew_height: function() {
		
		if (this.id != null && $(this.id)) {
			var height = parseInt($(this.id).getHeight());
			
			// if height is 0 the content ist not loaded (video-plugin), try again.
			if ((height - parseInt($(this.id).getStyle('paddingBottom').sub('px', ''))) == 0) {		
				setTimeout((function(){ 
					height = parseInt($(this.id).getHeight()) + parseInt($(this.id).getStyle('marginTop').sub('px', '')); 
					this.set_height(height);
				}).bind(this), 10);				
			} else {
				this.set_height(height + parseInt($(this.id).getStyle('marginTop').sub('px', '')));
			}
		}
	},
	
	set_height: function(height) {
		// navigation -> subnavigation
		
			
		var sublist = $(this.id).down(0) && $(this.id).down(0).next('ul.navigation_list');
		var is_navigation = $(this.id).up('ul.navigation_list');
		if(sublist && sublist.getStyle('position') != 'absolute'){
		    height -= (sublist.getHeight() + parseInt(sublist.getStyle('marginTop').sub('px', '')) + parseInt(sublist.getStyle('marginBottom').sub('px', '')));
		} 
		
		if (!is_navigation) {
		    if (isNaN(parseInt($(this.id).getStyle('borderBottomWidth'))) || parseInt($(this.id).getStyle('borderBottomWidth')) == 0) {
		    	height -= parseInt($(this.id).getStyle('paddingBottom').sub('px', ''));
		    }
		} else {
		    $(this.id).setStyle({ 'position' : 'relative' });
		}
		
		
			
		$(this.id).down('.edit_overlay').setStyle({
		    'height': height+'px',
		    'width': $(this.id).getWidth()+this.distance_left+'px'
		});
		$(this.id).down('.edit_bar').setStyle({
		    'height': height+'px'
		});
	},
	
	show_popup: function(plugin_parameter){
		var parameter = {
		    url : this.url, 
		    navigation_element_id: this.navigation_element,
		    instance_id: this.instance,
		    container_id: this.container
		};
		
		i4_Popup.add().
			set_ajax(this.ajax_file+'?'+Object.toQueryString(parameter)+'&'+Object.toQueryString(plugin_parameter)).
			show();
	}, 
	
	after_render_toolbar: function (func) {
		var after_render_toolbar = 'var after_render_toolbar_function = '+func;
		eval(after_render_toolbar);
		this.after_render_toolbar_function = after_render_toolbar_function;		
		return this;
	}
	
});