var graph_object = new Array();

function findGraphs()
{
    var graphs = document.getElementsByClassName('graph');    
    
    for (var i = 0; i < graphs.length; i++)
    {
        if (!graphs[i].getAttribute('attached'))
        {
            graphs[i].setAttribute('attached', 'true');
            graph_object = new Graph(graphs[i].id, 'distance');               
        }
    }
}

function Graph(graph, type)
{
    this.graph = $(graph);

    this.graph_chart = this.graph.getElementsByTagName('ul')[0];
    this.graph_chart_left = 0;
    this.graph_bars_html = this.graph_chart.innerHTML;    
    this.graph_bars  = this.graph_chart.getElementsByTagName('li');
    this.bar_width   = this.graph_bars[0].getWidth();
    
    // the sixty compensates for the padding/margin applied to the graph, i know its ghetto
    this.graph_width = this.graph.getWidth() - 60;
    this.graph_chart_width = (this.graph_bars.length*this.bar_width);
    this.graph_chart.style.width = this.graph_chart_width  + 'px';
        
    this.legend_left  = this.graph.getElementsByClassName('float_left')[0];
    this.legend_right = this.graph.getElementsByClassName('float_right')[0];
    
    this.original_text_left  = this.legend_left.innerHTML;
    this.original_text_right = this.legend_right.innerHTML;
    
    this.updateScrollNav();
    this.bind();
}

Graph.prototype.bind = function ()
{
    for (var i = 0; i < this.graph_bars.length; i++)
    {
        a_tag = this.graph_bars[i].getElementsByTagName('a')[0];
        var o = this;
        
        Event.observe(a_tag, 'click', function() {
    			return o.click(this);
    	  });
    }
}

Graph.prototype.click = function (a_tag)
{
    parent_li = a_tag.parentNode;
    
    for (var i = 0; i < this.graph_bars.length; i++)
    {
        if (this.graph_bars[i] == parent_li)
        {
            route_viewer.elevationMarker(i);       
        }
    }
    
    return false;
}

Graph.prototype.scrollRight = function ()
{   
    this.graph_chart_left = this.graph_chart.style.left.substr(0,(this.graph_chart.style.left.length-2))*1;
    this.hidden_width = this.graph_chart_left;
                       
    if (-this.hidden_width >= this.graph_width)
    { 
        this.graph_chart_left = this.graph_chart_left + this.graph_width;
        this.move_by = this.graph_width;
    }
    else
    {
        this.move_by = -this.graph_chart_left;
        this.graph_chart_left = 0;
    }
    
    // this.graph_chart.style.left = graph_chart_left + 'px';          
    new Effect.MoveBy(this.graph_chart, 0, this.move_by);
    this.updateScrollNav();
}

Graph.prototype.scrollLeft = function ()
{      
    this.graph_chart_left = this.graph_chart.style.left.substr(0,(this.graph_chart.style.left.length-2))*1;
    var hidden_width = this.graph_chart_width + this.graph_chart_left - this.graph_width;
                           
    if (hidden_width > this.graph_width)
    {
        this.graph_chart_left = this.graph_chart_left - this.graph_width;
        this.move_by = this.graph_width;
    }
    else
    {
        this.graph_chart_left = this.graph_chart_left - hidden_width;
        this.move_by = hidden_width;
    }
    
    // this.graph_chart.style.left = this.graph_chart_left + 'px';
    new Effect.MoveBy(this.graph_chart, 0, -this.move_by);
    this.updateScrollNav();
}

Graph.prototype.updateScrollNav = function ()
{
    if (this.graph_chart_left >= 0)
    {
        this.legend_left.innerHTML = this.original_text_left;    
    }
    else if (this.graph_chart_left < 0)
    {
        this.legend_left.innerHTML = '<a href="javascript:;" onclick="graph_object.scrollRight();">&lt; previous</a>';    
    }
    
    if (this.graph_chart_left + this.graph_chart_width > this.graph_width)
    {
        this.legend_right.innerHTML = '<a href="javascript:;" onclick="graph_object.scrollLeft();">next &gt;</a>';
    }
    else if (this.graph_chart_left + this.graph_chart_width <= this.graph_width)
    {
        this.legend_right.innerHTML = this.original_text_right;        
    }
    
    if (this.graph_chart_width < this.graph_width)
    {
      this.legend_right.style.marginRight = (this.graph_width - this.graph_chart_width) + 'px';
    }         
}

Graph.prototype.fitGraph = function ()
{
    // this.bar_width = Math.ceil(1+(this.graph_bars.length/this.graph_width));
    // 
    // for (var i = 0; i < this.graph_bars.length; i++)
    // {
    //     this.graph_bars[i].style.width = this.bar_width+'px';
    // }            
}