/**
 * ul: id of the ul element
 * example: slider_dynamic('slider-dynamic-top', { duration: 0.4, size_normal: 150, size_expand: 150*2.2 });
 *		// c:\web\flimmit.localhost\app\design\frontend\default\flimmit\template\cms\startseite_slider.phtml
 * requirement: Scriptalous Effect
 *
 */
function slider_dynamic(ul, options) {
	ul = $(ul);
	options.select = options.select || 'li .cell-border';
	var itms = ul.select(options.select);
	options.size_normal = Math.round(options.size_normal || options.size_all / itms.length);
	options.size_all = options.size_normal * itms.length;
	options.size_expand = Math.round(options.size_expand || options.size_normal * 2);
	options.size_shrink = Math.round((options.size_all-options.size_expand) / (itms.length-1));
	options.queue_scope = 'queue_slider_dynamic_' + Math.random();
	options.duration = options.duration || 0.4;

	var cancel_effects = function() {
		Effect.Queues.get(options.queue_scope).each(function(effect) { effect.cancel(); });
	}

	ul.observe('mouseout', function(event) {
		if(event.clientX <= options.size_width && event.clientY <= options.size_height)
			return;

		cancel_effects();

		for(var i = 0; i < itms.length; i++) {
			new Effect.Morph(itms[i], {
				style: {width: options.size_normal+'px'},
				duration: options.duration, queue: { scope: options.queue_scope }
			});
		}
	});

	var slider_dynamic_hover = function(event) { // mouseover
		cancel_effects();
		//alert('size_expand: '+options.size_expand+', size_shrink: '+options.size_shrink);

		new Effect.Morph(this, {
			style: {width: options.size_expand+'px'},
			duration: options.duration, queue: { scope: options.queue_scope }
		});

		for(var i = 0; i < itms.length; i++) {
			if(i == this.i) { continue; }

			new Effect.Morph(itms[i], {
				style: {width: options.size_shrink+'px'},
				duration: options.duration, queue: { scope: options.queue_scope }
			});
		}
	}

	for(var i = 0; i < itms.length; i++) {
		var itm = itms[i];
		itm.i = i;
		itm.observe('mouseover', slider_dynamic_hover); // this.validateOnChange.bind(this)
		itm.setStyle({width: options.size_normal + 'px'});
	}

	options.size_width = options.size_normal * itms.length + itms.length - 1; // ul.getWidth();
	options.size_height = itms[0].getHeight(); // ul.getHeight();
}


/**
 * div: id of the container element
 * example: slider_carousel('slider-carousel-top', { load_url: 'http://dfd' });
 * requirement: Scriptalous Effect
 *
 */

function slider_gallery(div, options) {
	var clip = $(div).select('div.clip').first();
	var ul = clip.select('ul').first();

	options = options || {};
	options.duration = options.duration || 0.5;
	if(! options.img_size)
		throw new Error('slider_gallery: img_size missing.');

	var img_size = options.img_size;

	clip.setStyle({width: img_size.width + 'px', height: img_size.height + 'px'});

	var lis = ul.select('li');
	ul.setStyle({left: '0px', height: img_size.height + 'px', width: img_size.width * lis.length + 100 + 'px'});

	lis.each(function(itm, i) {
		itm.setStyle({width: img_size.width + 'px', height: img_size.height + 'px'});
	});

	var current = Math.round(Math.random() * (lis.length-1));

	var load_img = function(li) {
		if(! li.img_elm) {
			li.img_elm = $(document.createElement('img'));
			li.img_elm.setAttribute('src', li.readAttribute('img'));
			li.img_elm.setStyle({width: img_size.width + 'px', height: img_size.height + 'px'});
			var info_div = li.firstDescendant();
			li.insertBefore(li.img_elm, info_div);

			var a = info_div.select('a').first();

			info_div.observe('click', function(event) { window.location = a.readAttribute('href'); });
			a.observe('click', function(event) { event.stop(); window.location = a.readAttribute('href'); });
		}
	}

	var nav_prev_arrow = {}
	var nav_next_arrow = {}

	$(div).select('.nav span').each(function(itm, i) {
		if(itm.hasClassName('prev-arrow')) {
			nav_prev_arrow = itm
			itm.observe('click', function() { show(current - 1); });
		} else if(itm.hasClassName('next-arrow')) {
			nav_next_arrow = itm
			itm.observe('click', function() { show(current + 1); });
		} else {
			lis[i-1].nav_itm = itm;
			itm.observe('click', function() { show(i-1); });
		}
		itm.addClassName('iepngfix');
	});

	var show = function(i, duration) {
		if(0 <= i && i < lis.length) {
			if(i == 0) {
				nav_prev_arrow.className = 'prev-arrow-disable';
				nav_next_arrow.className = 'next-arrow';
			} else if(i == lis.length-1) {
				nav_prev_arrow.className = 'prev-arrow';
				nav_next_arrow.className = 'next-arrow-disable';
			} else {
				nav_prev_arrow.className = 'prev-arrow';
				nav_next_arrow.className = 'next-arrow';
			}

			lis[current].nav_itm.removeClassName('current');
			lis[i].nav_itm.addClassName('current');
			load_img(lis[current = i]);

			if(typeof(duration) == 'undefined')
				duration = options.duration;

			new Effect.Morph(ul, {
				style: {left: '-'+ (img_size.width * current) +'px'}
				, transition: Effect.Transitions.sinoidal // linear // sinoidal
				, duration: duration
			});

			return true;
		}

		return false;
	}

	show(current, 0);
}