jq.milon.product = {
		
		init: function() {
			
			this.ct = jQuery('#content-left').get(0); 
			this.buildMarkup();
			this.appendImages();
			
			this.detailImg = jQuery('img.product-images-detail', this.ct).get(0);
		},
		
		onEvent: function(e) {
			var sc = e.data.scope;
			var fn = e.data.fn;
			sc[fn] && sc[fn].call(sc, e);
		},
		
		buildMarkup: function() {
			
			var flashHtml = '';
			var flashFile = jQuery(".info-box-product-flash-link").html();	
			if (flashFile) {
				var popupLink = '/fileadmin/templates/php/produkt-flash.php?flashFile='+encodeURIComponent(flashFile);
				flashHtml += '<a style="display: block; margin-bottom: 15px;" onclick="vHWin=window.open(\''+popupLink+'\',\'FEopenLink\',\'resizable=1,width=700,height=500\');vHWin.focus();return false;" target="FEopenLink" href="'+popupLink+'">';
				flashHtml += '<img src="/fileadmin/templates/img/produkt/flash-content.gif" width="80" height="72" style="height: 72px !important;">';
				flashHtml += '</a>';
			}
			
			var html = [
				'<div class="product-images">',
					'<img src="" class="product-images-detail">',
					'<div class="product-images-thumbs">',
						flashHtml,
						'<div class="product-images-thumbs-headline">'+jq.milon.cfg.lang.product_view+':</div>',
						'<div class="product-images-thumbs-img"></div>',
					'</div>',
				'</div>'
			].join('');
			
			jQuery(this.ct).append(html);
		},
		
		appendImages: function() {
			this.img = jQuery('.csc-textpic-imagewrap img', this.ct);
			jQuery(this.img).removeAttr('width').removeAttr('height').appendTo('div.product-images-thumbs-img').wrap('<div class="product-images-thumbs-outer"></div>');
			
			jQuery('.product-images-thumbs-outer').bind('click', {fn: 'onClick', scope: this}, this.onEvent);
			
			jQuery('div#content-left img.product-images-detail').attr('src', jQuery(this.img[0]).attr('src'));
			jQuery('#content-left .product-images-thumbs-outer:first').css({'display': 'none'});
		},
		
		onClick: function(e) {
			var n = e.target;
			if (n.tagName.toLowerCase() != 'img') {
				n = jQuery('img', n).get(0);
			}
			
			var outer = jQuery(n).parent();
			
			if (!n) return;
			
			jQuery(this.detailImg).fadeTo(600, 0.00,
				function() {
					jQuery(this).attr('src', jQuery(n).attr('src')).fadeTo(600 ,1);
					jQuery('#content-left .product-images-thumbs-outer').css({'display': ''});
					jQuery(outer).css({'display': 'none'});
				}
			);
			
		}
		
	};
	
	
	jQuery(document).ready(function () {
		jq.milon.product.init();
		
		jQuery(".info-box-product-mat-field").tooltip({
			tip: '#product-color-tooltip',
			offset: [-2, 0],
			events: { 
			    def:       "mouseover,mouseout",  
			    tooltip:   "click, mouseover mouseout" 
			},
			onBeforeShow: function() {
				var tip = this.getTip();
				var tr = this.getTrigger();
				var src = jQuery(tr[0]).attr('src');
				var title = jQuery(tip[0]).html();
				var html = '<div class="product-color-tooltip-headline">'+title+'</div><img src="'+src+'" />';
				jQuery(tip[0]).html(html);
			}
			
		}); 
		
		jQuery(".info-box-product-colors-field").tooltip({
			tip: '#product-color-tooltip',
			offset: [-2, 0],
			events: { 
			    def:       "mouseover,mouseout",  
			    tooltip:   "click, mouseover mouseout" 
			},
			onBeforeShow: function() {
				var tip = this.getTip();
				var tr = this.getTrigger();
				var src = jQuery(tr).attr('src');
				var title = tip.html();
				var html = '<div class="product-color-tooltip-headline">'+title+'</div><img src="'+src+'" />';
				jQuery(tip).html(html);
			}
		}); 
		
	});