$(function () { 
	
		/*
		
		
		DECLARATIONS
		
		
		*/
		
		var bars = false, lines = true, steps = false;
	    var data = [];
	    var overviewOptions = {
	        xaxis: { mode: "time" },
	        selection: { mode: "x" },
	        legend: {show: false}
	    };	    
	    
	    var firstload = true;
	    
	    var placeholder = $("#primary");
	
		var maxY = 0;
	    

    
    
    	var baselineUrl = '/baseline/PHD/total';
    	var datalineUrl = '';

		var baseline = [];
		var dataline = [];
		var serieslines = [];



		/*
		
		
		SERIES POPULATION FUNCTIONS
		
		
		*/



	        // then fetch the data with jQuery
	        function setBaseline(series) {
	        		serieslines.length = 0;
	                serieslines.push(series);
	                if (firstload) {
	                	firstload = false;
	                	replot();
	                } else {
	                	loadDataline(datalineUrl);
	                }
	         }

			function setDataline(series) {
					// dataline.length = 0;
					serieslines.push(series);
					replot();
			}
			
			
		function loadDataline() {
		
		     $.ajax({
	                url: datalineUrl,
	                method: 'GET',
	                dataType: 'json',
	                success: setDataline
	         		});	

		
		}	
	    
		function loadBaseline() {
		
			// load dataline
		     $.ajax({
	                url: baselineUrl,
	                method: 'GET',
	                dataType: 'json',
	                success: setBaseline
	         		});			
		
		}    	 

	    
	    function setSeriesUrls() {
			var baseline = "";
			var dimensions = "";
			var dataset = "";
			$("#baseline select option:selected").each(function () {
			    baseline += $(this).val().replace(" ", "_") + "/";
			    
			  });
			  
			$("#dataset select option:selected").each(function () {
			    dataset += $(this).val().replace(" ", "_") + "/";
			  });
			                
			$("#dimensions select option:selected").each(function () {
			    dimensions += $(this).val().replace(" ", "_") + "/";
			  });
			  //alert (dimensions);
			  
			  baselineUrl = '/baseline/' + dataset + baseline   ;
			  
			//  alert (baselineUrl);
			  
				datalineUrl = '/plot/' + dataset + dimensions;
				  
			//	  alert (datalineUrl);	    
	    }
   
	    	
	    /*
	    
	    
	    DISPLAY SETTINGS
	    
	    
	    */	    	

		  function yTicks(val, axis) {
		  					maxY = val;
						    if (val > 1000000)
						      return '$' + (val / 1000000).toFixed(axis.tickDecimals) + "M";
						    else if (val > 1000)
						      return '$' + (val / 1000).toFixed(axis.tickDecimals) + "K";
						    else
						      return '$' + val.toFixed(axis.tickDecimals);
						}
	    
	    function chartOptions() {
	    	// todo: set ticks to min max in 25k increments
			var options = {
				series: {
		                lines: { show: lines, steps: steps, lineWidth: 2  },
		                points: {show: (lines==true && steps==false) ? true : false, radius: 2},
		                bars: { show: bars, barWidth: 0.6 }
		                
		        },legend: {show: true, container: $('#legend'), noColumns: 2},
		        xaxis: {
				       ticks: monthTicks(24)
			            },
		        yaxis: {
		        		tickFormatter: yTicks
			            },			            
			    colors: ["#263248","#ff9800"],
			    grid: {
				    show: true,
				    aboveData: false,
				    backgroundColor: "#eeeeee",
				    color: "#eeeeee",
				    tickColor: "#ffffff",
				    hoverable: !steps,
				    markings: [ { xaxis: { from: 13, to: 13 }, color: "#ffffff", lineWidth: 5 } ]
				  }
			    
		    };	    
		    
		    return options;
	    }	    


		

	    function replot() {


	    	//alert (baseline.toString());
            var plot = $.plot(placeholder, serieslines, chartOptions()); //, chartOptions()
           // $.plot(placeholder, dataline, chartOptions());
   
   			// bind mouseovers

		
		    var previousPoint = null;
		    $("#primary").bind("plothover", function (event, pos, item) {

		  
		            if (item) {
		                if (previousPoint != item.datapoint) {
		                    previousPoint = item.datapoint;
		                    
		                    $("#tooltip").remove();
		                    var x = item.datapoint[0].toFixed(2),
		                        y = item.datapoint[1].toFixed(2);
		                    
		                    showTooltip(item.pageX, item.pageY,
		                                "<p class='tooltip'>" + m(x,false) + " " + yr(x) + "</p><p class='tooltip'>$" + addCommas(parseInt(y)) + "</p>");
		                }
		            }
		            else {
		                $("#tooltip").remove();
		                previousPoint = null;            
		            }
		        
		    });
		    // bind clicks

		    placeholder.bind("plotclick", function (event, pos, item) {
		        if (item) {
		            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
		            plot.highlight(item.series, item.datapoint);// plot.unhighlight
		        }
		    });

			// text
	    
		    o = plot.pointOffset({ x: 1, y: maxY});
		    // we just append it to the placeholder which Flot already uses
		    // for positioning
		    //alert (maxY);
		  	placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:18pt;padding:5px">2008</div>');
		
		    o = plot.pointOffset({ x: 13, y: maxY});
		    placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:18pt;padding:5px">2009</div>');
		            

	    }


		
	    	    
	    	    
	   /*
	   
	   
	   EVENT HANDLING
	   
	   
	   */ 	    
	    	    
	    	    
	    $("#graphControls input").click(function (e) {
	        e.preventDefault();
	        lines = $(this).val().indexOf("Lines") != -1;
	        steps = $(this).val().indexOf("steps") != -1;
	        replot(placeholder, data, chartOptions() );
	    });	    

		// todo fix this

 		$("#dimensions select").change(function () {
          /*var str = "";
          $("select option:selected").each(function () {
                str += $(this).val() + "/";
              });
           datalineUrl = '/plot/' + str + 'data.json';
			*/
			setSeriesUrls();
          	
          	loadBaseline();						

          
          
          	replot();
        })
        
 		$("#baseline select").change(function () {


			setSeriesUrls();
          	
          	loadBaseline();						

          
          
          	replot();
        })
        
        
 		$("#dataset select").change(function () {
          var str = "";
          $("#dataset select option:selected").each(function () {
                str += $(this).val() + "/";
              });
           /*datalineUrl = '/plot/' + str + 'data.json';
			*/
			//setSeriesUrls();
          	
          	//loadBaseline();						

          
          	location.href='/dashboard/' + str;
          	//replot();
        })
        
       
                
       //datalineUrl = '/plot/random/all/all/all/all';
	
		setSeriesUrls();
		loadBaseline();			
		replot();
	

	}); // close function