Y.use('node', 'anim','ua', function(Y) {

	var allVisibile = false;
	var onImageclickUrl;
	

	
	var h = 0;dh = 0 , w = 0, dw = 0, lw = 0, lh = 0;

	var overlay = Y.Node.create('<div></div>');
	overlay.set('id','imgBox-overlay');
	
	var box = Y.Node.create('<div></div>');
	box.set('id','imgBox-box');

	var layer = Y.Node.create('<div></div>');
	layer.set('id','imgBox-layer');

	var navigation = Y.Node.create('<div><a href="#" id="imgBox-navigation-close">(x) Schliessen</a></div>');
	navigation.set('id','imgBox-navigation');


	var images = new Array();
	var imageP = 0;

	var animImgShow = new Y.Anim({
        node: box,
        duration: 0.5,
//        easing: Y.Easing.easeIn
    });
	
    var onClick = function( ) {
		overlay.setStyle('visibility','visible');
		overlay.setStyle('display','block');
		animIn.run();
	
	};

	function reposition()
	{
		bw = box.get('offsetWidth');
		bh = box.get('offsetHeight');

		box.setStyle('left', ((w-bw)/2)+'px');
		box.setStyle('top', ((h-bh)/2)+'px');

		animImgShow.set('to', {y: 60});
	}


	function getNextImage () {
		if ( imageP < (images.length-1) ) {
			imageP++;

		} else {
			imageP = 0;
		}
		url = images[imageP];

		return imageP;
	}


	function whichImage (myurl) {
		for ( i = 0; i < images.length ; i++ ) {
			if ( myurl == images[i]) {
				return i;
			}
		}
		return 0;
	}

	function loadImage() {

		box.setStyle('display','block');

		reposition();

		box.setStyle('visibility','visible');

		layer.setStyle('visibility','visible');
		layer.set('innerHTML','<img src="" id="imgBox-image" style="visibility:hidden" alt="loading..">');
		layer.setStyle('width', lw+'px');
		layer.setStyle('height', lh+'px');

		
		
		var img = Y.one('#imgBox-image');

		img.removeAttribute('width');
		img.removeAttribute('height');

		Y.one('#imgBox-image').detach('load');
		Y.one('#imgBox-image').detach('click');

		doImage();
		

	}

	function doImage() {
		

		Y.one('#imgBox-image').set('src', url);

		Y.one('#imgBox-image').on('load', function (o) {
		
			if ( allVisibile == false ) {
				hideAll();
				return;
			}
			var img = Y.one('#imgBox-image');

			iw = img.get('width');
			ih = img.get('height');
			m  = 1;

			if ( iw > w ) {
				m = iw / ih;
				iw = w - 100;
				ih = parseInt(iw / m);

				img.set('width', iw);
				img.set('height', ih);
			}
			if ( ih > h ) {
				m = ih / iw;
				ih = h - 100;
				iw =  parseInt(ih / m);

				img.set('width', iw);
				img.set('height', ih);
			}


			layer.setStyle('width', (iw)+'px');
			layer.setStyle('height', (ih)+'px');

			bw = box.get('offsetWidth');
			bh = box.get('offsetHeight');

			reposition();
			Y.one('#imgBox-image').setStyle('visibility','');
			animImgShow.run();
			animImgShow.on('end', function (e) {

				if ( allVisibile == false ) {
					hideAll();
					return;
				}

				Y.one('#imgBox-image').setStyle('visibility','visible');

				Y.one('#imgBox-image').on('click', function(e){
					e.preventDefault();
					if ( onImageclickUrl == '#') {
						Y.one('#imgBox-image').detach('click');
						getNextImage();
					

						layer.set('innerHTML', 'loading...');

						layer.setStyle('width', (lw)+'px');
						layer.setStyle('height', (lh)+'px');

						loadImage();

					} else if ( onImageclickUrl == 'close') {
						e.preventDefault();
						Y.one('#imgBox-image').detach('click');
						hideAll();
					} else {
						document.location.href= onImageclickUrl;
					}
				 });

				 Y.one('#imgBox-overlay').on('click', function(e){
					e.preventDefault();
					Y.one('#imgBox-image').detach('click');
					hideAll();
				 });

			} );


		});

	}
	function hideAll()
	{
		

		box.setStyle('visibility','hidden');
		box.setStyle('display','none');
		overlay.setStyle('visibility','hidden');
		overlay.setStyle('display','none');

		layer.set('innerHTML', 'loading...');

		layer.setStyle('width', (lw)+'px');
		layer.setStyle('height', (lh)+'px');

		allVisibile = false;

	}


	var animIn = new Y.Anim({
			node: overlay,
			duration:0.4,
			to: {opacity: 0.8}
	});

	animIn.on('end', loadImage );


	Y.on('resize', function(e) {
		h = this.get('winHeight');
		w = this.get('winWidth');
		dh = this.get('docHeight');
		dw = this.get('docWidth');

		reposition();
	});

	Y.on('load', function(o) {

		Y.one('body').appendChild(overlay);
		Y.one('body').appendChild(box);
			box.appendChild(layer);
			box.appendChild(navigation);

		layer.setStyle('display','block');
		lw = layer.get('offsetWidth');
		lh = layer.get('offsetHeight');

		if ( Y.UA.ie >= 5 && Y.UA.ie <= 6 ) {
			overlay.setStyle('position', 'absolute');
			box.setStyle('position', 'absolute');
		}
		
		Y.one('#imgBox-navigation-close').on('click', function(e) {
			e.preventDefault();
			hideAll();
		});
		hideAll();
		var cImages = 0;


		Y.all('a').each(function(node) {


			if ( node.getAttribute('rel') == 'imagebox' &&  node.getAttribute('href') != '' ) {
				var tmp =  node.one('img').getAttribute('src');
				tmp = tmp.replace('thumbnail','gross');
				images[cImages] = tmp;

				cImages++;

				node.on('click', function(e){

					allVisibile = true;
					anirunning = true;
					
					e.preventDefault();

					h = this.get('winHeight');
					w = this.get('winWidth');
					dh = this.get('docHeight');
					dw = this.get('docWidth');

					if ( Y.UA.ie >= 5 && Y.UA.ie <= 6 ) {
						
						overlay.setStyle('height', dh+'px');
						overlay.setStyle('width', dw+'px');

					}

					var tmp =  this.one('img' ).getAttribute('src');
					tmp = tmp.replace('thumbnail','gross');

					url  = tmp;

					imageP = whichImage(url);
					
					onImageclickUrl = this.getAttribute('href');

					onClick();

				}, node);

				

			}

		});

	});



	
});