/************ METEOGRAM GRADIENT ************/


/**
* @author Javier Millan
* Draws the gradient graph
*
* @param <meteo_data> Contains data_products[] + data_options + data_axis
* @param <gradient_config>	GraphConfig single object, the type is gradient.
*
*/
function drawGradient(meteo_data,gradient_config){

	//select product index
	var index = -1;
	for(var i=0; i < meteo_data.product_data.length;i++){
	
		if((meteo_data.product_data[i].p_raw_id == gradient_config.products[0].product_ID) &&(meteo_data.product_data[i].p_hv == gradient_config.products[0].hv)){
			index = i;
			break;
		}
	}
	
	if(index!=-1){
		
		var div = $("#"+gradient_config.div);
		var data = format_gradient_data(meteo_data.product_data[index].p_data,meteo_data.options.start_epoch,meteo_data.options.finish_epoch);
		var thresh = gradient_config.products[0].thresholds;
		var colorarray = gradient_config.products[0].colors;
		var loff = (typeof(gradient_config.products[0].left_offset) != 'undefined' ) ? gradient_config.products[0].left_offset : 0;
		var roff = (typeof(gradient_config.products[0].right_offset) != 'undefined' ) ? gradient_config.products[0].right_offset : 0;

		var left = _AXIS_TICK_WIDTH + loff;
		var right = _AXIS_TICK_WIDTH + roff;
		var top	= (typeof(gradient_config.products[0].top_offset) != 'undefined' ) ? gradient_config.products[0].top_offset : 0;
		var height_off = (typeof(gradient_config.products[0].height_offset) != 'undefined' ) ? gradient_config.products[0].height_offset : 0;
		var icon_path = (typeof(gradient_config.products[0].icon_path) != 'undefined' ) ? gradient_config.products[0].icon_path : 'noicon';
				
		createCanvasGradient(div,data,thresh,colorarray,left,right,top,height_off,icon_path);
		
		//legend
		if(gradient_config.products[0].legend)
			legends.push([meteo_data.product_data[index].p_name, gradient_config.products[0].legend_color]);

                var xoffset = (typeof(gradient_config.products[0].offset_unit) != 'undefined') ?
                    gradient_config.products[0].offset_unit : 0;
                drawYAxisUnit(div,1,gradient_config.products[0].desc_name,xoffset,11);
	}
}

/**
* Draws a gradient square of data on a defined div
*
* @author Jordi Castells
*
* @param <div> Div where to draw the canvas gradient (a jquery selector)
* @param <data>  Data to plot in a gradient form
* @param <thresholds> 	Thresholds of data
* @param <color> 		Colors 
* @param <left_margin>	Canvas left margin. To control where the canvas should start drawing the gradient square
* @param <right_margin> Canvas left margin. To control where the canvas should finish drawing the gradient square
* @param <top_margin>	Gradient top margin 	(not applicable to the icon image)
* @param <height_offset>  Gradient height offset
*/
function createCanvasGradient(div,data,thresholds,colors,left_margin,right_margin,top_margin,height_offset,icon_path){
	var canvas_width    = div.width();
    var canvas_height   = div.height();
    var gradient_x1     = canvas_width - left_margin - right_margin;
    var rectangle_width = canvas_width - left_margin - right_margin;
    var rectangle_x0    = left_margin;
		
	var canvas = construCanvas(div);
	
	if (canvas.getContext) {
		var ctx = canvas.getContext("2d");
		var lineargradient = ctx.createLinearGradient(right_margin,0,canvas_width - left_margin,0);
		var ln = data.length;
		var gradient_increment = 1 / (ln - 1);
		
		for(var i=0,time_val = 0; i<ln;i++,time_val+=gradient_increment){
			var scolor = getColorByValue(thresholds,colors,data[i][1]);
			lineargradient.addColorStop(time_val, scolor);
		}
		
	//fill rectangle with gradient
        ctx.fillStyle = lineargradient;
	//x,y,w,h
        ctx.fillRect (rectangle_x0, 0+top_margin,rectangle_width, canvas_height+height_offset);
		
		if(icon_path!='noicon'){
			var icon = new Image();
			icon.src = icon_path;
			icon.onload = function() {ctx.drawImage(icon, 10, 0,canvas_height,canvas_height);};
		}
	}
}


/**
* Returns the color of a specific value for specific thresholds and colors array
* @author Jordi Castells
*
* @thresholds	Array of thresholds
* @colors		Array of colors
* @value		Value to discover its color
*/
function getColorByValue(thresholds,colors,value){
	var ln = thresholds.length;
	var cln = colors.length;
	var i = 0;
	
	for(i=0;i<ln;i++){
		if(value <= thresholds[i]){
			return colors[i];
		}
	}
	
	return colors[cln-1];
}

/**
* format an array of data for gradient component
* @author Javier Millan
*
* @data_arr             Array of data
* @start_epoch		Start epoch
* @end_epoch		End epoch
*/
function format_gradient_data(data_arr,start_epoch,end_epoch){

    var new_data= new Array();
    for(var i = 0; i<data_arr.length;i++){

        data_arr[i][0] = (data_arr[i][0]*1000);

        if((data_arr[i][0]>= start_epoch) && (data_arr[i][0]< end_epoch)){

               new_data.push(data_arr[i]);
        }
    }

    return new_data;
}