var bricks = window.bricks || {};
bricks.MultipleStateImage = class extends bricks.Layout {
	/* 
	{
		state:
		urls:{
			state1:url1,
			state2:url2,
			...
		}
		width:
		height:
	}
	*/
	constructor(opts){
		super(opts);
		this.state = this.opts.state
		var desc = {
			urls : this.opts.urls[this.state],
			width:this.opts.width,
			height:this.opts.height
		}
		this.img = new bricks.Image(desc);
		this.add_widget(this.img);
		this.img.bind('click', this.change_state.bind(this));
	}
	set_state(state){
		this.state = state;
		this.img.set_url(this.opts.urls[state]);
	}

	change_state(event){
		event.stopPropagation();
		var states = Object.keys(this.opts.urls);
		for (var i=0;i<states.length;i++){
			if (states[i] == this.state){
				var k = i + 1;
				if (k >= states.length) k = 0;
				this.state = states[k];
				this.img.set_url(this.opts.urls[this.state]);
				this.dispatch('state_changed', this.state);
				break;
			}
		}
	}
}

bricks.MultipleStateIcon = class extends bricks.Icon {
	constructor(opts){
		opts.url = opts.urls[opts.state];
		super(opts);
		this.state = opts.state;
		this.urls = opts.urls;
		this.bind('click', this.change_state.bind(this));
	}
	change_state(event){
		event.stopPropagation();
		var states = Object.keys(this.urls);
		for (var i=0;i<states.length;i++){
			if (states[i] == this.state){
				var k = i + 1;
				if (k >= states.length) k = 0;
				this.set_state(states[k]);
				this.dispatch('state_changed', this.state);
				break;
			}
		}
	}
	set_state(state){
		this.state = state;
		this.set_url(this.urls[state]);
	}

}
bricks.Factory.register('MultipleStateImage', bricks.MultipleStateImage);
bricks.Factory.register('MultipleStateIcon', bricks.MultipleStateIcon);