/**
 * THUMBSLIDER
 *
 * horizontal slider for thumbnails
 * insprired by Carousel by Brian R Miedlar, miedlar.com
 */

var CarouselItem = Class.create();
CarouselItem.prototype = {
    initialize: function() {		
        this.value = null;
        this.element = null;
    }
};
var Thumbslider = Class.create();
Thumbslider.prototype = {

	initialize: function(carouselElement, itemWidth, itemHeight, options) {
    
        this.toggleIndex = 0;
        this.items = [];
        this.activeItem = null;
        this.activeIndex = 0;
        this.navScrollIndex = 0;
        this.duration = 1.0;
        this.options = options;
        this.itemHeight = itemHeight;
        this.itemWidth = itemWidth;
        this.moveOpacity = .6;
        this.setSize = 4;
        this.path="http://www.michelgroup.eu/";
        
        if (options.setSize) this.setSize = options.setSize;
        
        this.carouselElement = $(carouselElement);
        if(!this.carouselElement) { alert('Warning: Invalid thumbslider element: ' + carouselElement); return; }
       
   		this.itemsElement = this.carouselElement.down('.thumbs');
        if(!this.itemsElement) { alert('Warning: Class \'items\' does not exist as a child element in thumbslider: ' + carouselElement); return; }
        
        this.backElement = this.carouselElement.down('.navButton.previous');
        this.forwardElement = this.carouselElement.down('.navButton.next');
        
       
        //Event.observe(this.backElement, 'click', function() { this.scrollBack();return false; }.bind(this));
        //Event.observe(this.forwardElement, 'click', function() { this.scrollForward();return false; }.bind(this));
        
        this.backElement.onclick = function() {
				this.scrollBack();return false;
          	}.bindAsEventListener(this);
        
        this.forwardElement.onclick = function() {
				this.scrollForward();return false;
          	}.bindAsEventListener(this);
       
    },
    
    load: function() {
    
        var eList = this.itemsElement;
        this.items.clear();
        eList.select('.thumb').each(function(item) {
            
            var oCarouselItem = new CarouselItem();
            oCarouselItem.index = this.items.length;
            oCarouselItem.element = item;
            this.items.push(oCarouselItem);
            
            // store default selection
            if (item.hasClassName('selected')) {
                this.activeItem = oCarouselItem;
                this.activeIndex = this.items.size() - 1;
            }

            //if (this.options.setItemEvents) this.options.setItemEvents(this, item, oCarouselItem, this.observer);     
            var linkTag = item.down('a');
            
			// set link
			linkTag.onclick = function() {
				//Event.observe(linkTag, 'click', function(event) { // does not overwrite href attribute properly
				this.activate(oCarouselItem);
				this.loadBackground(linkTag.getAttribute('href'));
              	return false;
          	}.bindAsEventListener(this);
            
        }.bind(this));
        
        /* create loading div with image, hidden per default
        var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		document.body.appendChild(objLoading);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', 'images/loading.gif');
		objLoadingImage.setAttribute('border', '0');
		objLoading.appendChild(objLoadingImage); */
		
		//objLoading.hide();
		
        //Post processing        
        this.afterLoad();
    },
    
    afterLoad: function() {
    
        if(this.items.length == 0) {
            return;
        }
        this.scrollToIndex(this.activeIndex);        
        if(this.activeItem) this.activate(this.activeItem);
        
    },
    
    // load image set to attribute href of thumbnail to background
    // preload image, show/hide loading animation, fade in/out images
    loadBackground: function(imageLink) {
    	
    	//$('loading').show(); // display loading animation
    	
    	// get image path from url if define as ....php?param1&...&img=....
    	if (imageLink.indexOf('.html')!=-1) {
    		var au = new AlterUrl(imageLink);
    		imageLink =  this.path+"assets/images/alphablending/"+au.readVar('bgimg');
    		//alert(imageLink);
    		set_cookie(au.readVar('folder'), au.readVar('bgimg'), 360, '/');
    		//set_cookie('bgimgfolder', au.readVar('folder'), 360, '/');
    		
    	} // if
    	
    	this.toggleIndex+=1;
		bgimage = $('bgimg');
		
		if ($('bgflashstart')!=undefined) {
			// first embedding of flash uses bgflashstart as swfobject replaces div, removed when thumb selected
			$('bgflashstart').remove(); 
		} // if
		
		imgPreloader = new Image();
		
		// once image is preloaded, make image visible
		Event.observe(imgPreloader, 'load', function(event) {

			//if (bgimage!=undefined) bgimage.src=imageLink; // set new image
			var docHt = getWinHeight(); 
			/*if (docHt>maxheight) {
				docHt=maxheight;
			}*/
			imgheight = imgPreloader.height;
			imgwidth = imgPreloader.width;
			
			
			var factor = imgheight/docHt;
			var docWd = imgwidth/factor;
			$('bgimgwrapper').setStyle({height:docHt+'px'});
			$('bgimgwrapper').setStyle({width:docWd+'px'});
			 //todo change height and width of bgimgwrapper
			 
			if (bgimage!=undefined) bgimage.src=imageLink; // set new image
			 
			//timeOut = window.setTimeout(this.swapBg(imageLink), 10).bindAsEventListener(this); // delay, prevent blitzer, creates new swf movie, which is set on top of non-flash image
			this.swapBg(imageLink);
			bgcolor=au.readVar('bgcolor');
			$(document.body).setStyle({backgroundColor:bgcolor}); //change bgcolor
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		
		}.bindAsEventListener(this)); // binding to class instance
		imgPreloader.src = imageLink;
		
    	return false;
    },
    
    swapBg: function(imageLink) {
    	
    	if(!Prototype.Browser.Safari){
    	// create SWF
		var att = { data: this.path+"/assets/site/flash/bgimg.swf", width:"100%", height:"100%" };
		var par = { wmode:"transparent", flashvars: "bgimg="+imageLink };
		var id = "bgflash";
		swfobject.createSWF(att, par, id);
		}
		//$('loading').hide(); // loading animation
    },
    
    scrollForward: function() {    
        //setsize-1 at a time scrolling 
        if(this.navScrollIndex > this.items.length - (this.setSize+1)) return;
        var iIndex = this.navScrollIndex + (this.setSize-1);
        this.scrollToIndex(iIndex);
        this.activeIndex = iIndex;
    },
    
    scrollBack: function() {
        var iIndex = this.navScrollIndex - (this.setSize-1);
        if(iIndex < 0) iIndex  = 0;
        this.scrollToIndex(iIndex);
        this.activeIndex = iIndex;
    },
    
    getLeft: function(index) {
        return index * (-this.itemWidth);
    },
    
    getTop: function(index) {
        return index * (-this.itemHeight);
    },
    
    activate: function(carouselItem) {
        if (this.activeItem) { // remove style from previously selected item
        	this.activeItem.element.removeClassName('selected');
        } // if
        if (carouselItem == null) return; 
        this.activeItem = carouselItem;
        
        carouselItem.element.addClassName('selected'); // set selected style to current item
    },
    
    next: function() {
        if(this.activeItem == null) { this.activate(this.items[0]); return; }
        var iIndex = this.activeItem.index + 1;
        if(iIndex >= this.items.length) iIndex = 0;
        this.activate(this.items[iIndex]);
        this.activeIndex = iIndex;
    },
    
    previous: function() {
        if(this.activeItem == null) { this.activate(this.items[0]); return; }
        var iIndex = this.activeItem.index - 1;
        if(iIndex < 0) iIndex = 0;
        this.activate(this.items[iIndex]);
        this.activeIndex = iIndex;
    },
    
    scrollToIndex: function(index) {        
    
            
		var iPreviousLeft = this.getLeft(this.navScrollIndex);
            
		var iLeft = this.getLeft(index);
		var iCurrentLeft = parseInt(Element.getStyle(this.itemsElement, 'left')) || 0;
            
		var offset = iPreviousLeft - iCurrentLeft;
            
		var move = iLeft - iCurrentLeft;
            
		if(move > 0) {
                
			move = move + offset;
            
		} else {
                
			move = move - offset;
            
		}
            
		Element.setOpacity(this.itemsElement, this.moveOpacity);
            
		var ef = new Effect.Move(this.itemsElement, {
'duration': this.duration, 'x': move, 'afterFinish': function() { 
				Element.setStyle(this.itemsElement, {'left':iLeft + 'px'});
				Element.setOpacity(this.itemsElement, 1.0);
			}.bind(this)});
            
		ef = null;
        

        
        this.navScrollIndex = index;
        
        Element.display(this.forwardElement, this.navScrollIndex <= this.items.length - (this.setSize+1));
        Element.display(this.backElement, (parseInt(this.navScrollIndex) || 0) != 0);
        //if(this.observer.fireCarouselAtIndex) this.observer.fireCarouselAtIndex(this, index);
    }
};



Object.extend(Element, {   
	display: function(element, bShow) {     
		if (bShow) { 
			Element.show(element); 
		} else { 
			Element.hide(element); 
		}   
	}
});