var g_graphload=false;
var time=[];
var day=[];

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); }

function getCookieTab() {
    var index=getIndexForId($.cookie('tabs'));
    return (index==-1) ? 0 : index;
};

function getIndexForId(searchId){
    var index = -1;
    var count=0;
    $("#tabs .ui-tabs-nav > li > a").each(function(){
        if (searchId == $(this).attr("id")) index=count;
        count++;
    });
    return index;
}

function getGraphJS(a, s) {
    $("#graph-load").show();
    $("#graph-content").hide();
    $.ajax({
        data : ({'r': "extras", 't': 'graphs', 'a': a, 's': s}),
        success : function(resp) {
            $("#graph-load").hide();
            $("#graph-content").show();
            eval(resp);
        }
    });
}
    
function scaleLookup(type) {
    var ar=null;
    if (type=="apratesfc") {
        ar=new Array('None', 'Light', 'Showers', 'Rain', 'Heavy');
    }
    else if (type=="vissfc") {
        ar=new Array('Fog', 'Poor', 'Good', 'Unlim');
    }
    return ar;
}

function dataLookup(type, value) {
    var ar=null;
    if (type=="apratesfc") {
        ar= new Array('None', 'Light Showers', 'Showers', 'Rain', 'Heavy rain');
        if (value==0) value='None';
    }
    else if (type==="vissfc") {
        ar=new Array('Fog', 'Poor', 'Good', 'Unlimited');
        
    }
    return (ar ? $.inArray(value, ar) : value);
}

Raphael.fn.drawGrid = function(x, y, w, h, wv, hv, color) {
    color = color || "#fff";
    var path = ["M", x, y], daypath = ["M", x, y], rowHeight = h / hv, columnWidth = w / wv;
    var strokewidth=1;
    for (var i = 0; i <= hv; i++) {
        path = path.concat(["M", x, y + i * rowHeight, "L", x + w, y + i * rowHeight]);
    }
    for (var i = 0; i <= wv; i++) {
        path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
    }
    this.path(path.join(",")).attr({stroke: color, fill: "#fff", "stroke-width": strokewidth}).toBack();
    strokewidth=6;
    for (var i = 4; i <wv; i+=4) {
        daypath = daypath.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
    }
    this.path(daypath.join(",")).attr({stroke: color, fill: "#fff", "stroke-width": strokewidth}).toBack();       
};

Raphael.fn.arrow = function (x, y, size, dir) {
    var path = ["M", x, y, "L", x+6, y, "L", x+6, y+12, "L", x+9, y+12, "L", x+3, y+18, "L", x-3, y+12,"L", x, y+12, "L", x, y, "Z"];
    return this.path(path).rotate(dir);
};

$.fn.stripTags = function() {
    return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};

GraphBase = Class({
    el: null, c: null, w: null, h: null,
    tg: 16, bg: 16, cols: 27, rows: 4, max: 0,
    style: {font: '9px Fontin-Sans, Arial', fill: "#666"},
    vertstyle: {font: '11px Fontin-Sans, Arial', fill: "#666"},
    left: null, title: null, units: null, atitle: null,
    tablediv: null,
    
    initialize: function(raphael, el, width, height, left, title, units, atitle) {
        this.el = el;
        this.w=width;
        this.h=height;
        this.c=raphael;
        this.left=left;
        this.title=title;
        this.units=units;
        this.atitle=atitle;
        this.tablediv=$("#tables");
    },
    drawGrid: function() {
        var gridh=this.h-this.tg-this.bg;
        if (this.h <=60) this.rows=1;
        this.c.drawGrid(0, this.tg, this.w+2, gridh, this.cols, this.rows, "#ccc");
    }
});

GraphAxis = Class(GraphBase, {
    length: null, 
    line: {stroke: "#ccc", "stroke-width": 2, "stroke-linejoin": "round"},
    yaxis: null,
    
    draw: function(scale, max, min) {
        var that = this;
        var height = this.h-this.tg-this.bg;
        var width = (this.left) ? this.w : 0;
        var yaxis = that.c.path("M "+width+" "+that.tg+"L"+width+" "+height-that.bg+" z").attr(that.line);
        var title = (that.atitle) ? that.atitle : that.title;
        var axislabel=title+" ("+that.units+")";
        if (!scale) that.c.text((that.left) ? 10 : 26, (height/2)+that.tg, axislabel).attr(that.vertstyle).rotate((that.left) ? 270 : 90, true);
        if (scale) {
            for (var i=0; i<scale.length; i++) {
                var notch = that.tg+height-(i*(height/(scale.length-1)));
                var axistag = scale[i];
                that.c.text((that.left) ? width-18 : width+28, notch, axistag).attr(that.style); 
            }
        }
        else {
            for (var i=0; i <= 4; i++) {
                var notch = i*(height/4)+that.tg;
                var axisno = Math.round(((max)-(((max-min)/4))*i)*Math.pow(10,1))/Math.pow(10,1);
                that.c.text((that.left) ? width-10 : width+10, notch, axisno.toString()).attr(that.style); 
            }
        }
    }
});


StdGraph = Class(GraphBase, {
    datael: null, plotted: false,
    a: null, s: null, path: null, bgpath: null, scale: null,
    f: null, fsty: {fill: "#666", stroke: "#fff", "stroke-width": 2, "opacity": 0.8},
    labelstyle: {font: '10px Fontin-Sans, Arial', fill: "#fff"},
    label: null,
    labeltitle: null,
    max: 0, min: 0, wavemax: 0, count: 0, X: 0, Y: 0, elw: 0,
    gtitle: null, gunits: null, glayer: 0, layercount: 0,
    time: new Array(),
    day: new Array(),
    data: new Array(),
    path: null,
    multi: null,
    dataSuccess: false,
    ggrad: {
        blue: "90-#2e4771-#94a1b6",
        red: "90-#e12424-#ed9c9c",
        turq: "90-#66b2e5-#bed7e8",
        green: "90-#007f00-#6ebc5e"
    },
    color: {
        blue: "#2e4771",
        dblue: "#2e4771",
        red: "#e12424",
        turq: "#66b2e5",
        dturq: "#66b2e5",
        green: "#007f00",
        white: "#fff"
    },
    gcolor: null,
    labelvis: false, moveto: false, last: 0,
 
    initGraph: function(a, s, datael, glayer, layercount, gcolor) {
        var time=[];
        var day=[];
        this.a = a;
        this.s = s;
        this.datael=datael;
        this.glayer=glayer;
        this.layercount=layercount;
        this.gcolor=gcolor;
        this.multi=(this.datael == "windma" || this.layercount<=1) ? false : true;
        this.getData();
        if (this.data) {
            this.setScale();
            this.X = this.w / this.data.length;
            var range = this.max-this.min; 
            this.Y = (this.h-this.bg-this.tg)/range;
            //this.elw = this.w/(this.cols*2);
            this.elw = this.w/this.cols;
            this.label=this.c.set();
            this.label.push(this.c.text(60, 12, "No data").attr(this.labelstyle));
            this.label.push(this.c.text(60, 27, "No data").attr(this.labelstyle).attr({fill: this.color.turq}));
            this.label.hide();
            //this.f = this.c.rect(10, 10, 180, 30, 5).attr(this.fsty).hide();
            this.f = this.c.popup(this.elw, this.h/2, this.label, "left-middle").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7}).hide();
            this.drawAxis();
            this.dataSuccess=true;
        }
    },
    getData: function() {
        var data=[];
        $("."+this.datael, this.tablediv).each(function () {
            var el = ($(this).text());
            if (el == "--" || el =="nan" || el =="n/a") el=0;  
            data.push(el);
        });
        this.data=data;
    },
    
    setScale: function() {
        var max=min=0;
        this.scale = scaleLookup(this.datael);
        if (this.scale) {
            //category based scale axis
            this.max=this.scale.length-1;   
        }
        else {
            //number based scale axis
            max = Math.max.apply(Math, this.data);
            min = Math.min.apply(Math, this.data);
            max = Math.ceil(max/5)*5;
            min = Math.floor(min/5)*5;
            
            var mod5 = ((max-min)/4);
            mod5=mod5%5;
            if (mod5 !=0) {
                max = Math.ceil(max/10)*10;
                min = Math.floor(min/10)*10;
                if (((max-min)/4)%10!=0) {
                    max = Math.ceil(max/20)*20;
                    min = Math.floor(min/20)*20;
                    //if (((max-min)/4)%20!=0) min=0;
                }
            }
            this.max=max;
            this.min=min;
        }    
    },
    drawAxis: function() {
        var draw=false;
        if (this.layercount <= 2) draw=true;
        if (this.layercount == 4 && this.glayer > 1) draw=true;
        if (this.layercount == 3 && this.glayer > 0) {
            draw=true;
            this.left=(this.left) ? false : true;   
        }
        if (draw) {
            var r = Raphael(this.el+"axis", 36, this.h);
            var gaxis = new GraphAxis(r, this.el+"axis", 36, this.h, this.left, this.title, this.units, this.atitle);
            gaxis.draw(this.scale, this.max, this.min);
        }
    },
    draw: function() {
        var that=this;
        var leave_timer;
        var plotObjects = new Array(this.data.length);
        var moveto=true;
        var last=0;
        var blanket=that.c.set();
        that.path = that.c.path();
        that.bgpath = that.c.path().moveTo(-10, that.h-that.bg);
        for (var i = 0; i < that.data.length; i++) {
            var xb = (i*that.elw)+(that.elw/2);
            var val = dataLookup(that.datael, that.data[i]);
            var yb = Math.round((that.h-that.bg)-((val*that.Y))+(that.Y*that.min));
            last=yb;
            var h = Math.round(val*that.Y+(that.Y*Math.abs(that.min)));
            if (h > (that.h-that.bg) - yb) h = (that.h-that.bg) - yb;
            (function (c, xb, yb, data, time, day) {
                var textdata = that.plotlabelData(that, i, data);
                var textdate = that.plotlabelDate(that, i, time, day);
                var pobj = that.plot(that, i, moveto, xb, yb, h, textdata);
                plotObjects[i] = (pobj) ? pobj : null;
                moveto=false;
                if (pobj) {
                    if (that.multi) {
                        blanket.push(that.c.rect(xb-(that.elw), yb-10, that.X*2, 20).attr({stroke: "none", fill: "#fff", opacity: 0}));   
                    }
                    else {
                        blanket.push(that.c.rect(xb-(that.elw), 0, that.X*2, that.h).attr({stroke: "none", fill: "#fff", opacity: 0}));
                    }
                    var rect = blanket[blanket.length - 1];
                    var timer;
                    if (rect) {
                        if (isNaN(yb) || yb<0) yb=(that.h-that.tg)/2;
                        rect.hover(function() {
                            clearTimeout(leave_timer);
                            pobj.attr(that.styleover());
                            var popupPos="left-middle";
                            if (xb - that.f.getBBox().width < 0) popupPos = "right-middle";
                            var ppp = c.popup(xb, yb, that.label, popupPos, 1),
                                anim = Raphael.animation({
                                        path: ppp.path,
                                        transform: ["t", ppp.dx, ppp.dy]
                                    },
                                    100 * that.labelvis
                                );
                            
                            var lx = that.label[0].transform()[0][1] + ppp.dx;
                            var ly = that.label[0].transform()[0][2] + ppp.dy;
                            that.f.show().stop().animate(anim);
                            that.label[0].attr({text: textdata}).show().stop().animateWith(that.f, anim, {transform: ["t", lx, ly]}, 100*that.labelvis);
                            that.label[1].attr({text: textdate}).show().stop().animateWith(that.f, anim, {transform: ["t", lx, ly]}, 100*that.labelvis);
                            that.labelvis=true;
                        }, function () {
                            pobj.attr(that.styleout());   
                            leave_timer=setTimeout(function() {
                                that.f.hide();
                                that.label[0].hide();
                                that.label[1].hide();
                                that.labelvis=false;
                            }, 1);
                        });
                    }
                }
            })(that.c, xb, yb, that.data[i], time[i], day[Math.ceil((i+1)/4)-1]);
        }
        that.graphend(that, last);
        if (plotObjects) that.setvisindex(plotObjects, that.path, that.bgpath);
        that.f.toFront();
        that.label.toFront();
    },
    
    plotlabelData: function(that, i, data) {
        return (this.labeltitle) ? this.labeltitle+": "+data+" "+this.units : this.title+": "+data+" "+this.units;
    },
    
    plotlabelDate: function(that, i, time, day) {
        var date="";
        if (day) {
            date = time+" "+day;
        }
        else {
            date = time;
        }
        return date;
    },
    
    plot: function() {
        //override
    },
    styleover: function() {
        //override   
    },
    styleout: function() {
        //override
    },
    setvisindex: function() {
    },
    graphend: function() {
        //override     
    }
});

lineGraph = Class(StdGraph, {
    
    linestyle: function() {
        var stroke=this.gcolor;
        if (!stroke) stroke=(this.left) ? this.color.red : this.color.blue;
        return {    stroke: stroke,
                    "stroke-linejoin": "miter",
                    "stroke-width": 2,
                    "stroke-linecap": "butt"
        };
    },
    
    plot: function(that, i, moveto, xb, yb, data) {
        var pobj=null;
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 2);
        pobj = that.c.circle(xb, yb, 4).attr(that.styleout());
        return pobj;
    },
    
    styleover: function() {
        if (this.gcolor) {
            return { r: 6, fill: this.color.white, stroke: this.gcolor }
        }
        else {
            return { r: 6,  fill: this.color.white, stroke: (this.left) ? this.color.blue : this.color.red };
        }
    },
    
    styleout: function() {
        if (this.gcolor) {
            return { r: 4, fill: this.gcolor, stroke: this.color.white }
        }
        else {
            return { r: 4, fill: this.left ? this.color.blue : this.color.red, stroke: this.color.white };
        }
    },
    
    styleoutSmall: function() {
        if (this.gcolor) {
            return { fill: this.gcolor, stroke: this.color.white }
        }
        else {
            return { fill: this.left ? this.color.red : this.color.blue, stroke: this.color.white };
        }
    },
    
    setvisindex: function(pobjs, path, bgp) {
    }
});

windchillGraph = Class(lineGraph, {
    setScale: function() {
        var max=min=0;
        var data=[];
        if ($(".tmp2m", this.tablediv).length) datael = $(".tmp2m", this.tablediv);
        datael.each(function () {
            var el = ($(this).text());
            if (el == "--") el=0;  
            data.push(el);
        });
        //number based scale axis
        max = Math.max.apply(Math, data);
        min = Math.min.apply(Math, data);
        max = Math.ceil(max/5)*5;
        min = Math.floor(min/5)*5;
        var mod5 = ((max-min)/4);
        mod5=mod5%5;
        if (mod5 !=0) {
            max = Math.ceil(max/10)*10;
            min = Math.floor(min/10)*10;
            if (((max-min)/4)%10!=0) {
                max = Math.ceil(max/20)*20;
                min = Math.floor(min/20)*20;
            }
        }
        this.max=max;
        this.min=min; 
    }
});

wfaceGraph = Class(lineGraph, {
   labeltitle: "Set wave face height",
   
    linestyle: function() {
        return {
            stroke: (this.left ? this.color.blue : this.color.red),
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt",
            "stroke-dasharray": "- "
        };
    },
    
    setScale: function() {
        var max=min=0;
        //number based scale axis
        max = Math.max.apply(Math, this.data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
    }
    
});

swellobsGraph = Class(lineGraph, {
    labeltitle: "Wave height",
    
    setScale: function() {
        var max=min=0;
        //number based scale axis
        max = Math.max.apply(Math, this.data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
    }
    
});

tpGraph = Class(lineGraph, {
   
    linestyle: function() {
        return {
            stroke: this.color.red,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    styleover: function() {
        return { r: 6, fill: this.color.white, stroke: this.color.red };
    },
    
    styleout: function() {
        return { r: 4, fill: this.color.red, stroke: this.color.white };
    },
    
    setScale: function() {
        this.max=20;
        this.min=0;
    },
    
    plot: function(that, i, moveto, xb, yb, data) {
        var pobj=null;
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true || data==0) ? "moveTo" : "cplineTo"](xb, yb, 2);        
        if (data > 0) pobj = that.c.circle(xb, yb, 4).attr(that.styleout());
        return pobj;
    }
    
});

seachopGraph = Class(lineGraph, {
   
    linestyle: function() {
        return {
            stroke: this.color.green,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
   
    setScale: function() {
        var data=[];
        var datael=null;
        if ($(".bhs", this.tablediv).length) datael = $(".bhs", this.tablediv);
        datael.each(function () {
            var el = ($(this).text());
            if (el == "--" || el=="nan" || el=="n/a") el=0;  
            data.push(el);
        });
        var max=min=0;
        //number based scale axis
        max = Math.max.apply(Math, data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.green
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.color.green, stroke: this.color.white, "stroke-width": 1
        };      
    }
    
});

bhsswGraph = Class(lineGraph, {
   
    linestyle: function() {
        return {
            stroke: this.color.red,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.red
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.color.red, stroke: this.color.white, "stroke-width": 1
        };      
    },
    
    setScale: function() {
        //on the assumption that these scales are for sea and swell height only
        var data=[];
        var datael=null;
        //we know wave face will be highest -> so use this to set scale
        if (this.layercount > 2) {
            //use wface data
            if ($(".wface", this.tablediv).length) {
                datael = $(".wface", this.tablediv);
            }
            else if ($(".bhs", this.tablediv).length) {
                datael = $(".bhs", this.tablediv);
            }
            datael.each(function () {
                var el = ($(this).text());
                if (el == "--") el=0;  
                data.push(el);
            });
        }
        else {
            $(".hs").each(function () {
                var el = ($(this).text());
                if (el == "--") el=0;  
                data.push(el);
            });
        }
        var max=min=0;
        //number based scale axis
        max = Math.max.apply(Math, data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
        
    }
    
});

bhsGraph = Class(lineGraph, {
   
    linestyle: function() {
        return {
            stroke: this.color.blue,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.blue
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.color.blue, stroke: this.color.white, "stroke-width": 1
        };      
    },
    
    setScale: function() {
        var max=min=0;
        //number based scale axis
        max = Math.max.apply(Math, this.data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
    }
    
});


barGraph = Class(StdGraph, {
    
    plot: function(that, i, moveto, xb, yb, h, data) {
            var pobj = that.c.rect(xb-(that.elw/2), yb, that.elw, h).attr(that.styleout());
            return pobj;
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: (this.left) ? this.color.blue : this.color.red, "opacity": 0.5
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.left ? this.color.blue : this.color.red, stroke: this.color.white, "opacity": 0.5
        };      
    },
    
    setvisindex: function(pobjs, path, bgpath) {
        $.each(pobjs, function(i, value) {
            if (value != null) this.toBack();
        });
    }
});

imgGraph = Class(StdGraph, {
    data2: new Array(),
    data3: new Array(),
    
    linestyle: function() {
        return { stroke: this.color.green }
    },
    
    plot: function(that, i, moveto, xb, yb, h, data) {
        var pobj=null;
        if (!(that.data2[i]==0 && that.data3[i]==0)) {
            pobj = that.c.arrow(xb, yb-15, 5, that.data3[i]).attr(that.styleout());
            that.c.text(xb, that.h-6, that.data2[i]).attr({font: '10px Fontin-Sans, Arial', fill: "#666"}); 
            that.path.attr(that.linestyle());
            that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 2);
        }
        return (pobj) ? pobj : null;
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.green
        };
    },
    
    styleout: function() {
        return style = {
            stroke: this.color.white, "stroke-width": 1, fill: this.color.green
        };      
    },
    
    getData: function() {
        var that=this;
        //ensure clear arrays
        that.data=[];
        that.data2=[];
        that.data3=[];
        $("."+this.datael, this.tablediv).each(function () {
            //check for tags and strip them
            var dstr = $(this).text();
            var dar = dstr.split(":");
            if (dstr == "--" || dstr == "n/a") {
                that.data.push(0);
                that.data2.push(0);
                that.data3.push(0);
            }
            else {
                var winddat = [];
                winddat = $("> span", this).attr('class').split(' ');
                that.data.push(winddat[0]);
                that.data2.push(dar[0]);
                that.data3.push(winddat.slice(-1));
            }
        });
    },
    
    plotlabelData: function(that, i, data) {
        return (this.labeltitle) ? this.labeltitle+": "+that.data2[i]+" : "+data+" "+this.units : this.title+": "+that.data2[i]+" : "+data+" "+this.units;
    },
    
    setScale: function() {
        var data=[];
        var max=min=0;
        var that=this;
        this.scale = scaleLookup(this.datael);
        if (this.scale) {
            this.max=this.scale.length-1;   
        }
        else {
            if ($(".gstma").length > 0) {
                var windma= $(".gstma", this.tablediv);
                windma.each(function () {
                    var el=$(this).text();
                    if (el == "--") el=0;  
                    data.push(el);
                });
            }
            else {
                data=that.data;   
            }
            max = Math.max.apply(Math, data);
            min = 0;
            var wbins=[20, 40, 48, 60, 80];
            for (var i=0; i<wbins.length; i++) {
                if (wbins[i] >= (max)) {
                    this.max=wbins[i];
                    break;
                }
            }
        }
    }
});

gstmaGraph = Class(lineGraph, {
   
    linestyle: function() {
        return {
            stroke: this.color.green,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt",
            "stroke-dasharray": "- "
        };
    },
    
    plot: function(that, i, moveto, xb, yb, h, data) {
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 2);
    },
    
    setScale: function() {
        var data=[];
        var windma= $(".gstma", this.tablediv);
        windma.each(function () {
            var el=$(this).text();
            if (el == "--") el=0;  
           data.push(el);
        });
        max = Math.max.apply(Math, data);
        min = 0;
        var wbins=[20, 40, 48, 60, 80];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
    }
    
});

seadirGraph = Class(imgGraph, {

    plot: function(that, i, moveto, xb, yb, h, data) {
        var pobj=null;
        yb=-10+(that.h-that.tg)/2;
        pobj = that.c.arrow(xb, yb, 5, that.data3[i]).attr(that.styleout());
        that.c.text(xb, that.h-6, that.data2[i]).attr({font: '10px Fontin-Sans, Arial', fill: "#666"}); 
        return (pobj) ? pobj : null;
    },
    
    drawAxis: function() {
        //no axis required
    },
    
    plotlabeltxt: function(that, i, data, time, day) {
        return that.title+": "+that.data2[i]+" "+that.data3[i]+" "+that.units+"\n @ "+time+" "+day;
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.blue
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.color.blue, stroke: this.color.white, "stroke-width": 1
        };      
    }
 
});

swelldirGraph = Class(seadirGraph, {
   linestyle: function() {
        return { stroke: this.color.red }
    },
    
    styleover: function() {
        return style = {
            fill: this.color.white, stroke: this.color.red
        };
    },
    
    styleout: function() {
        return style = {
            fill: this.color.red, stroke: this.color.white, "stroke-width": 1
        };      
    }
});

linefillGraph = Class(StdGraph, {
    
    linestyle: function() {
        return {
            stroke: (this.left ? this.color.turq : this.color.blue),
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    bgstyle: function() {
        return {
            stroke: "none",
            fill: (this.left ? this.color.dturq : this.color.dblue),
            "opacity": .5   
        };
    },

    plot: function(that, i, moveto, xb, yb) {
        var pobj=null;
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 2);
        that.bgpath.attr(that.bgstyle());
        if (i==0) {
            that.bgpath["moveTo"](xb, that.h-that.bg, 2);
            that.bgpath["cplineTo"](xb, yb, 2);
        }
        else {
            that.bgpath[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 2);
        }
        pobj = that.c.circle(xb, yb, 4).attr(that.styleout());
        pobj.toFront();
        return (pobj) ? pobj : null;
    },
    
    styleover: function() {
        return style = {
            r: 6, fill: this.color.white, stroke: this.left ? this.color.turq : this.color.blue
        };
    },
    
    styleout: function() {
        return style = {
            r: 4, fill: this.left ? this.color.turq : this.color.blue, stroke: this.color.white
        };     
    },
    
    graphend: function(that, last) {
        that.bgpath["cplineTo"](that.w, last, 2);
        that.bgpath["cplineTo"](that.w, that.h-that.bg, 2);
    },
    
    setScale: function() {
        //on the assumption that these scales are for sea and swell height only
        var data=[];
        var datael=null;
        var hs=$(".hs", this.tablediv);
        //we know wave face will be highest -> so use this to set scale
        if (this.layercount > 2) {
            //use wface data
            if ($(".wface", this.tablediv).length) datael = $(".wface", this.tablediv);
            else if (hs.length) datael=hs;
            datael.each(function () {
                var el = ($(this).text());
                if (el == "--" || el=="nan" || el=="n/a") el=0;  
                data.push(el);
            });
        }
        else {
            hs.each(function () {
                var el = ($(this).text());
                if (el == "--" || el=="nan" || el=="n/a") el=0;  
                data.push(el);
            });
        }
        max = Math.max.apply(Math, data);
        var wbins=[1, 2, 4, 8, 12, 16];
        for (var i=0; i<wbins.length; i++) {
            if (wbins[i] >= (max)) {
                this.max=wbins[i];
                break;
            }
        }
        this.min=0;
    }
    
});

rainGraph = Class(StdGraph, {
    
    linestyle: function() {
        return {
            stroke: (this.left ? this.color.turq : this.color.red),
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    bgstyle: function() {
        return {
            stroke: "none",
            fill: (this.left ? this.color.dturq : this.color.red),
            "opacity": .4
        };
    },

    plot: function(that, i, moveto, xb, yb) {
        var pobj=null;
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, 4);
        that.bgpath.attr(that.bgstyle());
        that.bgpath["cplineTo"](xb, yb, 2);
        pobj = that.c.circle(xb, yb, 4).attr(that.styleout());
        pobj.toFront();
        return (pobj) ? pobj : null;
    },
    
    styleover: function() {
        return style = {
            r: 6, fill: this.color.white, stroke: this.left ? this.color.turq : this.color.red
        };
    },
    
    styleout: function() {
        return style = {
            r: 4, fill: this.left ? this.color.turq : this.color.red, stroke: this.color.white
        };     
    },
    
    graphend: function(that, last) {
        that.bgpath["cplineTo"](that.w, last, 2);
        that.bgpath["cplineTo"](that.w, that.h-that.bg, 2);
    }
});

tideGraph = Class(linefillGraph, {
    
    linestyle: function() {
        return {
            stroke: this.color.blue,
            "stroke-linejoin": "miter",
            "stroke-width": 2,
            "stroke-linecap": "butt"
        };
    },
    
    bgstyle: function() {
        return {
            stroke: "none",
            fill: this.color.dblue,
            "opacity": .5   
        };
    },
    
    styleover: function() {
        return style = {
            r: 6, fill: this.color.white, stroke: this.color.blue
        };
    },
    
    styleout: function() {
        return style = {
            r: 4, fill: this.color.blue, stroke: this.color.white
        };
    },
    
    draw: function() {
        var that=this;
        var plotObjects = new Array(this.data.length);
        var moveto=true;
        var leave_timer;
        that.path = that.c.path();
        var blanket=that.c.set();
        that.bgpath = that.c.path().moveTo(-10, that.h-that.bg);
        for (var i = 0; i < that.data.length; i++) {
            var xb = that.w*that.data[i][8];
            var yb = Math.round((that.h-that.bg)-((that.data[i][6]*that.Y))+(that.Y*that.min));
            (function (that, c, xb, yb) {

                var date=that.data[i][9];
                var pobj = that.plot(that, i, moveto, xb, yb, that.data[i][7], date.substring(0 , 5));

                moveto=false;
                plotObjects[i] = (pobj) ? pobj : null;
                if (plotObjects[i]) {
                    var tide = (that.data[i][7]) ? "High tide: " : "Low tide: ";
                    tide+=" "+that.data[i][6]+" "+that.units;
                    
                    blanket.push(that.c.rect(xb-(that.elw), 0, that.X*2, that.h).attr({stroke: "none", fill: "#fff", opacity: 0}));
                    var rect = blanket[blanket.length - 1];
                    var timer;
                    if (rect) {
                        rect.hover(function() {
                            clearTimeout(leave_timer);
                            pobj.attr(that.styleover());
                            var popupPos="left-middle";
                            if (xb - that.f.getBBox().width < 0) popupPos = "right-middle";
                            var ppp = c.popup(xb, yb, that.label, popupPos, 1),
                                anim = Raphael.animation({
                                        path: ppp.path,
                                        transform: ["t", ppp.dx, ppp.dy]
                                    },
                                    100 * that.labelvis
                                );
                            var lx = that.label[0].transform()[0][1] + ppp.dx;
                            var ly = that.label[0].transform()[0][2] + ppp.dy;
                            that.f.show().stop().animate(anim);
                            that.label[0].attr({text: textdata}).show().stop().animateWith(that.f, anim, {transform: ["t", lx, ly]}, 100*that.labelvis);
                            that.label[1].attr({text: textdate}).show().stop().animateWith(that.f, anim, {transform: ["t", lx, ly]}, 100*that.labelvis);
                            that.labelvis=true;
                            
                        }, function () {
                            pobj.attr(that.styleout());   
                            leave_timer=setTimeout(function() {
                                that.f.hide();
                                that.label[0].hide();
                                that.label[1].hide();
                                that.labelvis=false;
                            }, 1);
                        });
                    }
                }
            })(that, that.c, xb, yb);
        }
        that.bgpath["cplineTo"](that.w+10, that.h-that.bg, 16);
        that.f.toFront();
        that.label.toFront();
    },

    plot: function(that, i, moveto, xb, yb, tide, time) {
        var pobj=null;
        that.path.attr(that.linestyle());
        that.path[(i==0 || moveto==true) ? "moveTo" : "cplineTo"](xb, yb, (that.data.length>34) ? 10 : 16);
        that.bgpath.attr(that.bgstyle());
        that.bgpath["cplineTo"](xb, yb, (that.data.length>34) ? 10 : 16);
        pobj = that.c.circle(xb, yb, 4).attr(that.styleout()).toFront();
        //add labels in gutter
        if (that.data.length < 34) {
            var ypos=(tide) ? 6: that.h-6;
            that.c.text(xb, ypos, time).attr({font: '10px Fontin-Sans, Arial', fill: "#666"});
        }
        return (pobj) ? pobj : null;
    },
    
    getData: function() {
        var that=this;
        //make json request
        $.ajax({
            async: false,
            data : ({'r': "weather", 'a': this.a, 's': g_siteid, 'x': "t"}),
            success : function (json) {
                that.data=json;
            }
        });
    },
    
    setScale: function() {
        var depths=[];
        for (var i=0; i < this.data.length; i++) {
            depths[i] = this.data[i][6];
        }
        this.max = Math.ceil(Math.max.apply(Math, depths));
        this.min = Math.floor(Math.min.apply(Math, depths));
    }
    
});