function OfficeSelector(settings) {
	/*
	* should match the order of the HTML elements
	*/
	this.OFFICES = settings.offices ? settings.offices : []
	/*
	* where to find the images
	*/ 
	this.imageDir = settings.imageDir ? settings.imageDir : "images/offices"
	/* 
	* initial image 
	*/
	this.initialImage = settings.initialImage || null;
	/*
	* in milliseconds
	*/ 
	this.FADE_OUT_SPEED = 500
	/*
	* office backgrounds to preload immediately
	*/ 
	this.initialPreloads = []
	/*
	* then preload these
	*/ 
	this.otherPreloads = []
	/*
	* references to the clocks
	*/
	this.officeClocks = []
	/*
	* jquery element containing the offices
	*/
	this.$officesContainer = $('#office-selector');
	/*
	* active office (should correspond to the officebackground)
	*/
	this.activeOfficeNr = 0;
}

OfficeSelector.prototype = {

	createClocks:function() {
		var self = this;
		var initial = this.initialImage;
		
		var options = {
			nightCallback:function(clock) { 
				self.setNight(clock.el);
				if (self.activeOfficeNr == clock.officeNr) self.setBackground(clock.officeNr, "night") 
			},
			dayCallback:function(clock) { 
				self.setDay(clock.el); 
				if (self.activeOfficeNr == clock.officeNr) self.setBackground(clock.officeNr, "day")
			},
			initCallback:function(clock) { 
				// add reference to clock
				self.officeClocks[clock.officeNr] = clock;	
					
				var $el = $(clock.el);
				var $li = $el.parent().parent();
			
				if (clock.timeOfDay == "day") {
					self.setDay(clock.el);
				} else {
					self.setNight(clock.el);
				}

				// find the best images to preload (day or night)
				var timeOfDay = clock.timeOfDay;
				self.initialPreloads.push(self.OFFICES[clock.officeNr] + "_" + timeOfDay +".jpg");
				// the other one should be preloaded at some point too
				self.otherPreloads.push(self.OFFICES[clock.officeNr] + "_" + (timeOfDay=="day" ? "night" : "day") +".jpg");
						
				// make LI easier to identify with officeNr
				$li.attr("id","officeswitcher-"+clock.officeNr);
				
				// set the initial background image
				if ($li.hasClass("active") && !initial) {
					self.activeOfficeNr = clock.officeNr;
					self.setBackground(clock.officeNr, clock.timeOfDay);
				}
			}
		}
		
		$('span', this.$officesContainer).officeClock(options);

		if(initial) {
			this.setInitialBackground(initial);
		}
	},
	
	addHoverBehaviour:function() {
		var self = this;
		this.preloadBackgrounds();
		
		$('li', this.$officesContainer).hoverIntent(function() {
			var $li = $(this);
			if ($li.hasClass('loading')) return true;
			// find out which office was selected and show the corresponding background image
			var officeNr = parseInt($li.attr("id").split("-")[1]);
			self.setBackground(officeNr, self.officeClocks[officeNr].timeOfDay);
		}, function() {return});
	},

	preloadBackgrounds:function() {
		var self = this;
		
		// preload most essential backgrounds
		$.preload(this.initialPreloads, {
			base:'images/offices/',
			onComplete: function(data) {
				$('li:eq('+data.index+')', self.$officesContainer).removeClass("loading");
			}
		});

		// then preload the rest
		$.preload(this.otherPreloads, { base:'images/offices/' });
	},

	setBackground:function(officeNr, timeOfDay) {

		var $on  = $('#office_carousel div.active');
		var $off = $('#office_carousel div').not('.active');
	
		$off.css('background-image', "url('"+this.imageDir+"/"+this.OFFICES[officeNr]+"_"+timeOfDay+".jpg')")
		
		$on.fadeOut(this.FADE_OUT_SPEED, function () {
			$on.removeClass("active");
			$off.addClass("active");
			$on.show();
		});
	},

	setInitialBackground:function(url) {
		var $on = $('#office_carousel div.active');

		$on.css('background-image', 'url("' + url + '")');
	},

	setNight:function(el) {
		$(el).removeClass('time_day');
		$(el).addClass('time_night');
	},

	setDay:function(el) {
		$(el).removeClass('time_night');
		$(el).addClass('time_day');
	}

	
}