WebShop.Products = {

	initialize: function(view) {
		this.element = $('productList');
		if (this.element.getElement('.productContainer')) {
			thumbnails = this.element.getElements('.thumbnail img');
			this.updateView(view);
		}
	},
	
	thumbnails: [],
	
	thumbnailSize: {
		block: [120,120],
		large: [80,80],
		small: [40,40],
		list:  [1,1]
	},
	
	view: '',
	
	updateView: function(view) {
		if (view == this.view) return;
		if (!view) view = this.view;
		var lastButton = $(this.view+'View');
		if (lastButton)
			lastButton.removeClass('selected').set('type', 'submit');
		var button = $(view+'View');
			button.addClass('selected').set('type', 'button');
		this.view = view;
		var container = $('productList').getElement('.productContainer');
		container.className = 'productContainer '+view+'View'; 
		if (view != 'list') thumbnails.each(function(img){
			var s = WebShop.Products.thumbnailSize[view];
			console.log(img.getStyle('background-image').replace(/[0-9]+x[0-9]+/,s[0]+'x'+s[1]).replace(/url\(([^'"])/, 'url("$1').replace(/([^'"])\)/, '$1")'));
			img.setStyle('background-image', img.getStyle('background-image').replace(/[0-9]+x[0-9]+/,s[0]+'x'+s[1]).replace(/url\(([^'"])/, 'url("$1').replace(/([^'"])\)/, '$1")'));
		});
		WebShop.Products.resizeInfo(container);
		container.getElements('.info').each(function(info){
			info.setStyle('margin-right', view == 'block' ? 0 : info.getNext('.buttons').offsetWidth + 10);
		});
		Cookie.write('productView', view);
	},

	resizeInfo: function(container) {
		container.getElements('.info').each(function(info){
			info.setStyle('margin-right', container.hasClass('blockView') ? 0 : info.getNext('.buttons').offsetWidth + 10);
		});
	}

};

window.addEvent('domready', function() {
	//document.getElements('.productList .productContainer').each(function(el){
	//	WebShop.Products.resizeInfo(el);
	//});
});

Hash.extend(WebShop.Products, WebShop.ajaxUnavailable() ? {

	refresh: function(href) {
		window.location.href = window.location.href;
	}

} : {

	request: new Request({
		onRequest: function() {
			
			var overlay = new Element('div').setStyles({
				position: 'absolute',
				left: WebShop.Products.element.getLeft(),
				top: WebShop.Products.element.getTop(),
				width: WebShop.Products.element.getWidth(),
				height: WebShop.Products.element.getHeight(),
				zIndex: 999,
				cursor: 'wait',
				backgroundColor: '#fff',
				opacity: 0.8
			}).inject(WebShop.Products.element, 'after');

			var loading = new Element('div', { 'class': 'coz-loading' }).inject(overlay);
			
			var delay = 2;
			var x = 128-delay*16, d = 1;
			WebShop.Products.timer = (function(){
				if (x == 128-delay*16) d =  1;
				if (x == 464+delay*16) d = -1;
				x += d*16;
				loading.setStyle('background-position', [x,0]);
			}).periodical(1000/15, this);
		},
		onComplete: function(data) {
			$clear(WebShop.Products.timer);
			WebShop.clearMessage();
			WebShop.initialize(WebShop.Products.element.empty().set('html', data));
			WebShop.Products.thumbnails = WebShop.Products.element.getElements('.thumbnail img');
			WebShop.Products.updateView();
			WebShop.Products.element.getNext().destroy();
		}
	}),

	refresh: function(href) {
		WebShop.Products.request.get(window.location.href+(window.location.href.contains('?')?'&':'?')+'ajax=true');
	}

});