var UI = {
	
	l_visible: 0,
	s_open: 0,
	margin: 0,
	sl_width: 0,
	basket: new Array,
	
	startup: function(){
		Try.these(UI.login);
		Try.these(UI.faq);
		Try.these(UI.qty);
		Try.these(UI.size);
		Try.these(UI.contact);
		Try.these(UI.do_order);
	},

	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;
		};		
	},
	faq: function(){
		var items = $$('a.item_link');
		items.each(function(item){
			item.onclick = function(){
				UI.setActive(this);
				return false;
			}
		})
	},
	qty: function(){
		$('qt_chng').onclick = UI.do_qty;
	},
	size: function(){
		$('st_chng').onclick = UI.do_size;
	},
	contact: function(){
			new Validation('contact-form',{stopOnFirst:true});
	},
	order: function(){
			UI.do_order;	
	},
	setActive: function(element){
		var current_item = $(element.rel);
		var header 	= 'h_' + element.rel;
		var cnt		= 'c_' + element.rel;
		$(header).toggleClassName('active');
		$(cnt).toggle();				
	},
	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);
				$('quantity_1').value = 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);
//				$('size_1').value = id;
//				Effect.Fade('st_c');
//				return false;
//			}
		});
		return false;
	},

	do_order: function(){
		UI.basket = $$('div.o_item');
		UI.basket.each(function(item){
				UI.basket.item = item.select('li').each(function(el){
					var el_id = item.id.sub('p_', '');
					el.select('a').each(function(a){
						if(a.hasClassName('qt_c')){
							a.onclick = function(){
								$(a.rel).show();
								return false;
							}
						}
						else if(a.hasClassName('p_qt')){
							a.onclick = function(){
								var qty = this.rel;
								var id = qty.sub('qt_', '');
								
								Element.update(('val_p_' + el_id), id);
								$('quantity_' + el_id).value = id; // dm
								$(('qt_c_' + el_id)).hide();
								$('order_prod_' + el_id).submit();
								return false;
							}
						}
						else if(a.hasClassName('st_chng')){
							a.onclick = function(){
								$(a.rel).show();
								return false;
							}
						}
						else if(a.hasClassName('s_qt')){
							a.onclick = function(){
								var qty = this.rel;
								var id = qty.sub('qt_', '');
								
								Element.update(('val_s_' + el_id), id);
								$('size_' + el_id).value = id; // dm
								$(('st_c_' + el_id)).hide();
								$('order_prod_' + el_id).submit();
								return false;
							}
						}
						else if(a.hasClassName('st_chng')){
							a.onclick = function(){
								$(a.rel).show();
								return false;
							}
						}
						else if(a.hasClassName('s_qt')){
							a.onclick = function(){
								var qty = this.rel;
								var id = qty.sub('qt_', '');
								
								Element.update(('val_s_' + el_id), id);
								$(('st_c_' + el_id)).hide();
								return false;
							}
						}
						else if(a.hasClassName('ct_chng')){
							a.onclick = function(){
								$(a.rel).show();
								return false;
							}
						}
						else if(a.hasClassName('c_qt')){
							a.onclick = function(){
								var qty = this.rel;
								var id = qty.sub('qt_', '');
								
								//$('color_1').value = id;
								var image = this.down('img');
								$(('val_c_' + el_id)).src = image.src;
								
								$(('ct_c_' + el_id)).hide();
								return false;
							}
						}
					});
					
			});
		});
	
	}
};
Event.observe(window, 'load', UI.startup, false);