/*
This class supports two main operations: dispatching gui events and rendering the timeline.
See timemap.js for more details.

===========================
Dispatching events

The model object exposes only one relevant method. This method should be called whenever
a user changes the current year on the time slider.

setYear(year)


===========================
Rendering the timeline

The model object that contains the data and maintains the application state will
automatically call the update(model) method whenever its internal state has changed.
You should define all gui update behavior inside this method.

The relevant accessor methods are:

getTimelineStart() - returns the start year of the overall timeline
getTimelineEnd() - returns the end year of the overall timeline
hasPreview() - returns true if a preview of a year range needs to be drawn
getCurrentPreviewStart() - returns the start year of the preview, or null if no preview set
getCurrentPreviewEnd() - returns the end year of the preview, or null if no preview set
hasCurrentPeriod() - returns true if a period has been set
getCurrentPeriodStart() - returns the start year of the current period, or null if none set
getCurrentPeriodEnd() - returns the end year of the current period, or null if none set
getCurrentYear() - returns the year currently set in the model
currentPeriodContains(year) - returns true if a period is set and it contains the specified year

*/

/*
 * Constructor. Params: the div element that will contain the slider, the model
 */
function Slider (div, model) {
	this.element = div;
	this.start = 0;
	this.end = 0;
	this.sliding = false;
	$('#slider_callout').show();
	var calloutVisible = true;
	var theSlider = this; // Closure, to make the the Slider instance available to event handlers 
	// Utility function to display year appropriately 
	(function($){
		$.toYear = function(y) {
			if (y < 0) {
				return (y*-1) + " BCE";
			} else {
				return y + " CE";
			}
		}
	})(jQuery);
	
	var cw = $('.slider_container').width() - $('.slider_handle').width();
	var ts = model.getTimelineStart();
	var te = model.getTimelineEnd();
	var bs = -2000; // Hard coded as container background image
	var be = 500; 
	var offset = Math.round((cw/(be-bs))*(ts - bs));
	var twidth = Math.round((cw/(be-bs))*(te - ts)) + $('.slider_handle').width();
	$(".slider_bar").css("width",twidth + "px").css("left",offset);

	$('.slider_bar').slider({	handle: '.slider_handle',
								min: model.getTimelineStart(),
								max: model.getTimelineEnd(),
								start: function(e, ui) {
									$('#slider_callout').text($.toYear(ui.value));
									theSlider.clearCurrentPeriodRange(model);
									},
								stop: function(e, ui) {
									$('#slider_callout').text($.toYear(ui.value));
									theSlider.hiliteCurrentPeriodRange(model);
									},
								slide: function(e, ui) {
									$('#slider_callout').text($.toYear(ui.value));
									//$('#slider_callout').text(model.getCurrentPeriodId());
									theSlider.year = ui.value;
									model.setYear(ui.value);
									}
							});
}

/*
 * The model will automatically call this method each time
 * its state changes. Params: instance of the updated model.
 */
Slider.prototype.update = function(model) {
	this.hiliteCurrentPeriodRange(model);
	// If the slider is not at the current model year then move it there. This condition
	// would result if another widget changed the year currently set in the model.
	if (this.year != model.getCurrentYear()) {
		this.year = model.getCurrentYear();
		$('.slider_bar').slider("moveTo", this.year);
	}
}

Slider.prototype.hiliteCurrentPeriodRange = function(model) {
	if (!model.hasCurrentPeriod()) return;
	this.updatePeriodRangeDisplay(model, model.getCurrentPeriodStart(), model.getCurrentPeriodEnd());
}

Slider.prototype.clearCurrentPeriodRange = function(model) {
	this.updatePeriodRangeDisplay(model, 0, 0);
}

Slider.prototype.updatePeriodRangeDisplay = function(model, startYear, endYear) {
	//Calculations for preview range
	var w = $('.slider_bar').width() - $('.slider_handle').width(); //width of the slider in pixels
	var rs = model.getTimelineStart(); // Timeline start
	var x = model.getTimelineEnd() - model.getTimelineStart(); // Complete range
	var ps = startYear; // Start of the preview
	var pe = endYear; // End of the preview
	var offset = Math.round((w/x)*(ps-rs)) + ($('.slider_handle').width())/2; // Relative point from where to start the div
	var pwidth = Math.round((w/x)*(pe-ps)); // Width of the preview div
	$("#previewrange").css("width",pwidth + "px").css("left",offset);
}