Prototype.LoadLibrary('vdl2');

/******************************************************************************/
/*  ICE
/******************************************************************************/
ICE = Class.create({
    initialize: function(){

    }
});

ICE.folder_path = '/js/chart/';
/******************************************************************************/
/*  ICE.Chart
/******************************************************************************/
Object.extend(ICE, {
    Chart: Class.create({
        initialize: function(container){
            this.container = $(container);
            this.data = new VDL2.Utils.XmlTool(ICE.folder_path + 'chart.xml', ICE.folder_path + 'chart.xsl');
        },
        bars: $A(new Array()),
        buttons: {},
        paint: function(){
            this.container.innerHTML = this.data.getXslTransform();

            $A(this.container.getElementsByTagName('script')).each(function(script){
                eval(script.text);
            });

            this.buttons.left = $('chart_left_button');
            this.buttons.right = $('chart_right_button');

            if(this.bars.length > 12){
                this.bars_scroll_container = document.getElementById('bars_container').parentNode;
                this.dates_scroll_container = document.getElementById('dates_container').parentNode;

                this.scroll_delta = this.bars_scroll_container.scrollWidth - this.bars_scroll_container.offsetWidth;

                this.bars_scroll_container.scrollLeft = this.scroll_delta;
                this.dates_scroll_container.scrollLeft = this.scroll_delta;

                this.change_button_state('left', 'enable');
            }
            this.show_bars();
        },
        change_button_state: function(button, state){
            if(state == 'enable'){
                this.buttons[button].removeClassName('button-' + button + '-disabled');
                this.buttons[button].removeClassName('button-disabled');
            }
            else{
                this.buttons[button].addClassName('button-' + button + '-disabled');
                this.buttons[button].addClassName('button-disabled');
            }

            var me = this;
            if(state == 'enable'){
                Event.observe(this.buttons[button], 'mousedown', function(){
                    me.slide_timer = setInterval(function(){me.slide_chart((button=='left'?-1:1))}, 1);
                })
                Event.observe(document, 'mouseup', function(){
                    clearInterval(me.slide_timer);
                })
            }
            else{
                Event.stopObserving(this.buttons[button], 'mousedown');
                Event.stopObserving(document, 'mouseup');

                clearInterval(me.slide_timer);
            }
            this.buttons[button].state = state;
        },
        slide_timer: null,
        slide_chart: function(direction){
            var scroll_value = this.bars_scroll_container.scrollLeft + (5 * direction);
            if(scroll_value < 0){
                scroll_value = 0;
            }
            else if(scroll_value > this.scroll_delta){
                scroll_value = this.scroll_delta;
            }

            this.bars_scroll_container.scrollLeft = scroll_value;
            this.dates_scroll_container.scrollLeft = scroll_value;

            if(scroll_value <= 0 && direction == -1 && this.buttons.left.state != 'disable'){
                this.change_button_state('left', 'disable');
            }
            else if(scroll_value >= this.scroll_delta && direction == 1 && this.buttons.right.state != 'disable'){
                this.change_button_state('right', 'disable');
            }

            if(scroll_value > 0 && this.buttons.left.state != 'enable'){
                this.change_button_state('left', 'enable');
            }
            else if(scroll_value < this.scroll_delta && this.buttons.right.state != 'enable'){
                this.change_button_state('right', 'enable');
            }
        },
        append_bar: function(bar){
            this.bars.push(bar);
        },
        show_bars: function(){
            this.bars.each(function(bar){
                bar.container.style.display = 'block';
                bar.show();
                //var delay = 125 * ((ice_chart.bars.length - bar.index)+1);
                //window.setTimeout(function(){
                    //bar.container.setStyle('display:block; top:115px;');
                //}, delay);
            })
        }
    })
});

/******************************************************************************/
/*  ICE.Chart.Bar
/******************************************************************************/
Object.extend(ICE.Chart, {
    Bar: Class.create({
        initialize: function(id){
            this.max_height = document.getElementById('bars_container').offsetHeight;

            this.container = $('bar_container_' + id);
            var date_container = $('chart_bar_date_link_' + id);

            if(date_container){
                Event.observe(this.container,'mouseover', function(){
                    date_container.addClassName('link');
                })
                Event.observe(this.container,'mouseout', function(){
                    date_container.removeClassName('link');
                })
            }
            //this.index = ice_chart.bars.length;
            ice_chart.append_bar(this);
        },
        show: function(){
            this.container.style.top = this.max_height - this.container.offsetHeight;
        }
    })
});

var ice_chart = null;
Event.observe(window, 'load', function(){
    ice_chart = new ICE.Chart(document.getElementById('chart_container'));
    ice_chart.paint();
});