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

    $$('div#sites div.site a img').each(function(img){
        new Caption({
            image: img.getParent(),
            caption: 'Bild vergrößern'
        });
    });
    
    $$('#navigation a').each(function(a){
        var tween = new Fx.Tween(a, { duration: 250, wait: false });
        a.addEvents({
            'mouseover': function(){
                tween.start('padding-left', 20);
            },
            'mouseout': function(){
                tween.start('padding-left', 0);
            }
        });
    });

    $$('.sub_navigation a').each(function(a){
        if(!a.hasClass('rss_feed'))
        {
            var tween = new Fx.Tween(a, { duration: 250, transition: 'quint:out', wait: false });
            a.addEvents({
                'mouseover': function(){
                    tween.start('padding-right', 20);
                },
                'mouseout': function(){
                    tween.start('padding-right', 10);
                }
            });
        }
    });

    if($('suggest'))
    {
        var s = $('suggest');
        var slide = new Fx.Slide(s, { transition: 'quint:out', duration: 750 });
        s.setStyles({
            'height': 'auto'
        });
        slide.hide();
        
        $('link_suggest').addEvent('click', function(event){
            event = new Event(event).stop();
            slide.toggle();
        });
        
        var suggest_form = s.getElement('form');
        
        suggest_form.addEvent('submit', function(event){
            event = new Event(event).stop();
            var input_submit = suggest_form.getElement('input[type=submit]');
            
            var inputs = suggest_form.getElements('input[type=text]');
            var title = inputs[0].get('value').clean().trim();
            var url = inputs[1].get('value').clean().trim();

            if(title != '' && url != '')
            {
                input_submit.set('value','sende. . .').addClass('loading');
                
                new Request({
                    method: 'post',
                    url: ajaxURI+'suggest/',
                    onComplete: function(responseText)
                    {
                        $('suggest').parentNode.setStyle('height','auto');
                        var children = $A($('suggest').getElement('div').getChildren());
                        children.each(function(el){
                            el.setStyle('display', 'none');
                        });
                        var response = new Element('p');
                        if(responseText == 'success')
                        {
                            response.addClass('success').set('html','Vielen Dank f&uuml;r Deinen Vorschlag!<br/>Er wird schnellstm&ouml;glich gepr&uuml;ft und freigeschaltet.');
                        }
                        else
                        {
                            response.addClass('error').set('html','Der eingereichte Link wurde bereits vorgeschlagen oder bereits verlinkt.');
                        }
                        response.set('opacity',0).inject(suggest_form,'after').fade(1);
                        (function(){
                            slide.toggle().chain(function(){
                                slide.hide();
                                response.destroy();
                                children.each(function(el){
                                    el.setStyle('display', 'block');
                                });
                                input_submit.set('value','abschicken').removeClass('loading');
                            });
                        }).delay(4000);
                        inputs.each(function(input){
                            input.set('value','');
                        });
                    }
                }).send('title='+title+'&url='+url);
            }            
        });
    }
   
    /**
     * Kommentare
     */
    
    var trigger = $$('p.comment');
    var close = $$('a.close');
    var commentContainer = $$('div#content div.comments');
    var commentForms = $$('div.comments form');

    var slides = [];
    state_slides = [];
    commentContainer.each(function(container,i){
        if(trigger[i] && close[i])
        {
            slides[i] = new Fx.Slide(container, { transition: Fx.Transitions.Expo.easeOut });
            slides[i].hide();
            
            trigger[i].addEvent('click', function(event)
            {
                event = new Event(event).stop();
                slides[i].toggle().chain(function(){
                    setState(i);
                });
            });
            close[i].addEvent('click', function(event)
            {
                event = new Event(event).stop();
                slides[i].toggle().chain(function(){
                    setState(i);
                });
            });
        }
        commentForms[i].addEvent('submit', function(event)
        {
            event = new Event(event).stop();
            var form = this;
            
            var inputs = $A(commentForms[i].getElements('input'));
            
            var postData = $H({
                site: inputs[0].get('value'),
                user: inputs[1].get('value'),
                email: inputs[2].get('value'),
                webseite: inputs[3].get('value'),
                kommentar: commentForms[i].getElement('textarea').get('value')
            });
            
            inputs[4].set('value','abschicken').removeClass('loading');
            
            new Request({
                method: 'post',
                url: ajaxURI+'comment/',
                onComplete: function(responseText)
                {
                    var response = new Element('p');
                    if(responseText == 'success')
                    {
                        response.addClass('success').set('html','Vielen Dank f&uuml;r Deinen Vorschlag!<br/>Er wird schnellstm&ouml;glich gepr&uuml;ft und freigeschaltet.');
                    }
                    response.set('opacity',0).inject(form,'after').fade(1);
                    
                    inputs.each(function(input,i){
                        if(i > 0)
                        {
                            input.set('value','');
                        }
                    });
                    commentForms[i].getElement('textarea').set('value','');
                    
                    inputs[4].set('value','abschicken').removeClass('loading');
                }
            }).send(postData.toQueryString());
            
        });
    });
    
    var setState = function()
    {
        if(state_slides)
        {
            //
        }
        
    }
    
    
});

var niceHover = new Class({
   
   initialize: function(options)
   {
        this.options = $H({
            parent: document.body,
            elements: 'a',
            backgroundColors: null,
            fxDuration: 250,
            cssFloat: null,
            fontColorActive: null
        }).extend(options || $H());

        this.duplicate();
        this.attach();
    },
    getHoverElements: function()
    {
        return this.options.parent.getElements(this.options.elements);
    },
    duplicate: function()
    {
        var elements = this.getHoverElements();
        var fx = [];
        this.container = [];
        elements.each(function(el,i){
            
            var target = el.getParent();
            this.container[i] = new Element('span');
            var clones = [el.clone(),el.clone()];
            
            var css = el.getStyles('display','float');

            var dim = el.getCoordinates();
            
            this.container[i].replaces(el).setStyles({
                overflow: 'hidden',
                height: dim.height,
                width: dim.width,
                float: this.options.cssFloat,
                display: 'inline-block',
                position: 'relative'
            });
            
            clones[0].setStyles({
                width: '100%',
                display: 'inline-block'
            }).inject(this.container[i]);
            clones[1].setStyles({
                width: '100%',
                display: 'block',
                color: this.options.fontColorActive
            }).inject(this.container[i]);
            
            fx[i] = new Fx.Tween(clones[0], { duration: this.options.fxDuration, wait: false });
            
            this.container[i].addEvents({
                'mouseover': function(){
                    fx[i].start('margin-top',dim.height*-1);
                },
                'mouseout': function(){
                    fx[i].start('margin-top',0);
                }
            });
        }, this);
    },
    attach: function()
    {
        var elements = this.getHoverElements();
        var fx = [];
        this.container.each(function(con,i){
            el = con.getLast();
            if(this.options.backgroundColors)
            {
                fx[i] = new Fx.Tween(el, { duration: this.options.fxDuration, wait: false });
                con.addEvents({
                    'mouseover': function(){
                        fx[i].start('background-color',this.options.backgroundColors[0]);
                    }.bind(this),
                    'mouseout': function(){
                        fx[i].start('background-color',this.options.backgroundColors[1]);
                    }.bind(this)
                });
            }
        }, this);
    }
   
});


/**
 * Captions
 */

var Caption = new Class({

    initialize: function(data)
    {
        this.image = data.image;
        if(data.image.tagName != 'img')
        {
            this.image = data.image.getElement('img');
        }
        this.wrapImage(data);
        this.attach();
    },
    
    wrapImage: function(data)
    {
        var dimensions = data.image.getCoordinates();
        var padding = this.image.getStyle('padding');
        var caption = new Element('div').inject(
            new Element('div').setStyles({
                position: 'relative',
                height: dimensions.height,
                overflow: 'hidden'
            }).wraps(data.image)
        ).addClass('caption').set('html', data.caption).setStyles({
            opacity: 0,
            width: dimensions.width,
            margin: padding
        });
        this.wrapper = caption.getParent();
    },
    
    attach: function(data)
    {
        var caption = this.wrapper.getElement('div');
        var fx = new Fx.Morph(caption, { duration: 200, wait: false });
        this.wrapper.addEvents({
            'mouseover' : function()
            {
                fx.start({
                    'height' : 20,
                    opacity: 0.6
                });
            },
            'mouseout': function()
            {
                fx.start({
                    'height' : 0,
                    opacity: 0
                });
            }
        });
    }
    
});