(function(jq){
	jq(document).ready(function(){
		Viewer = $.klass({
		
			IMG: '<img width="30" height="30" src="images/thumbs/@url@" />',
		
			products: null,
			category: null,
			index: null,
		
			initialize: function() {
				// console.log('Viewer created!');
				var self = this;
				this.products = jq('#doc').data('products');
				jq(document).bind('productchange', function(){
					self.onProductChange.apply(self, arguments);
				});
				jq(document).bind('productsload', function(event, update){
					self.products = update;
				})
				jq(document).bind('imagechange', function(event, update){
				    //for(var i in update)
				        //alert(i +': '+update[i]);
					self.onImageChange.apply(self, arguments);
				})
			},
			
			
			onImageChange: function(event, update){
				jq('.figure', this.element).empty()
				    .html('<img id="ldr" src="images/ajax-loader.gif" />');
				jq('#ldr').css({marginLeft: (611-16)/2, marginTop: (409-16)/2});
					
				var img = new Image();
				var self = this;
				img.onload = function() {
					return self.show.call(self, img);
				};
				img.src = 'images/products/'+update.url;
			},
			
			
			error: function(){
			    return jq('.figure', this.element).empty().append(
			        '<p class="error">asset missing!</p>'
			    ); 
			},
			
			
			setHeader: function(product) {
				jq('h1', this.element).attr('class', 'sifr').html(product.title);
				sIFR.replace(today, {
                        selector: 'h1.sifr',
                        css: '.sIFR-root {color: #F1EDA8;}',
                        wmode: 'transparent',
                        offsetTop: 2
                    }); 
                return;
			},
			
			
			setThumbs: function(product) {
				var self = this;
				return jq('.thumbs li a').each(function(i) {
					if (jq(this).hasClass('active')) {
							jq(this).removeClass('active');
					};
					if (i === 0) {
						jq(this).addClass('active');
					};
					var fragment = self.IMG.slice(0, self.IMG.length);
					jq(this).attr('href', 'images/'+product.images[i]).empty()
						.html(fragment.replace(/@url@/g, product.images[i]));
				});
			},
			
			
			setDescription: function(product) {
				return jq('p', this.element).html(product.description);
			},
			
			
			setImage: function(product) {
				return this.onImageChange(null, {url: product.images[0]});
			},
			
			
			onProductChange: function(event, update) {
				var cat = this.getCategory(update);
				var ind = parseInt(update.index);
				var self = this;
				if (update.category !== this.category || ind !== this.index) {
					var product = this.getProduct(cat, ind);
					this.category = update.category;
					this.index = ind;
					if (product.images !== undefined) {
    					return jq.each(['Header', 'Description', 'Thumbs', 'Image'], function() {
    						self['set'+this].call(self, product);
    					});
					}
					else {
					    this.error();
					};
					
				};
			},
			
			
			show: function(img) {
			    //alert(img);
				jq('.figure', this.element).empty().append(img);
				jq('.figure img').hide().fadeIn('slow');
				return;
			},
			
			
			getCategory: function(categories) {
				var cat = categories.category.replace(/-/g, ' ');
				return this.products[cat.replace(/\b[a-z]/g, function(){
					return arguments[0].toUpperCase();
				})];
			},
			
			
			getProduct: function(products, index) {
				var ret = null, i = 0;
				jq.each(products, function() {
					if(index === i) {
						ret = this;
						return false;
					};
					i++;
				});
				return ret;
			}
			
		});
		
		
		Thumbs = $.klass({
		
			initialize: function() {
				var self = this;
				this.element.click(function(){
				    self.highlight.call(self, 'active');
					jq(document).trigger('imagechange', {
					    url: this.href.split('images/')[1], position: jq(this).attr('rel')
                    });
					return false;
				});
			},
			
			highlight: function() {
			    jq('.thumbs li a').removeClass('active');
				return this.element.addClass('active');
			}
			
		});
		
		
		Count = $.klass({
		
			initialize: function() {
				var self = this;
				jq(document).bind('imagechange', function() {
				    self.update.apply(self, arguments)
				});
				jq(document).bind('productchange', function(){
					self.update.apply(self, [arguments[0], {position: 'pos1'}]);
				});
			},
			
			update: function(e, o) {
			    var txt = o.position.split('pos')[1];
			    this.element.html('<span>'+txt+'</span> of 4');
			}
			
		});
	})
})(jQuery);