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

    new ProjectSlider($('ProjectHolder'));
 
    new Balloon({
        maxLength: 35
    });
    
    if($('ContactForm_ContactForm'))
    {
        var f = $('ContactForm_ContactForm');
        f.addEvent('submit', function(e){
            e.stop();
            
            var postData = $H();
            
            f.getElements('input[type=text],textarea').each(function(el){
                postData.set(el.name, el.get('value'));
            });
            
            new Request({
                // TODO url, qnd validation
                url: base_url,
                onSuccess: function()
                {
                    f.fade(0);
                    (function(){
                        new Element('p',{
                            html: 'Vielen Dank für Ihre Nachricht!'    
                        }).replaces(f).set('opacity', 0).fade(1);
                    }).delay(1000);
                    
                }
            }).send(postData.toQueryString());
        });
    }
 
});

var ProjectSlider = new Class({

    options: $H({
        arrowStyles: {
            background: '#3E91C4',
            cornerRadius: 5,
            height: 30,
            lineCap: 'round',
            lineJoin: 'round',
            lineWidth: 5,
            width: 25
        },        
        buttonStyles: {
            background: '#e5e5e5',
            cornerRadius: 4,
            height: 40,
            width: 40
        },
        fxDuration: 500
    }),        

    initialize: function(container, options)
    {
        this.container = $(container);
        if(!this.container)
        {
            return;
        }        
        this.contentContainer = this.container.getElement('.contents');
        this.options.extend(options || {});

        this.busy = false;
        this.current = 0;
        this.projects = this.container.getElements('.project');
        this.elementCount = this.projects.length;

        this.setWrapperSize();

        this.createButtons();
    },
    
    setWrapperSize: function()
    {
        var width = this.projects[0].getWidth() * this.elementCount;

        this.contentContainer.setStyle('width', width);
    },
    
    createButtons: function()
    {
        var firstImage = this.projects[0].getElement('img');

        var imageSize = firstImage.getCoordinates(this.container);
        var position = firstImage.getPosition();
        
        // LEFT BUTTON        
        var buttonLeft = new Element('a', {
            'class': 'project-button-left',
            href: '#'
        });
        
        var wrapperLeft = new Element('div', {
            'class': 'button-wrapper',
            events: {
                'click': this.prev.bindWithEvent(this),
                'mouseover': function(){
                    this.getElement('a').fade(1);
                },
                'mouseout': function(){
                    this.getElement('a').fade(0);
                }
            },
            styles: {
                left: 0
            }
        }).inject(this.container).grab(buttonLeft);

        // RIGHT BUTTON
        var buttonRight = new Element('a', {
            'class': 'project-button-right',
            href: '#'
        }).inject(this.container);
        
        var wrapperRight = new Element('div', {
            'class': 'button-wrapper',
            events: {
                'click': this.next.bindWithEvent(this),
                'mouseover': function(){
                    this.getElement('a').fade(1);
                },
                'mouseout': function(){
                    this.getElement('a').fade(0);
                }
            },
            styles: {
                right: 0
            }
        }).inject(this.container).grab(buttonRight);

        $$(buttonLeft, buttonRight).setStyles({
            opacity: 0,
            top: ((imageSize.height / 2) - (buttonLeft.getHeight() / 2)).round()
        }).addEvent('click', function(e){
            e.stop();
            this.getParent().fireEvent('click');
        });
        
        $$(wrapperLeft, wrapperRight).setStyles({
            height: imageSize.height,
            top: imageSize.top,
            width: (imageSize.width/4).round()
        });
    },

    prev: function()
    {
        var duration = this.current == 0 ? (this.elementCount-1) * this.options.fxDuration : this.options.fxDuration;
        this.current = this.current - 1 >= 0 ? this.current - 1 : this.elementCount - 1;
        this.scroll(duration);
    },
    
    next: function()
    {
        var duration = this.current == this.elementCount-1 ? (this.elementCount-1) * this.options.fxDuration : this.options.fxDuration;        
        this.current = this.current + 1 >= this.elementCount ? 0 : this.current + 1;
        this.scroll(duration);
    },
    
    scroll: function(duration)
    {
        var pos = this.current * this.contentContainer.getElement('div').getWidth() * -1;

        if(duration > this.options.fxDuration)
        {
            this.contentContainer.setStyle('opacity', .75);
        }

        new Fx.Morph(this.contentContainer, {
            duration: duration
        }).start({
            left: pos,
            opacity: .75
        }).chain(function(){
            new Fx.Tween(this.contentContainer, {
                duration: (this.options.fxDuration/2)
            }).start(
                'opacity', 1
            );
        }.bind(this));
    }
    
});