// © Not on the Wires Ltd 2011

NOTW.SVGMap = Class.create({
    
    initialize: function(divName, height){
        
        $(divName).update('');
        $(divName).style.height = height+'px';
        
        this.landmasses = {};
        this._points = {};
        this._pointNames = [];
        this.pointRadius = 5;
        
        this.raph = Raphael($(divName), 915, height);
        
        this.nextPointNameIndex = 0;
        
    },
    
    addLandMass: function(name, coordinates){
        this.landmasses[name] = this.raph.path(coordinates).attr({fill: '#444', 'stroke-width': 2, stroke: '#555'});;
    },
    
    addShape: function(coordinates, attributes){
        var s = this.raph.path(coordinates).attr(attributes);
    },
    
    addEpicentre: function(params){
        var rings = params.rings ? params.rings : 4;
        var color = params.color ? params.color : '#f41';
        var radius = 15;
        var opacity = 0.8;
        for(var i=0;i<rings;i++){
            this.raph.circle(params.xpos, params.ypos, radius).attr({stroke: color, 'stroke-width': 10, 'stroke-opacity': opacity});
            radius += 22;
            opacity = opacity/2;
        }
    },
    
    addPoint: function(params){
        
        var p = new NOTW.MapPoint({xpos: params.xpos, ypos: params.ypos, label: params.label, rad: this.pointRadius, fill: params.fill});
        var dotName = params.label.toLowerCase().replace(' ', '-');
        p.dot = this.raph.circle(params.xpos, -10, this.pointRadius).attr({'stroke-width': 0, opacity: 0});
        p.label = this.raph.text(params.xpos, params.ypos-20, params.label).attr({opacity: 0});
        
        p.dot[0].style.cursor = "pointer";
        p.dot[0].id = 'point-'+dotName;
        
        this._points[dotName] = p;
        this._pointNames.push(dotName);
        
    },
    
    showNextPoint: function(){
        
        if(this.nextPointNameIndex < this._pointNames.length){
        
            while(!this._points[this._pointNames[this.nextPointNameIndex]].dot){
                this.nextPointNameIndex++;
            }
        
            this._points[this._pointNames[this.nextPointNameIndex]].display();
            this.nextPointNameIndex++;
        
        }
        
    },
    
    showPoints: function(){
        
        new PeriodicalExecuter(this.showNextPoint.bind(this), 0.15);
        
    }
    
});

NOTW.MapPoint = Class.create({
    
    initialize: function(params){
        this.xpos = params.xpos;
        this.ypos = params.ypos;
        this.labelText = params.label ? params.label : 'Untitled Point';
        this.name = this.labelText.toLowerCase().replace(' ', '-');
        this.rad = params.rad ? params.rad : 5;
        this.clicked = false;
        this.fill = params.fill ? params.fill : '#f90';
    },
    
    display: function(){
        
        this.dot.attr({fill: this.fill, opacity: 70, stroke: this.fill}).animate({'cy': this.ypos}, 1200, 'bounce');
        this.showLabel();
        Event.observe(this.dot[0].id, 'click', this.click.bind(this));
        Event.observe(this.dot[0].id, 'mouseover', this.mouseover.bind(this));
        Event.observe(this.dot[0].id, 'mouseout', this.mouseout.bind(this));
        
    },
    
    click: function(){
        // make something happen here
        alert("this will trigger more content about "+this.labelText);
        this.clicked = true;
    },
    
    mouseover: function(){
        var f = this.clicked ? '#999' : this.fill;
        this.dot.animate({r: this.rad*2.5, opacity: 50, fill: '#fff', 'stroke-width': 2, stroke: f}, 300, '<>');
    },
    
    mouseout: function(){
        var f = this.clicked ? '#999' : this.fill;
        this.dot.animate({r: this.rad, opacity: 100, fill: f, 'stroke-width': 0}, 500, 'backOut');
    },
    
    showLabel: function(){
        this.label.attr({fill: '#fff', 'font-size': '14px'}).animate({opacity: 100}, 1500, '<');
    }
    
});