var ExtCoverFlow = {};

ExtCoverFlow.DateSelector = new Class({
    Implements: [Events,Options],

    options: {
        link_selector: 'a',
        on_selector: 'on'
    },

    initialize: function(element, options){
        if(!element){
            return false;
        }

        this.element = $(element);
        this.setOptions(options);

        this.dates = this.element.getElements(this.options.link_selector);
        this.current_index = this.dates.hasClass(this.options.on_selector).indexOf(true);
        if(this.current_index === -1){
            this.current_index = 0;
        }

        // add click event to each decade
        this.dates.each(function(date,index){
            date.addEvent('click', this.click.bindWithEvent(this, index));
        },this);
    },

    toElement: function(){
        return this.element;
    },

    click: function(e, index){
        e.stop();
        this.select(index);
        this.fireEvent('clickSelect',[index]);
    },

    select: function(new_index){
        if(this.current_index === new_index){
            this.dates[new_index].addClass(this.options.on_selector);
            return;
        }
        this.dates[this.current_index].removeClass(this.options.on_selector);
        this.dates[new_index].addClass(this.options.on_selector);
        this.current_index = new_index;
    }

});

if(!Fx.Scroll.scrollIntoView){
    Fx.Scroll.implement({
        scrollIntoView: function(el, axes, offset){
            axes = axes ? $splat(axes) : ['x','y'];
            var to = {};
            el = $(el);
            var pos = el.getPosition(this.element);
            var size = el.getSize();
            var scroll = this.element.getScroll();
            var containerSize = this.element.getSize();
            var edge = {
                x: pos.x + size.x,
                y: pos.y + size.y
            };
            ['x','y'].each(function(axis) {
                if (axes.contains(axis)) {
                    if (edge[axis] > scroll[axis] + containerSize[axis]) to[axis] = edge[axis] - containerSize[axis];
                    if (pos[axis] < scroll[axis]) to[axis] = pos[axis];
                }
                if (to[axis] == null) to[axis] = scroll[axis];
                if (offset && offset[axis]) to[axis] = to[axis] + offset[axis];
            }, this);
            if (to.x != scroll.x || to.y != scroll.y) this.start(to.x, to.y);
            return this;
        }
    });
}

if(!Fx.Scroll.scrollToCenter){
    Fx.Scroll.implement({
        scrollToCenter: function(el, axes, offset){
            axes = axes ? $splat(axes) : ['x', 'y'];
            el = $(el);
            var to = {},
                pos = el.getPosition(this.element),
                size = el.getSize(),
                scroll = this.element.getScroll(),
                containerSize = this.element.getSize(),
                edge = {
                    x: pos.x + size.x,
                    y: pos.y + size.y
                };
                
            ['x','y'].each(function(axis){
            	if(axes.contains(axis)){
            	    to[axis] = pos[axis] - (containerSize[axis] - size[axis])/2;
            	}
            	if(to[axis] == null) to[axis] = scroll[axis];
            	if(offset && offset[axis]) to[axis] = to[axis] + offset[axis];
            }, this);
            if (to.x != scroll.x || to.y != scroll.y) this.start(to.x, to.y);
            return this;
        }
    });
}

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

    var decade_container = $('Decade'),
        yearrange_container = $('YearRange'),
        yearrange_lists = yearrange_container.getElement('.yearrange_lists'),
        yearrange_wrap = yearrange_container.getElement('.yearrange_wrap'),
        year_highlight = $('content').getElement('strong');

    var updateHighlight = function(element, text){
        if(!element){return false;}
        element.set('text',text);
    }

    //setup scrolling of year range
    var wrap_width = 0;
    yearrange_container.getElements('ul').each(function(elem){
        wrap_width += (elem.getSize().x);
    });

    yearrange_wrap.setStyle('width',wrap_width);
    var yearRangeScroll = new Fx.Scroll(yearrange_lists, {
        offset: {x:0,y:0},
        link:'cancel'
    }).start(0,0);

    var scroll_to, selected_range, selected_year;
    var cfDecade = new ExtCoverFlow.DateSelector(decade_container, {
        link_selector: 'a',
        onClickSelect: function(index){
            year_ranges.removeClass('on');
            selected_range = year_ranges[index].addClass('on');
            selected_year = cfYears.dates.indexOf(selected_range.getElement('a'));
            cfYears.select(selected_year);
            scroll_to = cfYears.dates[selected_year];
            //yearRangeScroll.scrollIntoView(scroll_to,'x');            
            yearRangeScroll.scrollToCenter(scroll_to.getParent('ul'), 'x');
            updateHighlight(year_highlight, scroll_to.get('text'));
            cf_swf.remote('setPosition', selected_year);
        }
    });

    var year_ranges = yearrange_container.getElements('ul');
    var cfYears = new ExtCoverFlow.DateSelector(yearrange_container, {
        onClickSelect: function(index){
            year_ranges.removeClass('on');
            selected_range = this.dates[index].getParent('ul').addClass('on');
            cfDecade.select(year_ranges.indexOf(selected_range));
            scroll_to = this.dates[index];
            //yearRangeScroll.scrollIntoView(scroll_to,'x');
            yearRangeScroll.scrollToCenter(scroll_to.getParent('ul'), 'x');
            updateHighlight(year_highlight, scroll_to.get('text'));
            cf_swf.remote('setPosition', index);
        }
    });

    var decade, year, scroll_to_position;
    var cf_swf = new Swiff('flash/coverflow.swf?noCache='+Math.random(),{
        width: '590px',
        height: '550px',
        container: $('coverflow'),
        params:{
            scale: 'noScale',
            salign: 'lt'
        },
        vars: {
            coverConfig: 'flash/coverConfig.xml',
            coverFeed: 'flash/coverFeed.xml',
            current: 0
        },
        callBacks: {
            'selected': function(index){
                year_ranges.removeClass('on');
                selected_range = cfYears.dates[index].getParent('ul').addClass('on');
                cfDecade.select(year_ranges.indexOf(selected_range));
                cfYears.select(index);
                scroll_to = cfYears.dates[index];
                //yearRangeScroll.scrollIntoView(scroll_to,'x');
                yearRangeScroll.scrollToCenter(scroll_to.getParent('ul'), 'x');
                updateHighlight(year_highlight, scroll_to.get('text'));
            }
        }
    });

});