var HScrollerOpt = {
		elem_width: 106,
		btn_width: 24,
		classes: {
			window: 'hscroller-window',
			left_btn: 'hscroller-left-btn',
			right_btn: 'hscroller-right-btn',
			wrapper: 'hscroller-wrapper'
		},
		scroll_amount: 116
};

var HScroller_as_image = function (e){
	e.preventDefault();
	Slimbox.open('get.php?i.' + this.get('id'));
};

var HScroller_as_promo = function (e) {
	e.preventDefault();
	tvs_ajax.get_content($('shop-content'), 'index.php?id=' + this.get('id'));
}

var HScroller = new Class({
	initialize: function(place, callback) {
		this.callback = callback || function(e) {e.preventDefault();};
		this.opt = HScrollerOpt; 
		this.place = place;
		this.place.addClass(this.opt.classes.wrapper);
		this.line = null;
		this.left_btn = null;
		this.right_btn = null;
		this.window = null;
		
		this.offset = 0;
		
		this.allow_left = false;
		this.allow_right = true;		
		this.construct();

		this.fx = new Fx.Scroll(this.window);
		
		this.right_btn.addEvent('click', this.right_pressed.bind(this));
		this.left_btn.addEvent('click', this.left_pressed.bind(this));
	},
	
	left_pressed: function(){
		if(!this.allow_left)
			return;

		this.offset -= this.opt.scroll_amount;
		this.fx.start(this.offset, 0);
		this.allow_right = true;
		this.right_btn.set('class', this.opt.classes.right_btn + '-active');
		
		if(this.offset <= 0) {
			this.left_btn.set('class', this.opt.classes.left_btn);
			this.allow_left = false;
		}
	},
	
	right_pressed: function(){		
		if(!this.allow_right)
			return;

		this.offset += this.opt.scroll_amount;
		this.fx.start(this.offset, 0);
		this.allow_left = true;
		this.left_btn.set('class', this.opt.classes.left_btn + '-active');
		
		if(this.offset + this.window.getSize().x > this.line.getSize().x) {
			this.right_btn.set('class', this.opt.classes.right_btn);
			this.allow_right = false;
		}
	},

	construct: function() {
		var childs = this.place.getChildren();
		w = 0;
		for(var i = 0; i < childs.length; ++i) {
			childs.addEvent('click', this.callback);
			w += this.opt.elem_width;
		}
		
		var win_width = this.place.getSize().x - this.opt.btn_width * 2 - 2; // For borders
		this.left_btn = new Element('div', {'class': this.opt.classes.left_btn});
		this.window = new Element('div', {'class': this.opt.classes.window,'styles': {'width': win_width + 'px'}});
		this.right_btn = new Element('div', {'class': this.opt.classes.right_btn + '-active'});
		
		if(childs.length <= 2) {
			this.right_btn.set('class', this.opt.classes.right_btn);
			this.allow_right = false;
		}
		
		if(!Browser.Engine.trident) {
			this.window.setStyle('position', 'relative');
		}
		w = w + (childs.length - 1) * 10;
		this.line = new Element('div', {'styles': {'width': w + 'px'}});
		for(var i = 0; i < childs.length; ++i) {
			if(i != 0)
				new Element('span', {'styles': {'padding': '0px 5px'}}).inject(this.line, 'bottom');
			childs[i].inject(this.line, 'bottom');
		}
		
		this.line.inject(this.window);
		
		this.left_btn.inject(this.place);
		this.window.inject(this.place);
		this.right_btn.inject(this.place);
		new Element('div', {'styles': {'clear': 'both'}}).inject(this.place);
	}
});