karw.productShow = new Class({
	
	Implements: [Events,Options],
	
	ImageContainerName: 'slideContainer',
	ImageContainer: null,
	ImageWidth: 960,
	ImageHeight: 364,
	CurrentSlide: 0,
	detailStatus: false,
		
	BtnPrevName: 'prevbtn',
	BtnPrev: null,
	BtnNextName: 'nextbtn',
	BtnNext: null,

	IItemKey: null,
	HouseItems: null,
	imageArray: [],
	imageObjArray: [],
	jsonUrl: karw.context+ '/showcased_products/',
    	
	initialize: function(IItemKey){
		this.ImageContainer = $(this.ImageContainerName);
		this.BtnPrev = $(this.BtnPrevName);
		this.BtnNext = $(this.BtnNextName);
		this.IItemKey = IItemKey;
		this.retreiveHouseAreaItems();
		this.activeButtons();
    },
    
    retreiveHouseAreaItems: function(){
    	var request = new Request.JSON({
    		method: 'get',
        	url: this.jsonUrl,
        	onComplete: this.fillHouseAreaItems.bind(this)
        });	
        request.send('item='+this.IItemKey);
    },
    
    fillHouseAreaItems: function(jsonObject){
    	this.HouseItems = jsonObject.houseitems;

    	if($chk(this.HouseItems.length > 0)){
    		// Log to sitecatalyst
    		trackSfeerImageLanding(this.HouseItems[0]);

    		this.HouseItems.extend([jsonObject.houseitems[0]]);
	    	var containerWidth = this.ImageWidth*this.HouseItems.length;
	    	//this.imageArray = [];
	    	this.ImageContainer.setStyle('width',containerWidth+'px');
	    	for(i=0;i<this.HouseItems.length;i++){
	    		var item = this.HouseItems[i];
	    		var imageElement = new Element('img');
	    		if(i == 0){
	    			imageElement.set('src',item.image);
	    		}
	    		else {
	    			imageElement.set('src','/static/images/blank.gif');
	    		}
	    		imageElement.set('alt',item.imageAlt);
	    		imageElement.setStyle('width',this.ImageWidth+'px');
	    		imageElement.setStyle('height',this.ImageHeight+'px');
	    		imageElement.injectInside(this.ImageContainer);
	    		this.imageObjArray[i] = imageElement;
	    		this.imageArray[i] = item.image;
	    		
	    	}
			
	    	var loadedImages = [];
			new Asset.images(this.imageArray[0], {
				onProgress: function(i) {
					loadedImages[i] = this;
				},
				onComplete: function() {
					if(this.HouseItems.length == 2){
			    		$('scrollButtons').setStyle('display','none');
			    	}
					$('loader').setStyle('display','none');
					this.ImageContainer.setStyle('opacity','1');
					this.setDetails();
					var myFx = new Fx.Tween($('detailBox'));
					myFx.start('opacity', 0 ,1);
	
				}.bind(this)
	    	});
			//force slide back to first image after browser refresh.
			var myFx = new Fx.Scroll('productSlide',{transition: 'expo:out',duration: 1000});
    		myFx.set(0,0);

    	}else{
    		$('loader').setStyle('display','none');
    		$('fallback').setStyle('display','inline');
    	}
    },
    
   
    activeButtons: function(){
    	this.BtnPrev.addEvent('click',this.showSlide.bind(this,-1));
    	this.BtnNext.addEvent('click',this.showSlide.bind(this,1));
    	$('detailBox2').getElement('div.sub-block').addEvent('click',function(e){
    		if(this.detailStatus === false){
    			this.detailStatus = true;
    			trackSfeerImageDetails(this.HouseItems[this.CurrentSlide]);
    		}else{
    			this.detailStatus = false;
    		}			
    		return false;
    	}.bind(this));
    },
    
    disableButtons: function(){
    	$('shield').setStyle('display','inline');
    },
    
    enableButtons: function(){
    	$('shield').setStyle('display','none');
    },
    
    showSlide: function(direction){
    	this.disableButtons();

    	var boundMax = this.HouseItems.length - 1;
    	var newSlide = this.CurrentSlide + direction;

    	if(boundMax < newSlide){
    		if(this.imageObjArray[1].src.indexOf("blank.gif") > 0) {
		    	this.imageObjArray[1].set('src',this.imageArray[1]);
		    	this.fireEvent('load',[this.imageObjArray[1]]);
    		}
    	}else if(newSlide == -1){
    		if(this.imageObjArray[boundMax - 1].src.indexOf("blank.gif") > 0) {
		    	this.imageObjArray[boundMax - 1].set('src',this.imageArray[boundMax - 1]);
		    	this.fireEvent('load',[this.imageObjArray[1]]);
    		}
    	}
    	else{
    		if(this.imageObjArray[newSlide].src.indexOf("blank.gif") > 0) {
		    	this.imageObjArray[newSlide].set('src',this.imageArray[newSlide]);
		    	this.fireEvent('load',[this.imageObjArray[newSlide]]);
    		}
        }
    	
		var myFx = new Fx.Scroll('productSlide',{transition: 'expo:out',duration: 1000});

    	if(boundMax < newSlide){
    		myFx.set(0,0);
    		this.CurrentSlide = 1;
    		
    	}else if(newSlide == -1){
    		myFx.set(this.ImageWidth * boundMax,0);
    		this.CurrentSlide = boundMax - 1;
    
    	}
    	else{
    		this.CurrentSlide = this.CurrentSlide + direction;
        }
    	myFx.start(this.ImageWidth*this.CurrentSlide ,0).chain(this.enableButtons.bind(this));    
    	this.setDetails();
    	
    	if(this.detailStatus === true){
			trackSfeerImageDetails(this.HouseItems[this.CurrentSlide]);
		}
    	
    	trackSfeerImageSelect(this.HouseItems[this.CurrentSlide]);
    	
    },
    setDetails: function(){
    	
    	var currentItem = this.HouseItems[this.CurrentSlide];
    	var title = currentItem.title;
    	var products = currentItem.products;
    	
    	$('detailBox').getElement('strong').innerHTML = title;
    	    	
    	$('sliderBoxHolder').empty();
    	    	
    	// $('detailContainer').innerHTML='';
    	    	
    	var sliderBox = new Element('div', {id:'sliderBox'});
    	var detailContainer = new Element('ul', {id:'detailContainer'} );
    	    	
    	sliderBox.grab(detailContainer);
    	$('sliderBoxHolder').grab(sliderBox);
    	    	    	    	
    	if(products.length > 0){
	    	for(i=0;i<products.length;i++){
	    		var liElement = new Element('li');
	    		var strongElement = new Element('strong');
	    		strongElement.set('html',products[i].name);
	    		strongElement.injectInside(liElement);
	    		var description = products[i].description;
	    		if (description && description.trim() > '') {
		    		var descriptionElement = new Element('p');
		    		descriptionElement.set('html',products[i].description);
		    		descriptionElement.injectInside(liElement);
	    		}
	    		/*
	    		var emElement = new Element('em');
	    		emElement.set('html',products[i].description);
	    		emElement.injectInside(liElement);
	    		console.log(products[i]);
	    		*/
	    		//console.log(products[i]);
	    		var pElement = new Element('p');
	    		if (products[i].isAction) {
	    			var regularElement =  new Element('del');
	    			regularElement.set('html',products[i].regularPriceLabel + ' ' + products[i].regularPriceFormatted + " ");
	    			regularElement.injectInside(pElement);
	    			
	    			var actionElement =  new Element('ins');
	    			actionElement.set('html',products[i].actionPriceLabel + ' ' + products[i].actionPriceFormatted + " ");
	    			actionElement.injectInside(pElement);

	    		} else {
	    			var regularElement =  new Element('ins');
	    			regularElement.set('html',products[i].regularPriceLabel + ' ' + products[i].regularPriceFormatted + " ");
	    			regularElement.injectInside(pElement);
	    		}
	    		pElement.injectInside(liElement);
	    		liElement.injectInside($('detailContainer'));
	    	}
	    	var element = $('sliderBox');		
	    	vsbCreateSlider(element, 100, 'vsbContent', 'vsbScrollbar', 'vsbHandle');	
	    	
    	}else{
    		var liElement = new Element('li');
    		var pElement = new Element('p');
    		pElement.set('html',"Geen producten beschikbaar in deze afbeelding");
    		pElement.injectInside(liElement);
    		liElement.injectInside($('detailContainer'));
    	}
    	
    }


});