//TODO 東西南北
// canvasHorizontalBar
var Canvas = function(){
	this.unsupported = true;
	this.AZIMUTH_LABELS = [
		{azimuth:0,elevation:0,label:'N'},
		{azimuth:-45,elevation:0,label:'NW'},
		{azimuth:-90,elevation:0,label:'W'},
		{azimuth:-135,elevation:0,label:'SW'},
		{azimuth:-180,elevation:0,label:'S'},
		{azimuth:-225,elevation:0,label:'SE'},
		{azimuth:-270,elevation:0,label:'E'},
		{azimuth:-315,elevation:0,label:'NE'}
	];
	this.ELEVATION_LABELS = null;
    this.initCanvas();
	this.width = $('canvasHorizontalBar').clientWidth;
	this.timeLabel = document.createElement('SPAN');
	this.timeLabel.style.position = 'absolute';
	this.timeLabel.style.display = 'none';
	$('canvasHorizontalBar').appendChild(this.timeLabel);
}
Canvas.prototype = {
    hide: function(){
		this.timeLabel.style.display = 'none';
        $('canvas').hide();
		$('buttonCloseStreet').hide();
		if (this.unsupported) return;
		if (this.ELEVATION_LABELS) {
		for (var i=0, l=this.ELEVATION_LABELS.length; i<l; i++) this.ELEVATION_LABELS[i].hide();
		}
		for (var i=0, l=this.AZIMUTH_LABELS.length; i<l; i++) this.AZIMUTH_LABELS[i].obj.hide();
    },
    show: function(){
		this.timeLabel.style.display = 'block';
		$('buttonCloseStreet').show();
        $('canvas').show();
		if (this.unsupported) return;
		if (this.ELEVATION_LABELS) {
			for (var i = 0, l = this.ELEVATION_LABELS.length; i < l; i++) 
				this.ELEVATION_LABELS[i].show();
		}
		for (var i=0, l=this.AZIMUTH_LABELS.length; i<l; i++) this.AZIMUTH_LABELS[i].obj.show();
    },
	drawAzimuthLabels: function () {
		if (this.unsupported) return;
		for (var i = 0, l = this.AZIMUTH_LABELS.length; i < l; i++) {
			var label = this.AZIMUTH_LABELS[i];
			var pos = getPositionInScreen(label);
			var areaOffset = Element.cumulativeOffset($('canvasHorizontalBar'));
			if (pos && !isOutOfView(label)) {
				var posX = areaOffset[0]+pos.x-5;
				if (areaOffset[0] <= posX && posX < areaOffset[0] + $('canvasHorizontalBar').clientWidth) {
					label.obj.show();
					label.obj.style.left = Math.floor(posX) + 'px';
				} else {
					label.obj.hide();
				}
			} else {
				label.obj.hide();
			}
		}
	},
	drawElevationLabels: function () {
		if (this.unsupported) return;
		if (this.ELEVATION_LABELS) return;
		this.ELEVATION_LABELS = new Array();
		var phi = 0;
		var areaOffset = Element.cumulativeOffset($('canvasHorizontalBar'));
	    while (phi < 90) {
			var position = getPositionInScreen({elevation:phi,azimuth:0});
			if (position.y > 0) {
				var label = document.createElement('LABEL');
				label.innerHTML = phi;
				this.ELEVATION_LABELS.push(label);
				label.style.position = 'absolute';
				label.style.top = (areaOffset[1] + position.y - 10) + 'px';
				label.style.left = areaOffset[0] + 'px';
				$('canvasHorizontalBar').appendChild(label);
			}
	        phi += PITCH;
	    }
	},
	drawDome: function () {
		if (this.unsupported) return;
		this.drawAzimuthLabels();
		this.drawElevationLabels();
    var phi = 0;
    while (phi < 90) {
        var height = Math.sin(phi * 2.0 * Math.PI / 360.0) * radius;
        var length = Math.cos(phi * 2.0 * Math.PI / 360.0) * radius;
        var startPosition = {
            x: radius - length + offsetX,
            y: radius - height + offsetY
        };
        var finishPosition = {
            x: radius + length + offsetX,
            y: radius - height + offsetY
        };
        drawLine(startPosition, finishPosition);
        phi += PITCH;
    }
    var theta = 0;
    while (theta <= 360) {
		var linePhi = 0;
		while (linePhi <= 90 - PITCH) {
			var currentPos = {
				azimuth: theta,
				elevation: linePhi
			};
			var nextPos = {
				azimuth: theta,
				elevation: linePhi + PITCH
			};
			drawLine(currentPos, nextPos);
			linePhi += PITCH;
		}
		theta += PITCH;
	}
	},
    render: function(positions, positionIndex){
		if (this.unsupported) return;
        conObj.strokeStyle = "rgba(255,255,255,0.5)";
        clearRect();
        conObj.beginPath();
        var x_axis = 100;
        var y_axis = 100;
        conObj.arc(radius + offsetX, radius + offsetY, radius, 0, Math.PI * 2, 100);
        this.drawDome();
        conObj.stroke();
        conObj.strokeStyle = "rgba(255,255,0,0.5)";
        conObj.beginPath();
        drawSatLine(positions || LINE, positionIndex);
        conObj.stroke();
    },
    see: function(positions, positionIndex){
		if (this.unsupported) return;
        degree_offset = positions[positionIndex].azimuth;
		//degree_offset=45;
        this.render(positions, positionIndex);
        conObj.beginPath();
        var hilitPos = getPositionInScreen(positions[positionIndex]);
        conObj.fillStyle = "rgba(255,255,0,1)";
        conObj.arc(hilitPos.x, hilitPos.y, 4.0, 0, Math.PI * 2, 100);
		
		var areaOffset = Element.cumulativeOffset($('canvas'));
		this.timeLabel.innerHTML = Util.formatDate( Util.parseDateAsGmt(positions[positionIndex].time),"HH:mm:ss");
		this.timeLabel.style.left = Math.floor(areaOffset[0] + hilitPos.x+5) + 'px';
		this.timeLabel.style.top = Math.floor(areaOffset[1] + hilitPos.y) + 'px';
        conObj.fill();
    },
    initCanvas: function(){
        canvas = document.getElementById("canvas");
		if (canvas.getContext) 
			this.unsupported = false;
		else {
			this.unsupported = true;
			return;
		}
        conObj = canvas.getContext("2d");
        conObj.fillStyle = "rgba(255,255,255,0.5)";
        conObj.strokeStyle = "rgba(255,255,255,0.5)";
		//TODO initialize azimuth labels
		for (var i=0, l=this.AZIMUTH_LABELS.length; i<l; i++) {
			var label = this.AZIMUTH_LABELS[i];
			label.obj = document.createElement('SPAN');
			label.obj.innerHTML = label.label;
			label.obj.style.position = 'absolute';
			label.obj.style.display = 'none';
			$('canvasHorizontalBar').appendChild(label.obj);
		}
        this.render();
    }
}

var PITCH = 15;
var radius = 500;
var conObj;
var canvas;
var offsetX = 550 / 2 - radius;
var offsetY = -124;
var LINE = [];

function drawLine(from, to){
		if (this.unsupported) return;
    if (from.x) {
        conObj.moveTo(from.x, from.y);
        conObj.lineTo(to.x, to.y);
    }
    else 
        if (from.azimuth) {
            var fromPos = getPositionInScreen(from);
            var toPos = getPositionInScreen(to);
            if (isOutOfView(from) || isOutOfView(to)) {
                return;
            }
            if (fromPos && toPos) {
                drawLine(fromPos, toPos);
            }
        }
    
}

function drawSatLine(line, positionIndex){
		if (this.unsupported) return;
    for (var i = 0, l = line.length; i < l; i++) {
        var _pos = line[i];
        var pos = getPositionInScreen(_pos);
        var pos = getPositionInScreen(_pos);
        if (!isOutOfView(_pos)) {
            conObj.moveTo(pos.x, pos.y);
            conObj.arc(pos.x, pos.y, 1.0, 0, Math.PI * 2, 100);
        }
        if (i < l - 1) {
            var _nextPos = line[i + 1];
            drawLine(_pos, _nextPos);
        }
    }
}

function getPositionInScreen(_pos){

    var pos = {
        azimuth: _pos.azimuth,
        elevation: _pos.elevation
    }
    pos.azimuth = (pos.azimuth - degree_offset) % 360;
    var height = radius * Math.sin(getRadianDegree(pos.elevation));
    var width = radius * Math.cos(getRadianDegree(pos.elevation));
    var length = width * Math.sin(getRadianDegree(pos.azimuth));
    return {
        y: radius - height + offsetY,
        x: radius + length + offsetX
    };
}

function getRadianDegree(degree){
    return degree * 2.0 * Math.PI / 360.0
}


function rotateDomeLeft(){

}

var degree_offset = 0;
var MOVE_DEGREE_PITCH = 3;
function auto(){
    setInterval(rotateDomeRight, 300)
}
function clearRect(){
    conObj.clearRect(0, 0, 600, 400);
}

function isOutOfView(pos){
    return (Math.cos(getRadianDegree(pos.azimuth - degree_offset)) < 0)
}