/**
 * Goerres Onlineshop
 *
 * @copyright  Copyright (c) 2009 M&M Online Service - www.melster-melster.de
 */

jQuery(document).ready(function(){
    
    jQuery("fieldset.product-options dl dt").removeClass('offen');
    jQuery("fieldset.product-options dl dt").addClass('zu');
    jQuery("fieldset.product-options dl dd").hide();
    
    jQuery("fieldset.product-options dl dt").qtip({
    	   content: { 
    		  title: {
    			 text: 'Details',
    			 button: ' X ' // Close button
    		  }
    	   },
    	   position: {
    		  adjust: { screen: true },
    		  corner: {
    		      tooltip: 'rightMiddle', // Use the corner...
    		      target: 'leftMiddle' // ...and opposite corner
              } 
    	   },
    	   show: {
    	      when: 'click',
    		  solo: true,
    		  effect: {
    		      length: 20
    		  } 
    	   }, // Don't specify a hide event
    	   hide: false, // Don't specify a hide event
    	   style: {
    	      'color': '#000',
    		  'background': '#fff',
    		  'width': 300,
    		  'max-height': 300,
    		  overflow: 'auto',
    		  border: {
    			 width: 4,
    			 radius: 4,
    			 color: '#333333'
    		  },
    		  title: 
    		  { 
    			 'color': '#fff', 
    			 'overflow': 'hidden',
    			 'background': '#333333'
    		  },
    		  button: 
    		  { 
    			 'color': '#fff', 
    			 'overflow': 'hidden',
    			 'background': '#333333', 
    			 'text-decoration': 'underline' 
    		  },
    		  padding: 15, 
    		  textAlign: 'left',
    		  tip: true, // Give it a speech bubble tip with automatic corner detection
    		  name: 'cream' // Style it according to the preset 'cream' style
    	   },
    	   api: {
               beforeShow: function(event) {
                   jQuery("fieldset.product-options dl dt").removeClass('offen');
                   jQuery("fieldset.product-options dl dt").addClass('zu');
                   jQuery("fieldset.product-options dl dd").hide();
                   
                   this.elements.target.removeClass('zu');
                   this.elements.target.addClass('offen');
                            
                   this.elements.target.next('dd').show(400);
                   
                   if(this.elements.target.children('div.tooltip').size() > 0){
                       this.updateContent( this.elements.target.children('div.tooltip').html() );
                       // update the width of the tooltip to fit the text -- this is needed to fix an issue with qTip
                       //this.elements.tooltip.css("width", "auto");
                       this.updatePosition(event);
                   } else {
                       this.elements.tooltip.hide();
                   }
               },
               onShow: function(event) {
                   if(this.elements.target.children('div.tooltip').size() < 1){
                       this.elements.tooltip.hide();
                   } 
               }
    	   }
	});
	
	jQuery("img.stoffbilder").qtip({
    	   content: { 
    		  title: {
    			 text: 'Details',
    			 button: ' X ' // Close button
    		  }
    	   },
    	   position: {
    		  adjust: { screen: true } 
    	   },
    	   show: {
    	      when: { event: 'mouseover' },
    		  solo: true,
    		  effect: {
    		      length: 20
    		  } 
    	   }, // Don't specify a hide event
    	   hide: {
    	     when: 'click'
    	   },
    	   style: {
    	      'color': '#000',
    		  'background': '#fff',
    		  'width': 480,
    		  overflow: 'auto',
    		  border: {
    			 width: 4,
    			 radius: 4,
    			 color: '#333333'
    		  },
    		  title: 
    		  { 
    			 'color': '#fff', 
    			 'overflow': 'hidden',
    			 'background': '#333333'
    		  },
    		  button: 
    		  { 
    			 'color': '#fff', 
    			 'overflow': 'hidden',
    			 'background': '#333333', 
    			 'text-decoration': 'underline' 
    		  },
    		  padding: 15, 
    		  textAlign: 'left',
    		  tip: true, // Give it a speech bubble tip with automatic corner detection
    		  name: 'cream' // Style it according to the preset 'cream' style
    	   },
    	   api: {
    	       beforeShow: function(event){
    	           
    	           var url = this.elements.target.attr('src').split('/');
    	           var new_url = '';
    	           var pfad = 'g_'+url[url.length-1];
    	           for(var i = url.length-2; i >= 0; i--){
    	               pfad = url[i]+'/'+pfad;
    	           }
    	           this.updateContent('<img src="'+pfad+'" alt="" />');
    	       },
               onShow: function(event) {
                   this.elements.tooltip.css("z-index", 10000);
                   this.updatePosition(event);
               }
    	   }
	});
});