/*
 * Navigation fuer Showreel
 */
var showReelCounter = 1;
var showReelCurrent = 1;

window.addEvent("domready", function(){

	if ($('showReel') != null) {

		$$('.showReelItem').each(function(item){

			var link = new Element('span', {id: 'showReelBar-'+showReelCounter, rel: showReelCounter}).appendText(showReelCounter).inject($('showReelBar'));
			link.addEvent('click', function(e){

				var id = link.getProperty('rel');
				if (id != showReelCurrent) {
					$('showReelBar-'+showReelCurrent).removeClass('active');
					$('showReelItem-'+showReelCurrent).setStyle('display', 'none');
					$('showReelItem-'+id).fade('hide');
					$('showReelItem-'+id).setStyle('display', 'block');
					$('showReelBar-'+id).addClass('active');
					$('showReelItem-'+id).get('tween', {property: 'opacity', duration: '1000'}).start(1); 
					showReelCurrent = id.toInt();
				}

			});

			showReelCounter++;
		});

		if (showReelCounter != 2) {
			window.setTimeout("showReelChange()",7000);
		} else {
			$('showReelBar').setStyle('display', 'none');
		}

	}

});


function showReelChange () {
	var next = showReelCurrent+1;
	if (next == showReelCounter) next = 1;
	$('showReelBar-'+showReelCurrent).removeClass('active');
	$('showReelItem-'+showReelCurrent).setStyle('display', 'none');
	$('showReelItem-'+next).fade('hide');
	$('showReelItem-'+next).setStyle('display', 'block');
	$('showReelBar-'+next).addClass('active');
	$('showReelItem-'+next).get('tween', {property: 'opacity', duration: '1000'}).start(1); 
	showReelCurrent = next;

	window.setTimeout("showReelChange()",7000);

}


/*
 * Tool zum Beschneiden von Bildern
 */

var imageCropper = new Class({

	Implements : [Events, Options],

	options : {
		maskOpacity:0.5,
		maskClassName:'cropperMask',
		moverClassName:'cropperMove',
		resizerClassName:'cropperResize',
		wrapperClassName:'cropperWrapper',
		mini:{x:80,y:80},
		onComplete:$empty,
		resizerWidth:8,
		resizable:true,
		keepRatio:true
	},

	initialize : function(target,options) {

		window.addEvent('domready',function() {

			this.target=$(target);

			if(this.target.get('tag'!='img')) {
				return false;
			}

			this.setOptions(options);

			this.mini={};
			this.mini.x=this.options.mini.x.toInt();
			this.mini.y=this.options.mini.y.toInt();

			if(!this.options.resizable){
				this.options.resizerWidth=0;
			}

			this.runonce = false;

			new Asset.image(this.target.get('src'), {

				onload:function(){
					if(this.runonce){
						return;
					}
					this.runonce=true;

					this.buildCropper();
					this.buildMask();

					this.drag = new Drag.Move(this.resizer, {
						container:this.target,
						handle:this.dragger,
						snap:5,
						onComplete:function() {
							this.fireEvent('onComplete',[this.top,this.left,this.width,this.height]);
						}.bind(this),
						onDrag:function() {
							this.updateMask();
							this.top = ((this.rezr_coord.top-this.target_coord.top)*this.scaleRatio).toInt();
							this.left = ((this.rezr_coord.left-this.target_coord.left)*this.scaleRatio).toInt();
							this.width = Math.max((this.rezr_coord.width*this.scaleRatio).toInt(),this.mini.x);
							this.height = Math.max((this.rezr_coord.height*this.scaleRatio).toInt(),this.mini.y);

						}.bind(this)
					});

					if (this.options.resizable) {

						if(this.options.keepRatio){
							this.ratio = this.mini.x/this.mini.y;
						}
						this.resize = this.resizer.makeResizable({
							snap:5,
							limit:{
								x:[(this.mini.x/this.scaleRatio).toInt()-this.margin],
								y:[(this.mini.y/this.scaleRatio).toInt()-this.margin]
							},
							onComplete:function() {
								this.drag.fireEvent('onComplete');
							}.bind(this),
							onDrag:function() {
								this.rezr_coord=this.resizer.getCoordinates(this.wrapper);
								if (this.options.keepRatio) {
									this.resizer.setStyle('width',(this.rezr_coord.height*this.ratio-this.margin).toInt()+'px');
									this.rezr_coord=this.resizer.getCoordinates(this.wrapper);
									if (this.rezr_coord.bottom>this.target_coord.bottom) {
										var bound = this.target_coord.bottom-this.rezr_coord.top;
										this.resizer.setStyles({'width':(bound*this.ratio).toInt()-this.margin+'px','height':bound-this.margin+'px'});
										this.rezr_coord=this.resizer.getCoordinates(this.wrapper);
									}
									if (this.rezr_coord.right>this.target_coord.right) {
										var bound = this.target_coord.right-this.rezr_coord.left;
										this.resizer.setStyles({'width':bound-this.margin+'px','height':(bound/this.ratio).toInt()-this.margin+'px'});
									}
								} else {
									if (this.rezr_coord.right>this.target_coord.right) {
										var bound = this.target_coord.right-this.rezr_coord.left-this.margin+'px';
										this.resizer.setStyle('width',bound);
										this.rezr_coord=this.resizer.getCoordinates(this.wrapper);
									}
									if (this.rezr_coord.bottom>this.target_coord.bottom) {
										var bound = this.target_coord.bottom-this.rezr_coord.top-this.margin+'px';
										this.resizer.setStyle('height',bound);
									}
								}

								this.drag.fireEvent('onDrag');
							}.bind(this)
						});
					}

					this.drag.fireEvent('onDrag');
					this.drag.fireEvent('onComplete');
					this.show();

				}.bind(this)
			});
		}.bind(this));
	},

	buildCropper : function(){

		this.wrapper = new Element('div',{
			'class':this.options.wrapperClassName,
			'styles':{
				'position':'relative',
				'width' : this.target.getSize().x,
				'height' :this.target.getSize().y,
				'overflow':'hidden'
			}
		}).wraps(this.target);

		this.border = this.target.getStyle('border-left');

		this.target.setStyles({
			'margin':0,
			'border':0,
			'float':'none'
		});

		this.target_coord=this.target.getCoordinates(this.wrapper);

		new Asset.image(this.target.get('src'), {

			onload:function(image) {
				this.scaleRatio = image.get('width')/this.target_coord.width;
				if (this.resize) {
					if(this.scaleRatio<1) {
						this.resizer.setStyles({
							width:(this.mini.x/this.scaleRatio).toInt()-this.margin,
							height:(this.mini.y/this.scaleRatio).toInt()-this.margin
						});
					}
					this.resize.options.limit = {
						x:[(this.mini.x/this.scaleRatio).toInt()-this.margin],
						y:[(this.mini.y/this.scaleRatio).toInt()-this.margin]
					};
					this.drag.fireEvent('onDrag');
					this.drag.fireEvent('onComplete');
				}
			}.bind(this)
		});

		if(this.target_coord.width<this.mini.x){
			this.mini.y = this.target_coord.width*this.mini.y/this.mini.x;
			this.mini.x = this.target_coord.width;
		}
		if(this.target_coord.height<this.mini.y){
			this.mini.x = this.target_coord.height*this.mini.x/this.mini.y;
			this.mini.y = this.target_coord.height;
		}

		this.resizer = new Element('div',{
			'class':this.options.resizerClassName,
			'styles':{
				'position':'absolute',
				'display':'block',
				'margin':0,
				'opacity':0,
				'width':this.mini.x,
				'height':this.mini.y,
				'left':(this.target_coord.left+(this.target_coord.width/2)-(this.mini.x/2)).toInt(),
				'top':(this.target_coord.top+(this.target_coord.height/2)-(this.mini.y/2)).toInt(),
				'padding':'0 ' + this.options.resizerWidth.toInt() + 'px ' + this.options.resizerWidth.toInt()+ 'px 0',
				'z-index':5
			}
		}).inject(this.target,'after');

		this.margin=2*this.resizer.getStyle('border-width').toInt() + this.options.resizerWidth.toInt();

		this.resizer.setStyles({
			width:this.mini.x - this.margin + "px",
			height:this.mini.y - this.margin + "px"
		});

		this.dragger = new Element('div',{
			'class':this.options.moverClassName,
			'styles':{
				'display':'block',
				'position':'relative',
				'width':'100%',
				'height':'100%',
				'margin':0,
				'font-size':0,
				'line-height':0
			},
			'events':{
				'mousedown':function(e){
					e.stop();
				}
			}
		}).inject(this.resizer);

	},

	buildMask : function(){
		this.innermask=this.target.clone();
		this.innermask.setStyles({
			'position':'absolute',
			'padding':0,
			'margin':0,
			'top':0,
			'left':0,
			'z-index':4,
			'opacity':0
		}).inject(this.wrapper);
		this.outtermask = new Element('div',{
			'class':this.options.maskClassName,
			'styles':{
				'position':'absolute',
				'padding':0,
				'margin':0,
				'top':0,
				'left':0,
				'width':'100%',
				'height':this.target_coord.height,
				'z-index':3,
				'opacity':0
			},
			events:{
				'click':this.moveToClick.bind(this)
			}
		}).inject(this.wrapper);
		this.slide = new Fx.Elements($$(this.resizer,this.innermask),{
			onComplete:function(){
				this.updateMask();
				this.drag.fireEvent('onDrag');
				this.drag.fireEvent('onComplete');
			}.bind(this)
		});
	},

	updateMask : function(){
		//update the mask position
		this.rezr_coord = this.resizer.getCoordinates(this.wrapper);
		this.innermask.setStyle('clip','rect('+this.rezr_coord.top+'px '+this.rezr_coord.right+'px '+this.rezr_coord.bottom+'px '+this.rezr_coord.left+'px)');
	},

	moveToClick : function(e){
		var mouseX = e.page.x;
		var mouseY = e.page.y;
		var wrap_coord = this.wrapper.getPosition();
		var localX = mouseX-wrap_coord.x;
		var localY = mouseY-wrap_coord.y;
		var top = (localY-(this.rezr_coord.height/2).toInt()).limit(0,this.target_coord.height-this.rezr_coord.height);
		var left = (localX-(this.rezr_coord.width/2).toInt()).limit(0,this.target_coord.width-this.rezr_coord.width);
		var right = left+this.rezr_coord.width;
		var bottom = top+this.rezr_coord.height;
		var effect = {
			0:{
				'top':top,
				'left':left
			},
			1:{
				'clip':[[this.rezr_coord.top,this.rezr_coord.right,this.rezr_coord.bottom,this.rezr_coord.left],[top,right,bottom,left]]
			}
		};
		this.slide.start(effect);
	},

	hide:function(){
		$$(this.resizer,this.innermask,this.outtermask).fade('out');
	},

	show:function(){
		$$(this.resizer,this.innermask).fade('in');
		this.outtermask.fade(this.options.maskOpacity);
	},

	toggle:function(){
		if(this.resizer.getStyle('opacity')==1){
			this.hide();
		}else{
			this.show();
		}
	},

	destroy:function(){
		this.hide();
		this.target.setStyle('border',this.border);
		(function(){
			this.target.replaces(this.wrapper);
		}).delay(600,this);
	}
});





/*
 * Javascript auf Webseite einbinden
 */
window.addEvent('load',function() {

	if ($('portraitImage') != null) {

		var portraitCropper = new imageCropper('portraitImage',{
			maskOpacity:0.5,
			mini:{
				x:100,
				y:100
			},
			onComplete:function(top,left,width,height){
				$('cropY').set('value',top);
				$('cropX').set('value',left);
				$('cropWidth').set('value',width);
			}
		});

	}

});