/*
	# titilaflora.net
	Basic Javascript
*/

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

	// # extend Heading H3
	/*
	if( $defined($('content')) ) {
		var content_width = $('content').getStyle('width');
		content_width = content_width.toInt();
		$$('#content p').addClass('clear');
	} else {
		content_width = 492;	
		$$('.page p').addClass('clear');
	}
	
	$$('h1').each(function(item) {
		item.setStyle('float', 'left');
		var size = item.getSize();
		var block_width = (content_width - size.x - 6);
		var block = new Element('div', {'class': 'h1_block'});
		block.setStyle('width', block_width);
		block.inject(item, 'after');
	});
	*/

	// ## Headings
	
	// H3 Sidebar
	$$('#sidebar h3').each(function(item) {
		var text = item.get('html');
		var newtext = '<span>'+text+'</span>';
		item.set('html', newtext);
	});
	
	// Inline List-Styles
	$$('.entry ul li, .entry ol li, .page ul li, .page ol li').each(function(item) {
		var text = item.get('html');
		var newtext = '<p>'+text+'</p>';
		item.set('html', newtext);
	});
	
	/* ### Formfield ### */
	$$('.formfield').each(function(item, i) {
				
		var title = item.get('title');
		var value = item.get('value');
		if(title == value) item.addClass('defaultvalue');
	
		item.addEvents({
			
			'focus': function() {
				item.removeClass('error');
				var title = item.get('title');
				var value = item.get('value');
				if(title == value) {
					item.set('value', '');
					item.removeClass('defaultvalue');
				}
			},
			
			'blur': function() {
				var title = item.get('title');
				var value = item.get('value');
				if(value.length == 0) {
					item.addClass('defaultvalue');
					item.set('value', title);	
				}
			}
				
		});
		
	});
	
	// ### Scroller

	var scrollFx = new Fx.Scroll(window);

	$$('.gototop').addEvent('click', function(e) {
		e.stop();
		scrollFx.toTop();
	});

	$$('.gotonewest').addEvent('click', function(e) {
		e.stop();
		scrollFx.toElement('newest');
	});

	// ### Gallery
	
	var gals = $$('.ngg-galleryoverview');
	if( gals.length > 0 ) {	
	
		// * Remove those links
		$$('.slideshowlink').destroy();
	
	
		// we have one or more galleries
		gals.each(function(item, index) {
			// * hide all items
			var id = item.get('id');
			
			var links = $$('#'+id+' .ngg-gallery-thumbnail a');
			var images = $$('#'+id+' .ngg-gallery-thumbnail img');
			var amount = links.length;
			var size = {x: images[0].get('width'), y: images[0].get('height')};

			// * create new container
			var gallery = new Element('div', {'id': id});
			gallery.addClass('gallery');
			gallery.inject(item, 'after');

			links.each(function(imglink, i) {
				var title = imglink.get('title');
				var src = images[i].get('src');
				var alt = imglink.get('title');
				var height = imglink.get('height');
				var width = imglink.get('width');

				var image = new Element('img', {'title': title, 'src': src, 'alt': alt, 'height': height, 'width': width});
				image.inject(gallery);

			});
			
			// Redefine the item
			item.destroy();
			item = gallery;
			var images = $$('#'+id+' img');

			
			/*
			var imagecontainer = $$('#'+id+' .ngg-gallery-thumbnail-box');
			imagecontainer.hide();
			var images = $$('#'+id+' img');
			var amount = images.length;
			item.set('html', '');
			images.each(function(img, i) {
				img.inject(item);
			});*/
			//item.show(); // initially all galleries are hidden

			// * create the caption
			var gal_caption = new Element('div', {'id': id+'-caption', 'html' : images[0].get('alt')});
			gal_caption.addClass('gallery-caption');
			gal_caption.inject(item, 'after');
			
			// * create the gallery navigation
			var gal_navi = new Element('div', {'id': id+'-nav', 'html': amount+' Bilder'});
			gal_navi.addClass('gallery-navigation');

			// navi buttons
			var gal_navi_next = new Element('a');
			gal_navi_next.addClass('next');
			gal_navi_next.inject(gal_navi);
			var gal_navi_prev = new Element('a');
			gal_navi_prev.addClass('prev');
			gal_navi_prev.inject(gal_navi);

			// Current img num
			var gal_current_image = new Element('div', {'id': 'current-image-'+id, 'html': '1'});
			gal_current_image.addClass('current-image');
			gal_current_image.inject(gal_navi);

			gal_navi.inject(item);

			// gallery functionality
			var pos = item.getPosition();
			images.setStyles({
				'top': pos.y,
				'left': pos.x
			});
			//alert( size.y+' / '+size.x );
			item.setStyles({
				'width': size.x,
				'height': size.y
			});
			gal_navi.setStyles({
				'top': (pos.y).toInt()-8,
				'left': (pos.x).toInt()-80
			});
		
			var i = 0;
			var j = 1;
			images[i].xfade_onTop();
			images[j].xfade_onSecond();
	
			runImageFader = function(direction) {

				//alert('BEGIN direction: '+direction+': i('+i+') j('+j+')');

				if(direction == 'prev') {
					j = i-1;
					if(j < 0) j = amount-1;
				}
				
				if( i == amount ) {i = 0;}
				if( j == amount ) {j = 0;}
				
				// set images
				images[i].xfade_onTop();
				images[j].xfade_onSecond();
				var new_subtitle = images[j].get('alt');

				// fade out upper image
				var fadeOutFx = new Fx.Tween(images[i], {duration: 1500, transition: Fx.Transitions.Cubic, link: 'cancel', onComplete: function() { 
					// change subtitle
					if( $defined($(id+'-caption')) ) {
						$(id+'-caption').set('html', new_subtitle);
					}
					// change number
					if( $defined($('current-image-'+id)) ) {
						num = i+1;
						if(i == amount) num = 1;
						$('current-image-'+id).set('html', num);
					}
				} });
				fadeOutFx.start('opacity', 1, 0);
				
				// iterate
				if(direction == 'prev') {
					i = j;
					j++;
				} else {
					i++;
					j++;
				}
				//alert('END direction: '+direction+': i('+i+') j('+j+')');

			}
			
			// periodical
			//timer = runImageFader.periodical(2500); // 5500

			gal_navi_next.addEvent('click', function() {
				runImageFader('next');
			});
			gal_navi_prev.addEvent('click', function() {
				runImageFader('prev');
			});

		});
	}

});

Element.implement({
	
	// moves image "on top"
	xfade_onTop: function() {
		$$('.onTop').removeClass('onTop');
		this.setStyles({'opacity': 1, 'visibility': 'visible'});
		this.addClass('onTop');
		thisgallery = this.getParent('.gallery');
/*		var thisimagesize = {x: images[0].get('width'), y: images[0].get('height')};
		 = this.getSize();
		alert(thisimagesize.y);
		thisgallery.setStyle('height', thisimagesize.y);		
*/	},

	// moves image "on second top"
	xfade_onSecond: function() {
		$$('.onSecond').removeClass('onSecond');
		this.setStyles({'opacity': 1, 'visibility': 'visible'});
		this.addClass('onSecond');
	}

});