var horzScrollBehavior = Class.create({
	initialize: function(container_id) {
		this.prefix_id = container_id;
		this.element_count = 0;
		this.element_select = 0;
		this.holder = $(container_id + '_holder');
		this.holder_icons = $(container_id + '_icons');
		this.itemsClassname = 'shop_sel_holder';
		this.holder_Width = 0;
		this.holder_icons_Width = 0;
		this.left_button = new Element("a", { 'class': "scroll_left_button", href: "#", id: container_id + "_leftBttn" }).update("<");
		this.right_button = new Element("a", { 'class': "scroll_right_button", href: "#", id: container_id + "_rightBttn" }).update(">");
		if (Prototype.Browser.IE) { // IE positioneerd de knoppen incorrect :(
			if (getInternetExplorerVersion() < 8.0) {
				this.left_button.setStyle({marginTop: "-77px" });
				this.right_button.setStyle({marginTop: "-77px" });
			}
		}
		
		
		this.card_pos = 0;	
		this.cards_count = 0;
		this.card_width = 0
		
		this.initUI();		
	},
		
	initUI: function () {
		// alert("init!");
		
		this.holder_Width = this.holder.getWidth();
		
		
		// Get total width of all icons
		var icons_elements =  this.holder_icons.select("." + this.itemsClassname);		
		this.element_count = icons_elements.length;		
		var totalwidth = 0;		
		for (e = 0; e < this.element_count; e++) {
			totalwidth = totalwidth + icons_elements[e].getWidth() + 12;
		}
		this.holder_icons.setStyle({ width: totalwidth + "px"});	
		totalwidth = totalwidth // + 28
		
		this.cards_count = totalwidth / (this.holder_Width - 24)
		this.card_width = totalwidth / this.cards_count
		
		this.cards_count = Math.ceil(this.cards_count) - 1;
		
		// add buttons for scrolling
		this.right_button.setStyle({ marginLeft: (this.holder_Width) - 14 + "px", display: "none" });
		this.right_button.observe("click", this._handleButton);
		
		this.left_button.setStyle({ display: "none" });
		this.left_button.observe("click", this._handleButton);
		
		this.holder.appendChild(this.left_button);
		this.holder.appendChild(this.right_button);
		
		// this.holder.insert(this.left_button, { position: "top" });
		// this.holder.insert(this.right_button, { position: "top" });
		
		this.setupButtonVis();
	},		
		
	_handleButton: function (event, horzClass) {
		buttonid = this.id;
		switch(event.type) {
			case "click":				
				if (buttonid == shop_scroll.prefix_id + "_leftBttn") {
					shop_scroll.moveIcons(-1);
				} else {
					shop_scroll.moveIcons(1);				
				}				
			break;			
		}
	},	
	moveIcons: function (position) {
		
		if ((position < 0) && (this.card_pos == 0)) {
			return ;
		}
		
		if ((position > 0) && (this.card_pos == this.cards_count)) {
			return ;
		}
		
		
		
		
		this.card_pos = this.card_pos + position;	
		mLeft = (this.card_pos * this.card_width) 
		mLeft = mLeft - 18
		
		
		new Effect.Morph(this.holder_icons, 
		{ 	style: { marginLeft: -mLeft + 'px'} , 
			duration: 1, 
			transition: Effect.Transitions.spring		
		});
		
		this.setupButtonVis();
	},			
	setupButtonVis: function() {
		if (this.card_pos == 0) {
			this.left_button.fade();
		} else {
			if (!this.left_button.visible()) {
				this.left_button.appear();			
			}
		}
		
		if (this.card_pos >= this.cards_count) {
			this.right_button.fade();
		} else {
			if (!this.right_button.visible()) {
				this.right_button.appear();			
			}
		}
		
		
		
	}
});

function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
			rv = parseFloat(RegExp.$1);
    }
   return rv;
}