/*
---
SDTextInput
...
*/

// Class fuer Textinputs mit Defaulttext
(function(){
	this.SDTextInput = new Class({
		Implements: [Events, Options],	
		options: {
			bgImage: '',
			width : 190,
			defaultTextColor: '#727272',
			normalTextColor: '#330000'
		},
		initialize: function() {
			var params = Array.link(arguments, {options: Object.type, elements: $defined});	
			this.setOptions(params.options);
			if (params.elements) this.attach(params.elements);		
		},
		attach: function(elements){
			$$(elements).each(function(element){
				this.element = element;
				this.altText = element.get("alt");
				this.startValue = element.value;
				this.form = element.getParent('form');			
				if (this.startValue == "" && this.altText != "") {
					this.setDefaultTextAsValue();
				}
			},this);		
			return this;
		},
		setDefaultTextAsValue: function() {
			this.defaultValue = this.altText;
			this.element.setStyle('color', this.defaultTextColor);
			this.element.value = this.defaultValue;
			this.element.addEvent('focus', function(evt) {
				if (this.element.value == this.defaultValue) {
					this.element.value = '';
					this.element.setStyle('color', this.options.normalTextColor);
				}			
			}.bind(this));
			this.element.addEvent('blur', function(evt) {
				if (this.element.value == '') {
					this.element.setStyle('color', this.options.defaultTextColor);
					this.element.value = this.defaultValue;
				}
			}.bind(this));
			this.form.addEvent('submit', function(evt) {
				if (this.element.value == this.defaultValue) {
		  		this.element.value = "";
		  	}
			}.bind(this));
		}
	});
})();


/*
---
SDSelect
...
*/

// Class fuer gestylte Selectboxen
(function(){

this.SDSelect = new Class({

	Implements: [Events],

	initialize: function() {
		var params = Array.link(arguments, {options: Object.type, elements: $defined});
		this.textSpan = new Element('span', {'class': 'selecttext'});		
		if (params.elements) this.attach(params.elements);		
		//console.log("THIS :", this);
	},
	attach: function(elements){
		var opts = this.options;
		$$(elements).each(function(element){
			this.options = element.options;
			this.selectedIndex = element.options.selectedIndex;
			this.value = this.options[this.selectedIndex].value;
			
			this.textSpan.inject(element, 'before');
			this.textSpan.set('html', this.options[this.selectedIndex].text);
			
			element.addEvent('change', function(evt) {
				this.fireEvent("onChange", this);
			}.bind(this));

		},this);		
		return this;
	},
	onChange: function(){
		//console.log("CHANGE :", this);
		this.textSpan.set('html', this.options[this.options.selectedIndex].text);
		this.value = this.options[this.options.selectedIndex].value;
	}
});
})();



/*
---
SDFileUpload
...
*/

// Class fuer gestylte Fileuploads
(function(){

this.SDFileUpload = new Class({

	Implements: [Events, Options],

	options: {
		image: '/sd3cadmin/img/btn_fileupload.gif',
		imageHeight : 22,
		imageWidth : 24,
		width : 200,
		textColor1: '#acacac',
		textColor2: '#333333',
		defaultText: 'Datei auswählen...'
	},
	
	initialize: function() {
		var params = Array.link(arguments, {options: Object.type, elements: $defined});
		// console.log("PARAMS: ", params);
		this.setOptions(params.options);
		if (params.elements) this.attach(params.elements);

	},
	attach: function(elements){
		var opts = this.options;
		//console.log("OPTS:", opts);
		$$(elements).each(function(element){
			var fileInput = element.getElement('input[type=file]');						
			var wrapperDiv = new Element('div', {
				'class': 'fupWrapper',
				'styles': {
					'width' : opts.imageHeight + 'px',
					'height' : opts.imageWidth + 'px',
					'backgroundColor': '#ffffff',
					'backgroundImage': 'url(/sd3cadmin/img/btn_fileupload.gif)',
					'backgroundRepeat': 'no-repeat',
					'cursor': 'pointer',
					'overflow': 'hidden',
					'title': opts.defaultText
				}
			})
			var fileName = new Element('input', {
				'class': 'fileName',
				'type': 'text',
				'styles' : {
					'display': 'inline',
					'width': opts.width + 'px'
				},
				'value': opts.defaultText,
				'events': {
					'change': function(){
						if (this.value == "") {
							this.value = opts.defaultText;
							this.setStyle('color', opts.textColor1);
							fileInput.value = "";
						}
					}
				}
			});
			
			fileInput.setStyles({
				'height': opts.imageWidth + 'px',
				'width': opts.width + 'px',
				'display': 'inline',
				'cursor': 'pointer',				
				'opacity': '0.0',
				'visibility': 'visible'
			});
			
			if (Browser.Engine.gecko) {
				if (Browser.Platform.win) {
					fileInput.setStyle('marginLeft', '-142px');
				}
				else {
					fileInput.setStyle('marginLeft', '-168px');
				}
			}
			else {
				fileInput.setStyle('marginLeft', (opts.imagewidth-opts.width) + 'px');
			}
			fileInput.addEvent('change', function() {
					fileName.value = fileInput.value;
					fileName.setStyle('color', opts.textColor2);
			});
			
			wrapperDiv.adopt(fileInput);
			element.grab(wrapperDiv, 'top');
			element.grab(fileName, 'top');
						
		}, this);		
		return this;
	}
});
})();





/*
---

SDTips

...
*/

(function(){

var read = function(option, element){
	return (option) ? ($type(option) == 'function' ? option(element) : element.get(option)) : '';
};

this.SDTips = new Class({
	Implements: [Events, Options],

	options: {
		/*
		onAttach: $empty(element),
		onDetach: $empty(element),
		*/
		onShow: function(){
			this.tip.setStyle('display', 'block');
		},
		onHide: function(){
			this.tip.setStyle('display', 'none');
		},
		title: 'title',
		text: function(element){
			return element.get('rel') || element.get('href');
		},
		showDelay: 100,
		hideDelay: 100,
		storeHideDelay: 100,
		className: 'tip-wrap',
		offset: {x: 16, y: 16},
		windowPadding: {x:0, y:0},
		fixed: false
	},

	initialize: function(){
		var params = Array.link(arguments, {options: Object.type, elements: $defined});
		this.setOptions(params.options);
		if (params.elements) this.attach(params.elements);
		this.container = new Element('div', {
			'class': 'tip',
				events: {
					mouseenter: function() {
						$clear(this.timer);
						this.timer = this.hide.delay(1000000000, this);
					}.bind(this),
					mouseleave: function() {
						$clear(this.timer);
						this.timer = this.hide.delay(this.options.hideDelay, this);
					}.bind(this)
				}
		});
	},

	toElement: function(){
		if (this.tip) return this.tip;

		return this.tip = new Element('div', {
			'class': this.options.className,
			styles: {
				position: 'absolute',
				top: 0,
				left: 0
			}
		}).adopt(
			new Element('div', {'class': 'tip-top'}),
			this.container,
			new Element('div', {'class': 'tip-bottom'})
		).inject(document.body);
	},

	attach: function(elements){
		$$(elements).each(function(element){
			var title = read(this.options.title, element),
				text = read(this.options.text, element);
			
			element.erase('title').store('tip:native', title).retrieve('tip:title', title);
			element.retrieve('tip:text', text);
			this.fireEvent('attach', [element]);
			
			var events = ['enter', 'leave'];
			if (!this.options.fixed) events.push('move');
			
			events.each(function(value){
				var event = element.retrieve('tip:' + value);
				if (!event) event = this['element' + value.capitalize()].bindWithEvent(this, element);
				
				element.store('tip:' + value, event).addEvent('mouse' + value, event);
			}, this);
		}, this);
		
		return this;
	},

	detach: function(elements){
		$$(elements).each(function(element){
			['enter', 'leave', 'move'].each(function(value){
				element.removeEvent('mouse' + value, element.retrieve('tip:' + value)).eliminate('tip:' + value);
			});
			
			this.fireEvent('detach', [element]);
			
			if (this.options.title == 'title'){ // This is necessary to check if we can revert the title
				var original = element.retrieve('tip:native');
				if (original) element.set('title', original);
			}
		}, this);
		
		return this;
	},

	elementEnter: function(event, element){
		this.container.empty();
		
		['title', 'text'].each(function(value){
			var content = element.retrieve('tip:' + value);
			if (content) this.fill(new Element('div', {'class': 'tip-' + value}).inject(this.container), content);
		}, this);
		
		var pOffset = element.retrieve('tip:offset');
		if (pOffset) this.options.offset = pOffset;
		
		$clear(this.timer);
		this.timer = (function(){
			this.show(this, element);
			this.position((this.options.fixed) ? {page: element.getPosition()} : event);
		}).delay(this.options.showDelay, this);
	},

	elementLeave: function(event, element){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this, element);
		this.fireForParent(event, element);
	},

	fireForParent: function(event, element){
		element = element.getParent();
		if (!element || element == document.body) return;
		if (element.retrieve('tip:enter')) element.fireEvent('mouseenter', event);
		else this.fireForParent(event, element);
	},

	elementMove: function(event, element){
		this.position(event);
	},

	position: function(event){
		if (!this.tip) document.id(this);

		var size = window.getSize(), scroll = window.getScroll(),
			tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight},
			props = {x: 'left', y: 'top'},
			obj = {};
			//console.log("Position OFFSET: ", this.options.offset);
		
		for (var z in props){
			obj[props[z]] = event.page[z] + this.options.offset[z];
			if ((obj[props[z]] + tip[z] - scroll[z]) > size[z] - this.options.windowPadding[z]) {
				if (this.options.className == "formtip") {
					this.tip.setStyles({
						'backgroundImage': 'url(/gb/images/bg/pointytipbottom.gif)',
						'backgroundPosition': 'left bottom'
					});
				}				
				obj[props[z]] = event.page[z] - this.options.offset[z] - tip[z] + 20; 
			}
			else {
				if (this.options.className == "formtip") {
					this.tip.setStyles({
						'backgroundImage': 'url(/gb/images/bg/pointytip.gif)',
						'backgroundPosition': 'left top'
					});
				}
			}
		}
		
		this.tip.setStyles(obj);
	},

	fill: function(element, contents){
		if(typeof contents == 'string') element.set('html', contents);
		else element.adopt(contents);
	},

	show: function(element){
		if (!this.tip) document.id(this);
		this.fireEvent('show', [this.tip, element]);
	},

	hide: function(element){
		if (!this.tip) document.id(this);
		this.fireEvent('hide', [this.tip, element]);
	}

});

})();