Array.prototype.in_array = function(p_val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == p_val) {
			return true;
		}
	}
	return false;
}

function Chart( options )
{
	var chart = $( "<div class=\"chart\"></div>" );
	var title = $( "<div class=\"chart_title\"></div>" );
	var container = $( "<div class=\"chart_container\"></div>" );

	var bars = $( "<div class=\"chart_bars\"></div>" );
	
	var horizontal = $( "<div class=\"chart_horizontal\"></div>" );
	var vertical = $( "<div class=\"chart_vertical\"></div>" );
	
	var legends = $( "<div class=\"chart_legends\"></div>" );
		
	var options = $.extend( {
		title: "",
		legends: [],
		values: [],
		vertical: true,
		scale: 2, 				//Esse valor deve ser o mesmo que a altura de um span da coluna de porcentagem dividido por 10
		bar_width: 60,
		space: 15, 				//Espaçamento entre colunas
		colors: [ "#3E7AC3", "#DF8628", "#C43D39", "#C43D39", "#96BD48", "#7858A3", "#36ADCD", "#A1C6E3", "#017F7E", "#78A000" ]
	}, options );

	this.Get_100_Porcent = function()
	{
		var p100 = 0;
		for( var i = 0; i < options.values.length; i++ )
			p100 += options.values[i];
		return p100;
	}
	
	this.CreateBar = function( value, i )
	{
		var bar = $( "<div class=\"chart_bar\"></div>" );
		value = ( value * 100 ) / this.Get_100_Porcent();
		
		bar.append( this.Create_Span( ( Math.round( value * 100 ) / 100 ) + "%" ) );
		
		value = ( options.scale * value ) + "px";
		if ( options.vertical )
		{
			bar.width( options.bar_width + "px" );
			bar.height( value );
			bar.css( "left",  i * ( options.space + options.bar_width ) + "px" );
		}
		else
		{
			bar.width( value + "px" );
			bar.height( options.bar_width + "px" );
			bar.css( "bottom",  i * ( options.space + options.bar_width ) + "px" );
		}
		bar.css( "background-color", options.colors[i] );
		this.Add_Legend( i );
		
		return bar;
	}
	
	this.Clear = function()
	{
		title.empty();
		bars.empty();
		horizontal.empty();
		vertical.empty();
		legends.empty();		
	}
	
	this.Set_Bar_Percent = function( bar )
	{
		bar.addClass( "chart_percent" );
		for( var i = 100; i >= 0; i-=10 )
		{
			bar.append( this.Create_Span( i + "%" ) );
		}
	}
	
	this.Set_Bar_Values = function( bar )
	{
		bar.addClass( "chart_values" );
		for( var i = 0; i < options.values.length; i++ )
		{
			bar.append( this.Create_Span( options.values[i] ) );
		}
	}
	
	this.Create_Span = function( value )
	{
		return $( "<span class=\"chart_span\">" + value + "</span>" );
	}
	
	this.Add_Legend = function( i )
	{
		var box = $( "<div class=\"chart_legends_box\"></div>" );
		var box_in = $( "<div class=\"chart_legends_box_in\"></div>" );
		box_in.css( "background-color", options.colors[i] );
		box.append( box_in );
		var p = $( "<p class=\"chart_legends_item\"></p>" );
		p.append( box );
		p.append( this.Create_Span( options.legends[i] ) );
		legends.append( p );
	}
		
	this.Create = function()
	{
		this.Clear();
		
		title.append( $( "<h2>" + options.title + "</h2>" ) );
				
		if ( options.vertical )
		{		
			this.Set_Bar_Percent( vertical );
			this.Set_Bar_Values( horizontal );
		}
		else
		{
			this.Set_Bar_Percent( horizontal );
			this.Set_Bar_Values( vertical );			
		}
		
		for( var i = 0; i < options.values.length; i++ )
		{
			bars.append( this.CreateBar( options.values[i], i ) );
		}
		
		setTimeout( function(){
			$( ".chart_values span" ).css({
				"width": ( options.bar_width + options.space - 3 ) + "px",
				"display": "block",
				"float": "left",
				"text-align": "center"
			});
		}, 1 );
		return chart;
	}
	
	chart.append( title );
		
	container.append( vertical );
	container.append( bars );
	container.append( horizontal );
		
	chart.append( container );
	
	chart.append( legends );
}