if(!ch){
	var ch = {};
}
if(!ch.exmachina){
	ch.exmachina = {};
}
if(!ch.exmachina.bravofly){
	ch.exmachina.bravofly = {};
}
/**
 * Oggetto utilizzato per scegliere il prezzo nella pagina iniziale di pricesearch
 * @constructor
 * @param {Object} ctorArgs
 */
ch.exmachina.bravofly.PriceChooser = function(/* object */ctorArgs){
	this.domNode = $(ctorArgs.pNode);
	var _timestamp = (new Date()).getTime();

	this.domNode.innerHTML = this.template.replace(/{\$PriceChooserId}/g, _timestamp);
	var ds = this.domNode.style;
	ds.position = "absolute";
    ds.overflow = "hidden";
	ds.top = "10px";
	ds.left = "0px";
	ds.width = "151px";
	ds.height = "79px";
	//ds.backgroundImage = "url('images/pricefinder/price_rounded_mod.png')";
//	ds.backgroundPosition = "-15px 0px";
//	ds.backgroundRepeat = "no-repeat";
//	ds.border = "1px solid red";

	this.data = ctorArgs.data;
	var p = this.data.prices;
	for(var i = 0; i < p.length; this.prices.push(p[i].k), i++){}
	//this.prices = this.data.prices || [25,60,100];
	this.selectedIndex = this._getSelectedIndexFromElement(this.data.selectedValue, "value") || 0;
	
	this.viewportIndex = Math.max(this.selectedIndex - 2, -4);
	this.viewport = this.prices.slice(this.viewportIndex, this.viewportIndex + this.viewportLength);
	for(i = 0; i < this.viewportLength; i++){
		this.priceNodes.push($("Price_" + i + "_" + _timestamp));
		this.priceNodes[i].observe("click", this.selectTarget.bindAsEventListener(this));
	}
	
	this.renderPriceArc();
	this.domNode.writeAttribute("id", null);

	this.button = $("Button_" + _timestamp);
	this.button.writeAttribute("id", null);

	this.minusNode = $("Minus_" + _timestamp);
	this.minusNode.writeAttribute("id", null);
	this.plusNode = $("Plus_" + _timestamp);
	this.plusNode.writeAttribute("id", null);


	this.setValue(ctorArgs.curValue || 0);
	this.onChange = ctorArgs.onChange || function(){};
	this.onArrowClick = ctorArgs.onArrowClick || function(){};
    this.onEnable = ctorArgs.onEnable || function(){};
    this.onDisable = ctorArgs.onDisable || function(){};

	this.minusNode.observe("click", this.decrement.bindAsEventListener(this));
	this.plusNode.observe("click", this.increment.bindAsEventListener(this));
	this.domNode.observe("click", this.click.bindAsEventListener(this));
    this.onCreate = ctorArgs.onCreate || this.onCreate;
    this.onCreate();
};

ch.exmachina.bravofly.PriceChooser.prototype = {
	/**
	 * Nodo DOM su cui viene costruito questo oggetto
	 * @type {Node}
	 */
	domNode: null,
	/**
	 * Nodo DOM del div che contiene l'immagine che punta il prezzo attualmente selezionato
	 * @type {Node}
	 */
	button: null,
	/**
	 * Lista dei nodi che indicano i prezzi
	 * @type {Array}
	 */
	priceNodes: [],
	/**
	 * Nodo che contiene l'immagine con il +
	 * @type {Node}
	 */
	plusNode: null,
	/**
	 * Nodo che contiene l'immagine con il -
	 * @type {Node}
	 */
	minusNode: null,
	/**
	 * Conta i click su + e -, modulo 5 (viewportLength). Puo' essere rimosso a meno che non sia usato dall'esterno
	 * @type {Number}
	 */
	rCounter: 0,
	/**
	 * Lunghezza della viewport che mostra i prezzi all'interno di questa istanza di priceChooser
	 * @type {Number}
	 */
	viewportLength: 5,
	/**
	 * Lista di prezzi contenuti nella viewport
	 * @type {Array}
	 */
	viewport: [],
	/**
	 * Indice di partenza della viewport all'interno della lista totale degli importi. In questo caso abbiamo:
	 * <pre>
	 *               _________________ _ _ _
	 *              |
	 *  0      1    | 2      3      4
	 *              |_________________ _ _ _
	 * </pre>
	 * @type {Number}
	 * @default 2
	 */
	viewportIndex: 2,
	/**
	 * Indice della selezione all'interno dei prezzi mostrati in viewport. Deve restare fisso, a meno che non
	 * si intendano cambiare il numero o la disposizione dei prezzi in viewport
	 * <pre>
	 *               _______________________________ _ _ _
	 *              |
	 *  0      1    | 2      3      <b style="color:red">4</b>      5
	 *              |_______________________________ _ _ _
	 * </pre>
	 * @type {Number}
	 * @default 2
	 */
	viewportSelectedIndex: 2,
	/**
	 * Lista dei prezzi sulla quale poggia la viewport mobile
	 * @type {Array}
	 */
	prices:[],
	/**
	 * Indice del prezzo selezionato, a partire dall'Array prices invece che da viewport
	 * @type {Number}
	 * @default 0
	 */
	selectedIndex: 0,
	/**
	 * Dati necessari alla costruzione di un oggetto di questa classe, contiene informazioni relative ai prezzi
	 * e agli indici
	 * @type {Object}
	 */
	data: {},
	/**
	 * Valore corrente del PriceChooser
	 * @type {Number}
	 * @default 0
	 */
	value: 0,
	/**
	 * TODO: rimuovere
	 */
	cachedValue: 0.0,
	/**
	 * Contiene il template per gli oggetti di questa classe, con i placeholder per gli id
	 * @type {String}
	 */
	template: '<div style="z-index:50">' +
//        '<div style="font:bold 12px Arial,Helvetica,sans-serif;color:#065293">{$MaxPriceTitle}</div>'+
		'<div style="cursor:pointer;position:absolute;left:50px;bottom:0px" id="Minus_{$PriceChooserId}"><img src="http://www3.staticroot.com/images/pricefinder/pricechooser_arrow_left.png" /></div>' +
		'<div style="cursor:pointer;position:absolute;left:85px;bottom:0px" id="Plus_{$PriceChooserId}"><img src="http://www3.staticroot.com/images/pricefinder/pricechooser_arrow_right.png" /></div>' +
		'<div style="cursor:pointer;position:absolute;border-top:1px solid #ddd;border-bottom:1px solid #ddd;top:25px;left:0;height:35px;width:200px">' +
              '<div style="cursor:pointer;position:absolute;left:73px;bottom:0" id="Button_{$PriceChooserId}">' +
                '<img src="http://www3.staticroot.com/images/pricefinder/pricechooser_arrow_selected.png" />' +
              '</div>' +
        '</div>' +
		'<div style="cursor:pointer;position:absolute" id="Price_0_{$PriceChooserId}"></div>' +
		'<div style="cursor:pointer;position:absolute" id="Price_1_{$PriceChooserId}"></div>' +
		'<div style="cursor:pointer;position:absolute" id="Price_2_{$PriceChooserId}"></div>' +
		'<div style="cursor:pointer;position:absolute" id="Price_3_{$PriceChooserId}"></div>' +
		'<div style="cursor:pointer;position:absolute" id="Price_4_{$PriceChooserId}"></div>' +
		'</div>',
	/**
	 * Contiene gli stili propri di ciascun elemento del PriceChooser; converrebbe associare delle classi invece che
	 * regole css
	 * @type {Array}
	 */
	priceStyles: [
		{
			bottom: "20px",
			left: "0px",
			color: "#bbdddd",
			disabledColor: "#ddd",
			fontFamily: "helvetica",
			fontWeight: "bold",
			fontSize: "12px"
		},
		{
			bottom: "20px",
			left: "30px",
			color: "#66aaaa",
			fontFamily: "helvetica",
			disabledColor: "#ddd",
			fontWeight: "bold",
			fontSize: "12px"
		},
		{
			bottom: "20px",
			left: "60px",
			color: "#00d000",
			disabledColor: "#065293",
			fontFamily: "helvetica",
			fontWeight: "bold",
			fontSize: "16px"
		},
		{
			bottom: "20px",
			left: "110px",
			color: "#66aaaa",
			disabledColor: "#ddd",
			fontFamily: "helvetica",
			fontWeight: "bold",
			fontSize: "12px"
		},
		{
			bottom: "20px",
			left: "140px",
			color: "#bbdddd",
			disabledColor: "#ddd",
			fontFamily: "helvetica",
			fontWeight: "bold",
			fontSize: "12px"
		}
	],
    // hooks
	/**
	 * Callback modificabile dall'esterno, invocata quando l'utente clicca su una delle freccette presenti
	 * nell'interfaccia
	 */
	onArrowClick: function(){},
	/**
	 * Modificabile dall'esterno, scatta quando l'oggetto corrente viene disabilitato
	 */
    onDisable: function(){},
	/**
	 * Hook che parte quando l'oggetto viene abilitato
	 */
    onEnable: function(){},
	/**
	 * Eseguita alla fine del costruttore
	 */
    onCreate: function(){},
	/**
	 * Restituisce l'indice selezionato a partire dal testo contenuto
	 * @param {String} key
	 * @param {String} kv
	 * @returns {Number}
	 */
	_getSelectedIndexFromElement: function(key,kv){
		var index = 0,
			p = this.data.prices,
			sel = "",
			key = key.indexOf(" ") != -1 ? key.substring(0, key.indexOf(" ")) : key
		;
		var selector = kv == "value" ? "v" : "k";
		for(var i = 0; i < p.length; i++){
			sel = p[i][selector];
			sel = sel.indexOf(" ") != -1 ? sel.substring(0, sel.indexOf(" ")) : sel;
			if(sel == key){
				index = i;
			}
		}
		return index;
	},
	/**
	 * Assegna ai nodi dei prezzi presenti nella viewport lo stile adatto
	 */
	renderPriceArc: function(){
		for(var i = 0; i < this.viewportLength; i++){
			//this.priceNodes[i].writeAttribute("id", null);
			this.priceNodes[i].setStyle(this.priceStyles[i]);
			this.priceNodes[i].innerHTML = this.viewport[i] ? this.viewport[i] : "";
		}
	},
	/**
	 * Seleziona il valore corrispondente al contenuto passato nel parametro
	 * @param {String} content
	 */
	selectValue: function(content){
		// aggiungere qualche controllo formale qua
		this.selectedIndex = this._getSelectedIndexFromElement(content);
		this.viewportIndex = this.selectedIndex - 2;
		this.viewport = this.prices.slice(Math.max(this.viewportIndex, 0), this.viewportIndex + this.viewportLength);
		for(var i = 0; i > this.viewportIndex; i--){
			this.viewport.splice(0, 0, "");
		}
		this.onChange.call(this);
		this.renderPriceArc();
	},
	/**
	 * Sostituisce il simbolo dell'euro con l'entita' corretta
	 * @param content
	 */
    fixContent: function(/** String */content){
        return content.replace(/\u20AC/, "&euro;");
    },
	/**
	 * Seleziona il prezzo al click
	 * @param {Event} e
	 */
	selectTarget: function(e){
		if(this.disabled){ return; }
		this.onArrowClick();
		var content = e.element().innerHTML;
		this.selectValue(this.fixContent(content));
	},
	/**
	 * Sposta il prezzo selezionato verso uno maggiore, se disponibile
	 * @param {Event} e
	 */
	increment: function(e){
        if(this.disabled){ return; }
        this.onArrowClick();
		var prices = this.prices
		;
		this.rCounter = (this.rCounter + 1 ) % 5;
		var vpi = this.viewportIndex;
		vpi++;
		if(vpi > prices.length - 3/*6*/){ return; }
		this.viewportIndex = vpi;
		this.viewport = prices.slice(Math.max(0, vpi), vpi + this.viewportLength);
		for(var i = 0; i > vpi; i--){
			this.viewport.splice(0, 0, "");
		}
		this.renderPriceArc();
		this.onChange.call(this);
	},
	/**
	 * Sposta il prezzo selezionato verso uno minore, se disponibile
	 * @param {Event} e
	 */
	decrement: function(e){
        if(this.disabled){ return; }
        this.onArrowClick();
		var prices = this.prices,
			self = this
		;
		this.rCounter = (this.rCounter + 1 ) % 5;
		var vpi = this.viewportIndex;
		vpi--;
		if(vpi < -2){ return; }
		this.viewportIndex = vpi;
		this.viewport = this.prices.slice(Math.max(0, vpi), vpi + this.viewportLength);
		for(var i = 0; i > vpi; i--){
			this.viewport.splice(0, 0, "");
		}
		this.renderPriceArc();
		this.onChange.call(this);
	},
	/**
	 * Invocata quando c'e' un cambiamento del valore dell'oggetto corrente
	 */
	onChange: function(){
		// hook
	},
	/**
	 * Da rimuovere, a meno che non sia usata come hook dall'esterno (improbabile)
	 * @param value
	 */
	setValue: function(/** Integer */ value){
		//this.value = value;
	},
	/**
	 * Restituisce il valore numerico selezionato in questo PriceChooser
	 * @returns {Number} Il valore corrente
	 */
	getValue: function(){
		return this.data.prices[this._getSelectedIndexFromElement(this.viewport[this.viewportSelectedIndex])].v;
	},
	/**
	 * Disabilita il PriceChooser corrente, nascondendo anche i tasti relativi al cambio di importo
	 * @see ch.exmachina.bravofly.PriceChooser#enable
	 */
	disable: function(){
        this.minusNode.style.display = "none";
        this.plusNode.style.display = "none";
		this.disabled = true;
		var pn = this.priceNodes,
		    ps = this.priceStyles
		;
        for(var i = 0; i < pn.length; i++){
            pn[i].style.color = ps[i].disabledColor;
        }
        this.onDisable();
	},
	/**
	 * Abilita il PriceChooser corrente, mostrando anche i tasti relativi al cambio di importo
	 * @see ch.exmachina.bravofly.PriceChooser#disable
	 */
	enable: function(){
        this.minusNode.style.display = "block";
        this.plusNode.style.display = "block";
		this.disabled = false;
        var pn = this.priceNodes,
            ps = this.priceStyles
        ;
        for(var i = 0; i < pn.length; i++){
            pn[i].style.color = ps[i].color;
        }
        this.onEnable();
	},
	/**
	 * Gestore dell'evento "onclick" sull'intero oggetto
	 * @param {Event} evt
	 */
	click: function(evt){
		if(this.disabled){ return; }
		var target = evt.element();
		if(target !== this.domNode){ return; }
	},
	/**
	 * Restituisce il nome della classe, modificare secondo l'utilita' per fare debug
	 */
	toString: function(){
		return "[ch.exmachina.bravofly.PriceChooser]";
	}
};