window.addEvent('domready', function() {

	var linkText = {
		'true': 'Info',
		'false': 'Lukk'
	};
	
	var slidingDivs = $$(".slidingdiv");
	//array to store all of the collapsibles
	var collapsibles = new Array();
	var collapsible_items = new Array();
	
	/*####################################################################
	###################### add tooltip to cart items #####################
	####################################################################*/
	var myTips = new Tips('.mootoolsTooltip',{'className' : 'mooTooltip'});			
	
	/*####################################################################
	############################ color tooltip ###########################
	####################################################################*/
	var colorTips = new Tips('.colorselector',{'fixed' : true, 'text': $empty, 'className' : 'mooTooltip','offset':{'x': 22, 'y': 22}});

	/*####################################################################
	############### add mouseover event for product pictures #############
	####################################################################*/
	$$(".product_img").each(function(el){
	
		var magnifier = el.getChildren('.image_toplayer');
		
		//magnifier event
		var magnifierEvent = function(){ 
			//get source on mouseover
			productImgSrc = el.getChildren('img').getProperty('src') + ' ';
			//replace source path
			var newSrc = productImgSrc.replace("/thumbs", "/large");
			var newSrc = newSrc.replace("/pic", "/large");
			
			//hide magnifier
			magnifier.setStyle('visibility', 'hidden');
			
			//add higslide
			return hs.expand(el, { src: newSrc  } );
		}
			
		el.addEvents({
		
			'mouseover' :function(){
				
				//show magnifier
				magnifier.setStyle('visibility', 'visible');
				//add click event
				this.addEvent('click', magnifierEvent);
		
			},
			
			'mouseout': function(){
				
				//hide magnifier
				magnifier.setStyle('visibility', 'hidden');
				//add click event
				this.removeEvent('click', magnifierEvent);
			}
		});//addevents
	});//each

	/*####################################################################
	#################### add click event for colors ######################
	####################################################################*/
	$$(".colorselector").each(function(el){
		
		el.addEvent('click', function(){
			//make all other selected colors white border
			$$(".colorselector").each(function(e){
				e.setStyles({'border': '1px solid #fff'});
			});
			
			//extract parameters for pic change
			colorselector_id = this.getProperty('id');
			colorselector_data = colorselector_id.split("_");
			product_id = colorselector_data[1];
			color_id = colorselector_data[3];
			
			//get new picture source, according to selected color
			new_picturesrc = this.getProperty('rel');
			
			//get product image
			prodimg = $('productimg_' + product_id);
			
			//change picture
			prodimg.setProperty('src',new_picturesrc);
			
			//make dark border for this colorselector
			this.setStyles({'border': '1px solid #bebeb7'});
		});
		
	});
	
	/*####################################################################
	############## add slide function event for product info #############
	####################################################################*/

	slidingDivs.each(function(el, i){
	
		var slidediv = new Fx.Slide(el).hide();
		var slidediv_id = el.getProperty('id');
		
		//and store it in the array
        collapsibles[i] = slidediv;
		collapsible_items[i] = slidediv_id;
		
		$(slidediv_id + '_a').addEvent('click', function(e){
			e.stop();
			
			slidingDivs.each( function(elem, i) {
				//if another is open, then close it
				if(collapsibles[i].open){
					collapsibles[i].slideOut();
					//and switch text
					$(collapsible_items[i] + '_a').set('html', linkText['true']);
					
				}
				//collapsibles[i].hide();
			});

			
			slidediv.toggle();
			$(slidediv_id + '_a').set('html', linkText[slidediv.open]);
		});
		
		
	});//each
	
});