/***
Handles the feedback reloading
 ***/

FEEDBACK_CURRENT = 0;

var feedback = {
    setup: function(){
        var simple = $('feedback').getElement('div.simple-content');
        this.container = new Element('ul');
        this.container.inject(simple);
        var button = new Element('li',{
                class: 'feedback-button'
            });
        button.inject(this.container, 'bottom');
        var href = new Element('a', {
                href: '#',
                class: 'button reload-button',
                html: 'More feedback'
            });
        href.inject(button, 'top');
    },
    init: function(){
        this.setup();
        this.do_request();
    },
    do_request: function(){
        jsonrequest = new Request.JSON({
                url: '/api/latest-feedback/',
                onSuccess: function(list){
                    list.each(function(e){
                            // Geez, All this pointless markup is due microformats
                            var li = new Element('li', {
                                    class: 'hreview feedback-item'
                                });
                            li.inject(this.container, 'top');
                            var p = new Element('p', {
                                    class: 'reviewer vcard'
                                });
                            p.inject(li, 'top');
                            var fn = new Element('span', {
                                    class: 'fn',
                                    html: e.name + ' '
                                });
                            fn.inject(p, 'top');
                            var addr = new Element('span', {
                                    class: 'postcode',
                                    html: e.location
                                });
                            addr.inject(p, 'bottom');
                            var summary = new Element('p', {
                                    class: 'summary',
                                    html: e.body
                                });
                            summary.inject(li, 'bottom');
                        }.bind(this));
                    this.animate();
                }.bind(this)
            }).get();
    },
    animate: function(){
        var offset = 100;
        items = $$(".feedback-item");
        if(items.length > 0){                       // display the first item
            items[0].setStyles({display: 'block'});
        }
        // add action to the button
        buttons = $$(".feedback-button");
        buttons.addEvent('click', function(event){
                event.stop();
                feedback_next = FEEDBACK_CURRENT + 1;
                if(feedback_next >= items.length){
                    feedback_next = 0;
                }
                items[FEEDBACK_CURRENT].setStyle('display', 'none');
                items[feedback_next].setStyles({display: 'block'});
                FEEDBACK_CURRENT = feedback_next;
            });
    }
};


/***
Handles the animation of the masthead
 ***/
MASTHEAD_CURRENT = 0;

function masthead_reset_links(){
    // removes the on button from all links
    var masthead_items = $$('.masthead-item-anchor');
    masthead_items.each(function(item){
            item.removeClass('on');
        });
}

var masthead_movement = function(){
    MASTHEAD_CURRENT++;
    if(MASTHEAD_CURRENT >= MASTHEAD_LIST.length){
        MASTHEAD_CURRENT = 0;
    }
    // remove all on buttons
    masthead_reset_links();
    // show the on button
    var anchor_id = 'anchor-' + MASTHEAD_CURRENT;
    $(anchor_id).addClass('on');
    var masthead_items = $$('.masthead-item');
    var back = $('masthead-bg-holder');
    var front =  $('masthead-bg-transition');
    // previous bg at the front
    var masthead_previous = MASTHEAD_CURRENT - 1;
    if(masthead_previous < 0){
        masthead_previous = MASTHEAD_LIST.length - 1;
    }
    front.setStyle('background-image', 'url('+ MASTHEAD_LIST[masthead_previous] +')');
    // current bg at the back
    back.setStyle('background-image', 'url('+ MASTHEAD_LIST[MASTHEAD_CURRENT] +')');
    var mastheadTween = new Fx.Morph(front, {duration: '1000',
                                             transition: Fx.Transitions.Sine.easeOut }
        );
    mastheadTween.set({'opacity': '1'});
    mastheadTween.start({'opacity': '0'});
};


BG_WIDTH = 975;
BG_HEIGHT = 220;

var masthead = {
    addCustomEvent : function(){
        // adds click event to the controls
    },

    addHtml : function(){
        // adds holder for the background
        $$('.tagline').setStyle('position','relative');
        $$('#header p.logo').setStyle('position','relative');
        $('header').setStyles({
                height: BG_HEIGHT,
                background: 'none',
                position: 'relative'
            });
        var div_holder = new Element('div').set({'id': 'masthead-bg-holder'
            }).inject('header','top');
        div_holder.setStyles({width: BG_WIDTH,
                    height: BG_HEIGHT,
                    'background-image': 'url('+ MASTHEAD_LIST[MASTHEAD_CURRENT] +')',
                    position: 'absolute',
                    margin: 0,
                    padding: 0,
                    top: 0,
                    left: 0
                    });
        var div_transition = new Element('div').set({'id': 'masthead-bg-transition',
                                                     'html': '&nbsp;'
            }).inject('masthead-bg-holder');
        div_transition.setStyles({width: BG_WIDTH,
                    height: BG_HEIGHT,
                    'background-image': 'url('+ MASTHEAD_LIST[MASTHEAD_CURRENT] +')',
                    margin: 0,
                    padding: 0,
                    top: 0,
                    left: 0
                    });
        // adds the control for the header
        ul = new Element('ul');
        ul.addClass('masthead-controls clearfix relative');
        // Add the default one
        for(var i=0; i<MASTHEAD_LIST.length; i++){
            // Add the elements in the list
            li = new Element('li').addClass('masthead-item').inject(ul);
            anchor = new Element('a').inject(li).set({'html':'.',
                                                      'id': 'anchor-'+i,
                                                      'class':'masthead-item-anchor replaced'});
        }
        ul.inject('header');
    },

    init : function(){
        var self = this;
        self.addHtml();
        // on button for the first element
        var anchor_id = 'anchor-' + MASTHEAD_CURRENT;
        $(anchor_id).addClass('on');
        var masthead_transition = masthead_movement.create({periodical: 12000});
        masthead_transition();
    }


};

/***
Handles the areas at the bottom
***/

var locale_areas  = {
    init: function(){
        var locale_copy = $('locale-copy');
        if(locale_copy){
        var locale_anchor = new Element('a').inject(locale_copy).set({'html':'Click here for postcodes',
                                                                      'href': '#',
                                                                      'id': 'locale-anchor'});
        reveal_animation = new Fx.Reveal($('london-areas'), {duration: 500,
                                                             mode: 'horizontal',
                                                             transition: Fx.Transitions.Sine.easeIn});
        reveal_animation.dissolve();
        locale_anchor.addEvent('click', function(event){
                event.stop();
                reveal_animation.reveal();
            });
        }
    }
};

/***
Handles the latest jobs ticker
***/

var latest_jobs = {
    setup: function(){
        this.latest = $('latest-works-container');
        this.list_container = new Element('ul');
        this.latest.adopt(this.list_container);
    },
    init: function(){
        if(!('latest' in this)){
            // execute the setup and json call  only once
            this.setup();
            this.do_request();
        }
    },
    do_request: function(){
        jsonrequest = new Request.JSON({
                url: '/api/latest-jobs/',
                onSuccess: function(list){
                    list.each(function(e){
                            // create element
                            var item_em = new Element('em', {html: e.location});
                            var item = new Element('li', {html: '&hellip; '+ e.body});
                            item_em.inject(item, 'top');
                            // inject it into the list
                            item.inject(this.list_container, 'bottom');
                        }.bind(this));
                    this.animate();
                }.bind(this)
            }).get();
    },
    animate: function(){
        var latestFx = new Fx.Scroll(this.latest, {duration: 65000,
                                                   transition: Fx.Transitions.linear
            }).toBottom().chain(function(){
                    var content_copy = this.list_container.clone();
                    content_copy.inject(this.list_container, 'after');
                    this.list_container = content_copy;
                    this.animate();
                }.bind(this));
    }
};

/********************
New pop up windows

var popup = {
    init: function(){
        var elements = $$('a[rel=external]');
        elements.addEvent('click', function(e){
                new Event(e).stop();
                var url = this.getProperty('href');
                var openPopup = new Browser.Popup(url ,{
                        width: 1024,
                        height: 768,
                    });
            });
    }
};
 ******************/


window.addEvent('domready', function() {
        $$('body').addClass('jsenabled');    // Enables css when js is enabled
        feedback.init();
        masthead.init();
        locale_areas.init();
        latest_jobs.init();
        //popup.init();
    });