/************meteogram engine************/


/**
* @author Javier Millan
*
* Draws the complete meteogram 
* This is the entry point of meteogram generation.
*
* @param <meteo_data> Contains data_products[] + data_options + data_axis
* @param <meteo_config>	Complete configuration object.
*
*/
function draw_meteogram(meteo_data, meteo_config){

        var ngraphs = meteo_config.graphs.length;
	var graph;

        //style
        var dv = $("#meteogram");
        //setCssStyles(dv,meteo_config);
        
        //global css graph
        if(meteo_config.css)
            addCssClasses(dv,meteo_config.css);


        //tickWidth
        setTickWidth(meteo_config.tick_width);

	//draw graphs
	for(var i=0; i < ngraphs; i++){
                graph = draw_graph(meteo_data,meteo_config.graphs[i]);
	}
	
	//draw legend
	drawLegend(meteo_config.legend);

                //css unit
        if(meteo_config.css_units)
            addCssUnits(meteo_config.css_units);

        //css tick labels
        if(meteo_config.css_ticks)
            addCssTicks(meteo_config.css_ticks);

        //setFontStyles(meteo_config.styles);
}


/**
* @author Javier Millan
*
* Draws the graph depending the type
*
* @param <meteo_data> Contains data_products[] + data_options + data_axis
* @param <graph_config>	GraphConfig single object.
*
* @return graph object
*
*/
function draw_graph(meteo_data, graph_config){
	

        //dimensions

        var dv = $("#"+graph_config.div);
        //setCssStyles(dv,graph_config);
        if(graph_config.css)
            addCssClasses(dv,graph_config.css);

        var graph;
	
	switch(graph_config.type){
	
		case "flot":		
			graph = drawFlot(meteo_data,graph_config);		
			break;
			
		case "gradient":
			drawGradient(meteo_data,graph_config);
			break;
			
		default:
			//throw an exception: unknown type
			break;
	}
	
	return graph;
}

/**
* @author Javier Millan
*
* Draws the legend
*
* @param <legend_config> Legend configuration (it will be better)
*
*/
function drawLegend(legend_config){

	var index;
	var decr = 0;
	var cdiv = $("#"+legend_config.div);

        //setCssStyles(cdiv,legend_config);
        addCssClasses(cdiv,legend_config.css);


	var canvas = construCanvas(cdiv);
	var pwidth = 0; //sum of all text widths
	var twidth = 0; //actual text width
	var padding = 5;
	var slice = false;


	if (canvas.getContext){
		var ctx = canvas.getContext("2d");
		ctx.font = legend_config.font;
		
		for (var i=0;i<legends.length;i++){		
		
			var text;
		
			if(slice)
				text = legends[i][0].slice(0,10);
			
			else
				text = legends[i][0];
			
			
			ctx.fillStyle   = _LEGEND_BORDER_COLOR;
			ctx.fillRect((i - decr)*20 + pwidth, 0, 10, 10);
			ctx.fillText(text, (i - decr)*20 + pwidth + 10 + padding ,10);

			ctx.fillStyle   = legends[i][1];
			ctx.fillRect(1 + (i - decr)*20 + pwidth, 1, 9, 9);

			twidth = ctx.measureText(text);
			pwidth += twidth.width;			
		}
	}
}


/**
* @author Javier Millan
*
* Generate the div's on meteogram.php into meteo_div 
* 
* @param <meteo_config>	Complete configuration object.
*
*/
function generateDivs(meteo_config){

	var divs = new Array();
	
	//recollect divs from config
	if(meteo_config.legend !=null)
		divs.push(meteo_config.legend.div);
		
	for(var i=0; i<meteo_config.graphs.length; i++){
	
		divs.push(meteo_config.graphs[i].div); 
	}
	
	//write divs
	for (var i=0;i<divs.length;i++){
	
		$('#meteogram').append('<div id=\"'+divs[i]+'\"'+">"+'\n');
	}

}


/**CANVAS FUCNTIONS***/


/**
 * Add canvas to DOM.
 * Do not call directly, use construCanvas instead.
 *@param width      canvas width
 *@param height     canvas height
 *
 *Adds an element canvas to the HTML page
 *
 **/
function createCanvas(width, height) {
    var c = document.createElement('canvas');
    c.width = width;
    c.height = height;
    if ($.browser.msie && parseInt($.browser.version) < 9){ // excanvas hack
        c = window.G_vmlCanvasManager.initElement(c);
    }
    return c;
}

/**
 * Create a Canvas inside a div
 *
 * @param canvasdiv     A div where you want to insert a canvas
 *
 */
/*BE CAREFUL: There's a function inside flot library called constructCanvas (do not rename this function) */
function construCanvas(canvasdiv) {
    var canvasWidth     = canvasdiv.width();
    var canvasHeight    = canvasdiv.height();
    var placeholder     = canvasdiv;

    placeholder.html(""); // clear placeholder

    if (canvasWidth <= 0 || canvasHeight <= 0){
        alert("Bad width height arguments for construCanvas: width="+canvasWidth+"Height="+canvasHeight);
    }

    if ($.browser.msie && parseInt($.browser.version) < 9){ // excanvas hack
        window.G_vmlCanvasManager.init_(document); // make sure everything is setup
    }

    // the canvas
    var canvas = $(createCanvas(canvasWidth, canvasHeight)).appendTo(placeholder).get(0);

    return canvas;
}

/**
 * Checks if everything fits in the lengend canvas
 *
 * @param canvasdiv  Div containing the canvas
 * @param ctx        The canvas context
 * @param lobj       Array with data object
 *
 * @return true if its a correct width, false otherwise
 **/
function checkCorrectWidth(canvasdiv,ctx,lobj){
    var canvasWidth     = canvasdiv.width();
    var length          = lobj.length;
    var i               = 0;
    var totalwidth      = 0;
    var namewidth       = 0;

    for(i=0;i<length;i++){
        if(lobj[i].show_in_legend){
            namewidth = ctx.measureText(lobj[i]);
            totalwidth += namewidth.width + 20;
        }
    }

    var ret = (totalwidth < canvasWidth) ? true: false;
    return ret;
}





function setCssStyles(dv,config){


    if(config.styles){

        if(typeof(config.styles.height) != 'undefined')
            dv.css('height',config.styles.height);

        if(typeof(config.styles.width) != 'undefined')
            dv.css('width',config.styles.width);


        if(typeof(config.styles.margin_top) != 'undefined')
            dv.css('margin-top',config.styles.margin_top);

        if(typeof(config.styles.margin_bottom) != 'undefined')
            dv.css('margin-bottom',config.styles.margin_bottom);

        if(typeof(config.styles.margin_left) != 'undefined')
            dv.css('margin-left',config.styles.margin_left);

        if(typeof(config.styles.margin_right) != 'undefined')
            dv.css('margin-right',config.styles.margin_right);


        if(typeof(config.styles.padding_left) != 'undefined')
            dv.css('padding-left',config.styles.padding_left);

        if(typeof(config.styles.padding_right) != 'undefined')
            dv.css('padding-right',config.styles.padding_right);

        if(typeof(config.styles.padding_top) != 'undefined')
            dv.css('padding-top',config.styles.padding_top);

        if(typeof(config.styles.float_pos) != 'undefined')
            dv.css('float',config.styles.float_pos);

        if(typeof(config.styles.position) != 'undefined')
            dv.css('position',config.styles.position);

        if(typeof(config.styles.top) != 'undefined')
            dv.css('top',config.styles.top);

        if(typeof(config.styles.bottom) != 'undefined')
            dv.css('bottom',config.styles.bottom);

        if(typeof(config.styles.left) != 'undefined')
            dv.css('left',config.styles.left);

        if(typeof(config.styles.right) != 'undefined')
            dv.css('right',config.styles.right);

        if(typeof(config.styles.tick_width) != 'undefined')
           _AXIS_TICK_WIDTH = config.styles.tick_width;

    }
}

/**
 * Add classes defined on file config for the element
 *
 * @param dv         Div containing the element
 * @param classes    Array of classes
 *
 **/
function addCssClasses(dv,classes){
    
    for(var i=0;i< classes.length; i++){

        dv.addClass(classes[i]);
    }

}

function addCssUnits(css_units){

    for(var i=0;i< css_units.length; i++){
       
       $(".unit_tag").addClass(css_units[i]);
    }
}

function addCssTicks(css_ticks){

    for(var i=0;i< css_ticks.length; i++){

        $(".tickLabels").addClass(css_ticks[i]);
    }

}


function setTickWidth(tick_width){

    if(typeof(tick_width) != 'undefined')
        _AXIS_TICK_WIDTH = tick_width;
}


function setFontStyles(styles){


    if(typeof(styles.unit_size) != 'undefined')
         $(".unit_tag").css('font-size',styles.unit_size);

    if(typeof(styles.tick_size) != 'undefined')
         $(".tickLabels").css('font-size',styles.tick_size);

     
     if(typeof(styles.tick_color) != 'undefined')
        $(".tickLabels").css('color',styles.tick_color);

     else
        $(".tickLabels").css('color',"rgba(255,255,255,0.5");
}



/**
* Creates a Div inside another div and places it at specific place
* with specific text. Is used to draw meteogram's units of the axis.
*
* @param fdiv		Parent div where to place the new unit div
* @param axis		which axis needs the unit (1- left yaxis, 2- right yaxis) (do not check correctness)
* @param unit_text	text to draw in the div
*
* @param xoffset    Add an offset to x position [ OPTIONAL , default is 0]
* @param yoffset    Add an offset to y position [ OPTIONAL , default is 0]
*
* @NOTE The parent div needs to be set to position:relative for this function to work correctly.
*		Also this function is created to match the current meteogram. Future modifications in
*		meteogram will provoke revision.
*
*/
function drawYAxisUnit(fdiv,axis,unit_text,xoffset,yoffset){
    var ymod = 3* fdiv.height() /4;
    var xmod = fdiv.width();
    var xoff = (typeof xoffset == 'undefined') ? 0 : xoffset;
    var yoff = (typeof yoffset == 'undefined') ? 0 : yoffset;

    if(axis == 1){
        xmod = xoff;
        ymod = ymod + yoffset;
    }
    else{
       // xmod = xmod + xoff;
       xmod = xmod - xoff;
       ymod = ymod  + yoffset;
    }

        
    fdiv.append("<div class=\"unit_tag\" style=\"position: relative; width: 10%; bottom:"+ymod+"px; left:"+xmod+"px;\">"+unit_text+"</div>");
}