var UI = {
	l_visible: 0,
	s_open: 0,
	margin: 0,
	sl_width: 0,
	
	startup: function(){
		Try.these(UI.login);
		Try.these(UI.slider);
		Try.these(UI.qty);
		Try.these(UI.size);
	},
	login: function(){
		
		$('top_login').onclick = function(){
		
			if (UI.l_visible == 0) {
				Effect.Appear('login_area');
				UI.l_visible = 1;
			}
			else{
				Effect.Fade('login_area');
				UI.l_visible = 0;
			}
			return false;
		};
		$('top_close').onclick = function(){
			
				Effect.Fade('login_area');
				UI.l_visible = 0;
			
			return false;
		};
		
		this.items = $$('a.item_link');
		this.items.each(function(item){
			item.onclick = function(){
				UI.setActive(this);
				return false;
			}
		

		})
	},
	slider: function(){
		UI.sl_width = $('sltab').getWidth();
		Element.observe('products_slider_left', 'click', UI.move_left, false);
		Element.observe('products_slider_right', 'click', UI.move_right, false);
	},
	qty: function(){
		$('qt_chng').onclick = UI.do_qty;
	},
	size: function(){
		$('st_chng').onclick = UI.do_size;
	},
	setActive: function(element){
		var current_item = $(element.rel);
		
		//$$('div.item_content_in').each(function(e){e.hide()});
			var header 	= 'h_' + element.rel;
			var cnt		= 'c_' + element.rel;
			$(header).toggleClassName('active');
			$(cnt).toggle();
		
				
	},
	move_left: function(){
	
		
		if( Math.abs(UI.margin) < UI.sl_width){
			new Effect.Move($('sltab'), {x: -83, y: 0, mode: 'relative'});
			
			UI.margin -= 83;
		}
	},
	move_right: function(){	
		
		if( UI.margin < 0){		
			new Effect.Move($('sltab'), {x: 83, y: 0, mode: 'relative'});
			UI.margin += 83;
			
		}
	},
	do_qty: function(){
		Effect.Appear('qt_c');
		var items = $$('a.p_qt');
		items.each(function(e){
			e.onclick = function(){
				var qty = this.rel;
				var id = qty.sub('qt_', '')
				Element.update('qt_c_val', id);
				Effect.Fade('qt_c');
				return false;
			}
		});
		return false;
	},
	do_size: function(){
		Effect.Appear('st_c');
		var items = $$('a.s_qt');
		items.each(function(e){
			e.onclick = function(){
				var qty = this.rel;
				var id = qty.sub('qt_', '')
				Element.update('st_c_val', id);
				Effect.Fade('st_c');
				return false;
			}
		});
		return false;
	}

};
Event.observe(window, 'load', UI.startup, false);