var LiMor = new Class({
    Implements: [Events, Options],
    options: {
        morph: {
						
            'link': 'cancel'
        }
    },
    initialize: function(menu, options) {
        var that = this;
        this.setOptions(options);
        this.menu = $(menu);
        this.menuitems = this.menu.getChildren();
        this.menuitems.addEvents({
            mouseenter: function() {
                that.morphTo(this)
            },
            mouseleave: function() {
                that.morphTo(that.current)
            },
            click: function(ev) {
                that.click(ev, this)
            }
        });
        this.bg = new Element('li', {
            'class': 'background'
        }).adopt(new Element('div', {
            'class': 'pfeil'
        }));
        this.bg.fade('hide').inject(this.menu,'bottom').set('morph', this.options.morph);
        this.setCurrent(this.menu.getElement('.current'))
    },
    click: function(ev, item) {
        this.setCurrent(item, true);
        this.fireEvent('onClick', [ev, item])
    },
    setCurrent: function(el, effect) {
        if (el && !this.current) {
            this.bg.set('styles', {
            /*    left: el.offsetLeft,
                width: el.offsetWidth,
                height: el.offsetHeight,
														//			background:'#ffffff',
                top: el.offsetTop*/
																
																 left: 0,
                width: 200,
                height: 90,
														
                top: 0
            }); (effect) ? this.bg.fade('hide').fade('in') : this.bg.setOpacity(1)
        }
      if (this.current) this.current.removeClass('current');
        if (el) this.current = el.addClass('current');
								this.current.set('morph', {
            /*    left: el.offsetLeft,
                width: el.offsetWidth,
                height: el.offsetHeight,
														//			background:'#ffffff',
                top: el.offsetTop*/
																background:'#103350',
																color:'#ff0000'
            }); 
    },
    morphTo: function(to) {
        if (!this.current) return;
						//		 $(h2).fade('out');
								this.bg.morph({
            left: to.offsetLeft,
            top: to.offsetTop,
            width: to.offsetWidth,
									
            height: to.offsetHeight
        });
        this.fireEvent('onMorph', to)
    }
});
var clickSlide = new Class({
    Extends: LiMor,
    options: {},
    initialize: function(menu, images, loader, starter, options) {
        this.parent(menu, options);
        this.images = $(images);
        this.imagesitems = this.images.getChildren();
        $(loader).fade('in');
        new Asset.images(this.images.getElements('img').map(function(el) {
            return el.setStyle('display', 'none').get('src')
        }), {
            onComplete: function() {
                this.loaded = true;
                $(loader).fade('out');
                if (this.current) this.show(this.menuitems.indexOf(this.current));
                this.show(starter);
																			this.setCurrent(this.menu.getElement(starter))
            }.bind(this)
        })
    },
    click: function(ev, item) {
        this.parent(ev, item);
        new Event(ev).stop();
        this.show(this.menuitems.indexOf(item))
    },
    show: function(index) {
        if (!this.loaded) return;
        var image = this.imagesitems[index];
        if (image == this.curimage) return;
        image.dispose().fade('hide').inject(this.curimage || this.images.getFirst(), this.curimage ? 'after': 'before').fade('in');
        image.getElement('img').setStyle('display', 'block');
        $pick(this.curimage, image).get('tween').chain(function() {
            this.fireEvent('onShow', image)
        }.bind(this));
        this.curimage = image;
        return this
    }
});




function	doMorph(){
	var list = $$('.pic_thmbs');
list.each(function(element) {
	element.set('morph', {link : 'cancel'});
element.getParent().addEvent('click', function(){
window.location = element.get('href');
	});
oldcolor=element.getParent().getStyle('background-color');
element.getParent().addEvent('mouseenter', function(){
		element.getParent().morph({
			'background-color': '#abc83d',
			'color': '#fff'
		});

	});
	element.getParent().addEvent('mouseleave', function(){
	element.getParent().morph({
			'background-color': '#fff',
			'color': '#abc83d'
		});
	});
	});

}
window.addEvent('domready',
function() {
   // new clickSlide('clickslidenav', 'clickslidepix', 'loading', '0')
});