/*
Author:
	luistar15, <leo020588 [at] gmail.com>
License:
	MIT License
 
Class
	noobSlide (rev.19-06-08)

Arguments:
	Parameters - see Parameters below

Parameters:
	box: dom element | required
	items: dom collection | required
	size: int | item size (px) | default: 240
	mode: string | 'horizontal', 'vertical' | default: 'horizontal'
	addButtons:{
		previous: single dom element OR dom collection| default: null
		next:  single dom element OR dom collection | default: null
		play:  single dom element OR dom collection | default: null
		playback:  single dom element OR dom collection | default: null
		stop:  single dom element OR dom collection | default: null
	}
	button_event: string | event type | default: 'click'
	handles: dom collection | default: null
	handle_event: string | event type| default: 'click'
	fxOptions: object | Fx.Tween options | default: {duration:500,wait:false}
	interval: int | for periodical | default: 5000
	autoPlay: boolean | default: false
	onWalk: event | pass arguments: currentItem, currentHandle | default: null
	startItem: int | default: 0

Properties:
	box: dom element
	items: dom collection
	size: int
	mode: string
	buttons: object
	button_event: string
	handles: dom collection
	handle_event: string
	previousIndex: int
	nextIndex: int
	fx: Fx.Tween instance
	interval: int
	autoPlay: boolean
	onWalk: function
	
Methods:
	previous(manual): walk to previous item
		manual: bolean | default:false
	next(manual): walk to next item
		manual: bolean | default:false
	play (interval,direction,wait): auto walk items
		interval: int | required
		direction: string | "previous" or "next" | required
		wait: boolean | required
	stop(): stop auto walk
	walk(item,manual,noFx): walk to item
		item: int | required
		manual: bolean | default:false
		noFx: boolean | default:false
	addHandleButtons(handles):
		handles: dom collection | required
	addActionButtons(action,buttons):
		action: string | "previous", "next", "play", "playback", "stop" | required
		buttons: dom collection | required

Requires:
	mootools 1.2 core
*/
var noobSlide = new Class({

	initialize: function(params){
		this.items = params.items;
		this.mode = params.mode || 'horizontal';
		this.modes = {horizontal:['left','width'], vertical:['top','height']};
		this.size = params.size || 240;
		this.box = params.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
		this.button_event = params.button_event || 'click';
		this.handle_event = params.handle_event || 'click';
		this.onWalk = params.onWalk || null;
		this.currentIndex = null;
		this.previousIndex = null;
		this.nextIndex = null;
		this.interval = params.interval || 5000;
		this.autoPlay = params.autoPlay || false;
		this._play = null;
		this.handles = params.handles || null;
		
		this.imgblock = "";
		
		if(this.handles){
			this.addHandleButtons(this.handles);
		}
		this.buttons = {
			previous: [],
			next: [],
			play: []
			//,
//			playback: [],
//			stop: []
		};
		if(params.addButtons){
			for(var action in params.addButtons){
				this.addActionButtons(action, $type(params.addButtons[action])=='array' ? params.addButtons[action] : [params.addButtons[action]]);
			}
		}
		this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));
		this.walk((params.startItem||0),true,true);
	},

	addHandleButtons: function(handles){
		for(var i=0;i<handles.length;i++){
			handles[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]));
		}
	},

	addActionButtons: function(action,buttons){
		for(var i=0; i<buttons.length; i++){
			switch(action){
				case 'previous': buttons[i].addEvent(this.button_event,this.previous.bind(this,[true])); break;
				case 'next': buttons[i].addEvent(this.button_event,this.next.bind(this,[true])); break;
//				case 'play': buttons[i].addEvent(this.button_event,this.imgblock.play.bind(this,[test.interval,'next',false])); break;
//				case 'playback': buttons[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false])); break;
//				case 'stop': buttons[i].addEvent(this.button_event,this.imgblock.stop.bind(this)); break;
			}
			this.buttons[action].push(buttons[i]);
		}
	},

	previous: function(manual){
		this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
	},

	next: function(manual){
		this.walk((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
	},

	play: function(interval,direction,wait){
		this.stop();
		if(!wait){
			this[direction](false);
		}
		this._play = this[direction].periodical(interval,this,[false]);
	},

	stop: function(){
		$clear(this._play);
	},

	walk: function(item,manual,noFx){
		if(item!=this.currentIndex){
			this.currentIndex=item;
			this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
			this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
			if(manual){
				this.stop();
			}
			if(noFx){
				this.fx.cancel().set((this.size*-this.currentIndex)+'px');
			}else{
				this.fx.start(this.size*-this.currentIndex);
			}
			if(manual && this.autoPlay){
				this.play(this.interval,'next',true);
			}
			if(this.onWalk){
				this.onWalk((this.items[this.currentIndex] || null), (this.handles && this.handles[this.currentIndex] ? this.handles[this.currentIndex] : null));
			}
		}
	}
	
});

/*
Author:
	digital-communications.de
License:
	MIT License
 
Class
	galleryEffects based on noobSlide
*/


var galleryEffects = new Class({
	Implements: Events,

	initialize: function(params){
		this.box             = params.box;
				
		this.items           = params.storage.getChildren('img');
		this.thumbnails      = params.thumbnails;
		this.thumbnails_path = params.thumbnails_path;

		this.thumbblock      = params.thumbblock;
		this.thumbs = new Array();

		this.thumbSlices = this.thumbblock.items.length;

		this.currentIndex  = null;
		this.previousIndex = null;
		this.nextIndex     = null;

		this.startnr = (params.startnr-1)||0;
		this.images  = new Array();
		this.sizes   = new Array();
		this.thumbs  = new Array();
		
		this.image_event       = 'click';
		this.thumb_event_click = 'click';
		this.thumb_event_over  = 'mouseover';
		this.thumb_event_out   = 'mouseout';

		this.statusbar = params.statusbar;

		this.interval = params.interval || 5000;
		this.autoPlay = params.autoPlay || false;
		this._play = null;
		
	},
	
	complete: function () {
		$('gallery').fade(0,1);
		this.statusbar.fade(0);
		this.walk(this.startnr);
		$('stage').addEvent('onchange', function() { $clear(this._play); alert('kontrolle'); });
	},

	progress: function(content, current) {
		var bar = (current>0) ? '<div id="statusbar" style="width:'+ (current*10) +'px;">&nbsp;</div>' : '';
		this.statusbar.setStyle('opacity', 1);
		this.statusbar.set('html', content+bar);
	},
	
	next: function(){
		this.walk((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0));
	},
	previous: function(){
		this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1));
	},
	play: function(){
		$$('#controls .play').addClass('active');

		$$('#controls .play').removeEvents('click');
		$$('#controls .play').addEvent('click', this.stop.bind(this));
		this.walk(this.nextIndex);
		this._play = this.next.periodical(this.interval, this);
	},

	stop: function(){
		$clear(this._play);
		$$('#controls .play').removeEvents('click');
		$$('#controls .play').removeClass('active');
		$$('#controls .play').addEvent('click', this.play.bind(this));
	},

	preloadImages: function(){
		var parent  = this;
		var all 	= this.items.length;
		var items   = this.items;
		var images  = new Array();
		var current = '';
		var msg     = '';

		for(var i=0; i<items.length; i++) {
			images[i] = items[i].src;
		}
		
		new Asset.images(
			images, {
				onProgress: function (counter, index) {
					current = counter;
					msg     = 'Bild Nummer ' + (current+1) + ' von ' + all + ' wird geladen ...';
					parent.progress(msg, current);
				},
				onComplete: function () {
					parent.progress('Alle Bilder wurden geladen');
				}
			}
		);
	},
	
	preloadThumbnails: function(){
		var parent = this;
		var thumbs = new Array();
		var items  = this.items;
		var all    = this.items.length;
		var current = '';
		var msg     = '';

		for(var i=0; i<items.length; i++) {
			var t = items[i].src.split('/');
			var src = t[t.length-3]+'/'+t[t.length-2]+'/'+t[t.length-1]
	
			thumbs[i] =  this.thumbnails_path+src;
		}
		new Asset.images(
			thumbs, {
				onProgress: function (counter, index) {
					current = counter;
					msg     = 'Thumbnail Nummer ' + (current+1) + ' von ' + all + ' wird geladen ...';
					parent.progress(msg, current);
				},
				onComplete: function () {
					parent.progress('Galerie ist vollst&auml;ndig geladen',0);
					parent.complete();
				}
			}
		);
	},

	addImageAction: function(){
		var items = this.items;
		var sizes = new Array();
		for(var i=0; i<items.length; i++) {
			this.images[i] = items[i].addEvent(this.image_event,this.next.bind(this,[true]));
			this.sizes[i] = items[i].getSize();
			$(items[i]).setStyle('opacity', '0')
			$(items[i]).setStyle('display', 'none')
		}
	},

	addThumbsAction: function(){
		var images = this.items;
		var thumbs = this.items;

		$$('#controls .play').addEvent('click', this.play.bind(this));

		for(var i=0; i<thumbs.length; i++) {
			$(this.thumbnails[i]).addEvents({
				'click':     this.walk.bind( this, i),
				'mouseup':   this.stop.bind(this),
				'mouseover': this.hover.bind(this, [i, 1]),
				'mouseout':  this.hover.bind(this, [i, 0])
			});
			
			var t = images[i].src.split('/');
			var src = t[t.length-3]+'/'+t[t.length-2]+'/'+t[t.length-1]

			$(this.thumbnails[i]).getChildren('div').setStyle('background-image', 'url('+this.thumbnails_path+src+')');
			$(this.thumbnails[i]).getChildren('div').setStyle('background-position', 'center');

		}
	},

	hover : function() {
		var item = arguments[0];
		var dir = arguments[1];
		var current = this.currentIndex;
		if (item != current) {
			if (dir == 1) { this.thumbnails[item].setProperty('class', 'active'); }
			else { this.thumbnails[item].setProperty('class', 'gallerythumbs'); }
		}
	},
	thumb_fix: function() {
		var item = arguments[0];
		this.thumbs_clear();
		this.thumbnails[item].setProperty('class', 'active');
	},
	thumbs_clear: function () {
		this.thumbnails.each(
			function(item, index) {
				item.setProperty('class', 'gallerythumbs');
			}
		)
	},
		
	setup: function () {
		$clear(this._play);
		$$('#controls .play').removeEvents('click');
		
		this.preloadImages();
		this.preloadThumbnails();
		this.addImageAction();
		this.addThumbsAction();
	},

	morpher: function () {
		var	new_width  = this.sizes[this.currentIndex].x;
		var new_height = this.sizes[this.currentIndex].y;
		var new_src    = this.images[this.currentIndex].getProperty('src');
			
		var myMorphFadeOut = function () {
				$('selectedGalleryImage').fade(1,0);
			};
			
		var myMorphResize = function () {	
				$('galleryImages').morph({
					height: new_height,
					width:  new_width
				});
			};
			
		var myMorphNewSrc = function () {
				$('selectedGalleryImage').setProperty('src', new_src);
			};
			
		var myMorphFadeIn = function() {
				$('selectedGalleryImage').fade(0,1);
			};
	
		myMorphFadeOut();
		myMorphResize.delay(500);
		myMorphNewSrc.delay(1000);
		myMorphFadeIn.delay(1200);
	
	},


	walk: function(item){
		if(item != this.currentIndex){
			this.thumb_fix(item);
			
			this.currentIndex  = item;
			this.nextIndex     = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);

			$('selectedGalleryImage').removeEvents();

			this.morpher();
			
			$('selectedGalleryImage').addEvents({
				'click':    this.walk.bind(this, this.nextIndex),
				'mouseup':  this.stop.bind(this)
			});
			
			this.thumbblock.walk(parseInt(this.currentIndex/9));
			
			this.previousIndex = this.currentIndex;
		}
	}


	
});


var formHighlight = new Class({

	Implements: [Options],	
	origStyles: null,				//for storing inactive field's styles (color, background color, and border color)
	
	//options
	options: {
	transitionTime: 400, 		//transition time (1 second = 1000) for animation
	inputs: null,					//form inputs you want to highlight on focus;  usually something like $$('input[type=text]', 'textarea')
	activeClass: null,			//focused input's CSS class we'lll morph to (defined in CSS doc)
	initialFocus: false			//flag for whether to focus on first input or not
	},

	//initialization
	initialize: function(options) {
		
		//set options
		this.setOptions(options);
		
		this.options.inputs.each(function(el, i){
			  //FYI,  el = the element, i = the index
			  
			  //get styles so we can revert to them on blur
			  //'border-color' returns 4 colors, so we need to grab each (don't know why, but morph won't work)
			  this.origStyles = el.getStyles('color','background-color','border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color');
			  
			  //setup animation styling
			  el.set('morph', { duration: this.options.transitionTime, transition: 'cubic:out' });
			  
			  el.addEvents({
				'focus': function() {
					//note the addition of the '.' here, otherwise 'morph' won't work
					//(you would remove the additonal '.' if you wanted to do a setStyle instead)
					el.morph("."+this.options.activeClass);  
				}.bind(this),
				'blur': function() {
					el.morph(this.origStyles);
				}.bind(this)
			  });
		
		 }, this);
		
		//focus on initial input field if set to true in options
		if(this.options.initialFocus != false){
			this.options.inputs[0].focus();
		}
		
	}

});