/*
*
*specific function for the webshop
*
*/
Ext.ns('beeline.web');

// update current elements
beeline.web.bpmupdate = function(className,parms){
    Ext.select('.'+className).each(function(el) {
        beeline.bpmupdate(el,bpmPrefixURL+'/'+el.id+'.ajax'+parms);
  });
}


// hide inactive elements  
beeline.web.hideInactive = function(el){
    el.setStyle('display','block');
	
	//hide previous divs
	var prev=el.prev('div');
	var itemSelected=0;
	while(prev!=null){
		itemSelected=itemSelected+1;
		prev.setStyle('display','none');
		prev=prev.prev('div');
	}
	
	// hide next divs	
	var next=el.next('div');
	while(next!=null){
		next.setStyle('display','none');
		next=next.next('div');
	}
	
	// change CSS activeTab class
	var list=el.prev('.tabs');
	if(list==null){ return; }
	next=list.first('li');
	
	var i=0;
	while(next!=null){
		if (itemSelected==i){
			next.radioClass('activeTab');
			break;
		}
		i=i+1;
		next=next.next('li');
	}
	beeline.web.init(); 
}

beeline.web.bpmload = function(divId, parms){  
    el=Ext.get(divId);
	if (!el) return;
	el.hide();

	// if not exist load
	if(el.dom.childNodes.length<2){
        //if (typeof parms == "undefined"){
        if (parms == ''){
            parms="?bpmload=1";
        }else{
            parms=parms+"&bpmload=1";
        }
        
		Ext.Ajax.request({
  		url:bpmPrefixURL+'/'+divId+'.ajax'+parms,
  		success:function(XMLHttpRequest){	
 			var newEl=Ext.DomHelper.insertBefore(el,XMLHttpRequest.responseText);		
			el=el.replaceWith(newEl).setStyle('display','block');

            var FirstElement=el.first();
            if (FirstElement!=null){
                var classNames=FirstElement.dom.className;
                if (classNames!=null){
                    var prefixArray=classNames.split(" "); 

                    for ( var i=0; i<prefixArray.length; i++)
                    {
                        var funcName = 'beeline.web.'+prefixArray[i]+'Init(el);'; 
                        try{
                            eval(funcName);
                        }catch(err){}
                    }
                }
                
			}
			// init loaded html
            beeline.web.init(divId);
			}
		});
	}else{ // just set as active
		Ext.Ajax.request({
			url:bpmPrefixURL+'/'+divId+'.ajax',
			success:function(XMLHttpRequest){
				// do nothing ignore results
			}
		});
	}
	el.show();
	beeline.web.hideInactive(el);
}

beeline.web.sliderInit = function(SlideShow){
    beeline.web.init();
    
    if (!SlideShow.hasClass('slider')){
        SlideShow = beeline.web.findSingleElement(SlideShow,'.slider');
        if (SlideShow===null){
            return;
        }
    }
    
    var JSONConfig=beeline.web.getJSONfromTitle(SlideShow);  
    new beeline.web.Carousel(SlideShow.dom.id,JSONConfig);
}


beeline.web.imageSliderInit = function(SlideShow){
    beeline.web.init();
    if (!SlideShow.hasClass('imageSlider')){
        SlideShow = beeline.web.findSingleElement(SlideShow,'.imageSlider');
        if (SlideShow===null){
            return;
        }
    }
    
    var JSONConfig=beeline.web.getJSONfromTitle(SlideShow);
	new beeline.web.ImageCarousel(SlideShow.dom.id,JSONConfig);   
}
beeline.web.findSingleElement = function(el,nameOfClass){
    var SingleElement=null
    var CompositeElements=el.select(nameOfClass);
    var items=CompositeElements.getCount();
    
    if (items>0){
        if (items=1){
            SingleElement=CompositeElements.item(0);
        }else{
            alert('error: find to many items.');
        }
    }
    return SingleElement;
}

beeline.web.getJSONfromTitle=function(el){
    var json=el.getAttribute('title');
    var JSON=null;
    
    if (json.length>0){
        try
        {
            var JSON=Ext.util.JSON.decode(json);
            el.dom.removeAttribute('title');
        }
        catch(err){alert(err);}
    } 
    return JSON;
}


beeline.web.init = function(divId){
    if(typeof bpminit == 'function') {
        if (typeof divId == "undefined") {
            divId = "";
        }
        bpminit(divId); // define in bpmLib.js
    } 
}

beeline.web.initActiveTab = function(){
	Ext.select('.tabs').each(function(el) {
		var next=el.next('div');
		var item=0;
    
		while(next!=null){
            if(next.dom.innerHTML.length>5){ next.setStyle('display','block'); break; }
            if(next.getStyle('display')=='block'){
                break;
            }
			item++;
			next=next.next('div');
		}
		var next=el.first('li');
		var itemSelected=0;
		while(next!=null){
			if (itemSelected==item){
				next.radioClass('activeTab');
				break;
			}
			itemSelected=itemSelected+1;
			next=next.next('li');
		}
	});
}

beeline.web.initSlideShows = function(){
    Ext.select('.slider').each(function(el) {
        beeline.web.sliderInit(el);
	});

	Ext.select('.imageSlider').each(function(el) {
	   beeline.web.imageSliderInit(el);
	});
}

beeline.web.onReady=function(){
	beeline.web.initActiveTab();
	beeline.web.initSlideShows();
}


beeline.web.Carousel = Ext.extend(Ext.util.Observable, {
    interval: 0, 
    transitionDuration: 1,
    transitionType: 'fade', //'carousel', 
    transitionEasing: 'easeOut',
    itemSelector: 'div.sliderItem',
    activeSlide: 0,
    autoPlay: true,
    showPlayButton: false,
    pauseOnNavigate: false,
    wrap: false,
    freezeOnHover: false,
    navigationOnHover: false,
    hideNavigation: false,
    sliceClass:'sliderItem',
    endless: true,
    indexNavigation: true,
    maxHeight:0,


    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        beeline.web.Carousel.superclass.constructor.call(this, config);

        this.addEvents(
            'beforeprev',
            'prev',
            'beforenext',
            'next',
            'change',
            'play',
            'pause',
            'freeze',
            'unfreeze',
            'beforeselect'
        );

        this.el = Ext.get(elId);
        this.slides = this.els = [];
        
        if(this.autoPlay || this.showPlayButton) {
            this.wrap = true;
        };

        if(this.autoPlay && config.showPlayButton === undefined) {
            this.showPlayButton = true;
        }
        
	    this.initDom();
        this.initMarkup();
        this.initEvents();
        this.initHeight();
        
        this.addListener('beforenext',function(){
            if (this.endless && this.carouselSize == (parseInt(this.activeSlide)+1)){
                var firstElement=this.slides.shift(); // this.slides[(parseInt(this.activeSlide)+1)%this.originalCaroselSize];
                var lastElement = this.els.slidesWrap.appendChild(firstElement); //.dom.cloneNode(true));  
                this.slides.push(lastElement);
                this.els.slidesWrap.setLeft((this.activeSlide * -this.slideWidth)+this.slideWidth);
                this.activeSlide=this.activeSlide-1;
                
                if (this.indexNavigation){
                    var first=this.els.navItems.shift();
                    var last = this.els.indexNavigation.appendChild(first);
                    this.els.navItems.push(last);
                }
            }
        });
        this.addListener('beforeprev',function(){
            if (this.endless && 0 == (parseInt(this.activeSlide))){
                var lastElement=this.slides.pop(); 
                var firstElement = this.els.slidesWrap.insertFirst(lastElement); 
                this.slides.unshift(firstElement);
                this.els.slidesWrap.setLeft(-this.slideWidth);
                this.activeSlide=this.activeSlide-1;
                
                if(this.indexNavigation){ 
                    var last=this.els.navItems.pop();
                    var first = this.els.indexNavigation.insertFirst(last); 
                    this.els.navItems.unshift(first);
                }
            }
        });
        
        this.addListener('beforeselect',function(selectedNumber, currentNumber){
            if (this.endless){
                var slideTo=0;
                while (slideTo<this.carouselSize){
                if(selectedNumber==this.els.navItems[slideTo].dom.innerHTML)
                    break;
                    slideTo++;
                }
               this.setSlide(slideTo);
            }else{
                this.setSlide(parseInt(selectedNumber)-1);
            }
        });
        

        if(this.carouselSize > 0) {
            this.refresh();
        }
    },

    initDom: function(){
    	var childDiv=this.el.first('div');
        var maxHeight=0;
    	while(childDiv!=null){
            if(maxHeight<childDiv.getHeight(true)){
                maxHeight=childDiv.getHeight(true);
            }
            childDiv.addClass(this.sliceClass);
            childDiv=childDiv.next('div');
        }
	    //this.el.setHeight(maxHeight+this.maxHeight);
	    this.el.setHeight(this.maxHeight);
        //alert(this.maxHeight+'+'+this.maxHeight+'='+maxHeight+this.maxHeight);	    
    },
    
    initHeight: function(){
        var maxH=0;
        var currentHeight=0;
  
        this.el.select('.'+this.sliceClass).each(function(SingleSlice){
            currentHeight=SingleSlice.getHeight(true);
            if (currentHeight>maxH){
                maxH=currentHeight;
            }
        });
        
        this.el.select('.'+this.sliceClass).each(function(SingleSlice){
            SingleSlice.setHeight(maxH);
        });
        this.els.container.setHeight(maxH);
        this.els.slidesWrap.setHeight(maxH);
        return maxH;
    },

    initMarkup: function() {

        var items = this.el.select(this.itemSelector);
        if (!this.maxHeight) {
            alert('maxHeight not set');
        }
        if (this.el.getHeight()==this.maxHeight){
            //text & images
            this.el.setHeight(this.maxHeight);
        }else{
            //images
            this.el.setHeight(this.el.getHeight()+this.maxHeight);
        }
        
        this.carouselSize = 0;
        
        this.els.container = Ext.DomHelper.append(this.el, {cls: 'ux-carousel-container'}, true);
        this.els.slidesWrap = Ext.DomHelper.append(this.els.container, {cls: 'ux-carousel-slides-wrap'}, true);

        this.els.navigation = Ext.DomHelper.append(this.els.container, {cls: 'ux-carousel-nav'}, true).hide();
        this.els.caption = Ext.DomHelper.append(this.els.navigation, {tag: 'h2', cls: 'ux-carousel-caption'}, true);
        this.els.navNext = Ext.DomHelper.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-next'}, true);
        if(this.showPlayButton) {
            this.els.navPlay = Ext.DomHelper.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-play'}, true)
        }
        this.els.navPrev = Ext.DomHelper.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-prev'}, true);
        
        if (this.indexNavigation){
            this.els.indexNavigation = Ext.DomHelper.append(this.els.container, {cls: 'ux-carousel-indexnav'}, true);
            
            this.els.navItems=[];
            var i=0;
            while (i<items.getCount()){
                var currItem=Ext.DomHelper.append(this.els.indexNavigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-item'}, true);
                currItem.dom.innerHTML=i+1;
                this.els.navItems.push(currItem);
                i++;
            }
        }

        // set the dimensions of the container
        this.el.clip();
        this.slideWidth = this.el.getWidth(true);
        this.slideHeight = this.el.getHeight(true);
        
        this.els.container.setStyle({
            width: this.slideWidth + 'px',
            height: this.slideHeight + 'px'
        });

        this.els.caption.setWidth((this.slideWidth - (this.els.navNext.getWidth()*2) - (this.showPlayButton ? this.els.navPlay.getWidth() : 0) - 20) + 'px')
        
        items.appendTo(this.els.slidesWrap).each(function(CurrentItem,currentObject,itemIndex) {
            CurrentItem = CurrentItem.wrap({cls: 'ux-carousel-slide'});
            this.slides.push(CurrentItem);
            CurrentItem.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
        }, this);
        this.carouselSize = this.slides.length;
        this.originalCaroselSize = this.carouselSize;
        if(this.navigationOnHover) {
            this.els.navigation.setStyle('top', (-1*this.els.navigation.getHeight()) + 'px');
        }
        //this.el.clip();
        
    },

    initEvents: function() {
        this.els.navPrev.on('click', function(ev) {	
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();            
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.prev();
        }, this);

        this.els.navNext.on('click', function(ev) {
		
            ev.preventDefault();
            var target = ev.getTarget();

            target.blur();
	     if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;

	
            this.next();
        }, this);

        if(this.showPlayButton) {
            this.els.navPlay.on('click', function(ev){
                ev.preventDefault();
                ev.getTarget().blur();
                if(this.playing) {
                    this.pause();
                }
                else {
                    this.play();
                }
            }, this);
        };

        if(this.freezeOnHover) {
            this.els.container.on('mouseenter', function(){
                if(this.playing) {
                    this.fireEvent('freeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.stop(this.playTask);
                }
            }, this);
            this.els.container.on('mouseleave', function(){
                if(this.playing) {
                    this.fireEvent('unfreeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.start(this.playTask);
                }
            }, this, {buffer: (this.interval/2)*1000});
        };

        if(this.navigationOnHover) {
            this.els.container.on('mouseenter', function(){
                if(!this.navigationShown) {
                    this.navigationShown = true;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);

            this.els.container.on('mouseleave', function(){
                if(this.navigationShown) {
                    this.navigationShown = false;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.navigation.getHeight() - this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);
        };

        if(this.interval && this.autoPlay) {
            this.play();
        };
        
        if(this.indexNavigation) {
            this.els.indexNavigation.on('click', function(ev,el){
                    ev.stopEvent();
                    this.fireEvent('beforeselect', el.innerHTML, this.activeSlide);
            }, this);
        };
          
        
    },

    prev: function() {

        if (this.fireEvent('beforeprev') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide - 1);

        this.fireEvent('prev', this.activeSlide);        
        return this; 
    },
    
    next: function() {

        if(this.fireEvent('beforenext') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }

        this.setSlide(this.activeSlide + 1);

        this.fireEvent('next', this.activeSlide);        
        return this;         
    },

    play: function() {
        if(!this.playing) {
            this.playTask = this.playTask || {
                run: function() {
                    this.playing = true;
                    this.setSlide(this.activeSlide+1);
                },
                interval: this.interval*1000,
                scope: this
            };
            
            this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
                Ext.TaskMgr.start(this.playTask);
            }, this);

            this.playTaskBuffer.delay(this.interval*1000);
            this.playing = true;
            this.els.navPlay.addClass('ux-carousel-playing');
            this.fireEvent('play');
        }        
        return this;
    },

    pause: function() {
        if(this.playing) {
            Ext.TaskMgr.stop(this.playTask);
            this.playTaskBuffer.cancel();
            this.playing = false;
            this.els.navPlay.removeClass('ux-carousel-playing');
            this.fireEvent('pause');
        }        
        return this;
    },
        
    clear: function() {
        this.els.slidesWrap.update('');
        this.slides = [];
        this.carouselSize = 0;
        this.pause();
        return this;
    },
    
    add: function(el, refresh) {
        var item = Ext.fly(el).appendTo(this.els.slidesWrap).wrap({cls: 'ux-carousel-slide'});
        item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
        this.slides.push(item);                        
        if(refresh) {
            this.refresh();
        }        
        return this;
    },
    
    refresh: function() {
        this.carouselSize = this.slides.length;
        this.els.slidesWrap.setWidth((this.slideWidth * this.carouselSize) + 'px');
        if(this.carouselSize > 0) {
            if(!this.hideNavigation) this.els.navigation.show();
            this.activeSlide = 0;
            this.setSlide(0, true);
        }                
        return this;        
    },
    
    setSlide: function(index, initial) {
        if(!this.wrap && !this.slides[index]) {
            return;
        }
        else if(this.wrap) {
            if(index < 0) {
                if (this.endless){
                    index = 0;
                }else{
                    index = this.carouselSize-1;
                }
                
            }
            else if(index > this.carouselSize-1) {
                if (!this.endless){
                    index = 0;                    
                }
            }
        }
        // fix fade bug
        if(this.activeSlide<0){
            this.activeSlide=0; 
        }
        
        if(!this.slides[index]) {
            return;
        }
	
        this.els.caption.update(this.slides[index].child(':first-child', true).title || '');
        var offset = index * this.slideWidth;
        if (!initial) {
            switch (this.transitionType) {
                case 'fade':
                    this.slides[index].setOpacity(0);
                    this.slides[this.activeSlide].stopFx(false).fadeOut({
                        duration: this.transitionDuration / 2,
                        callback: function(){ 
                            this.els.slidesWrap.setStyle('left', (-1 * offset) + 'px');
                            this.slides[this.activeSlide].setOpacity(1);
                            this.slides[index].fadeIn({
                                duration: this.transitionDuration / 2
                            });
                        },
                        scope: this
                    })
                    break;

                default:
                    var xNew = (-1 * offset) + this.els.container.getX();
                    this.els.slidesWrap.stopFx(false);
                    this.els.slidesWrap.shift({
                        duration: this.transitionDuration,
                        x: xNew,
                        easing: this.transitionEasing
                    });
                    break;
            }
        }
        else {
            this.els.slidesWrap.setStyle('left', '0');
        }

        this.activeSlide = index;
        this.updateNav();
        if (this.indexNavigation){
            this.els.navItems[index].radioClass('ux-carousel-nav-item-selected');
        }
        this.fireEvent('change', this.slides[index], index);
    },

    updateNav: function() {
        this.els.navPrev.removeClass('ux-carousel-nav-disabled');
        this.els.navNext.removeClass('ux-carousel-nav-disabled');
        if(!this.wrap) {
            if(this.activeSlide === 0) {
                this.els.navPrev.addClass('ux-carousel-nav-disabled');
            }
            if(this.activeSlide === this.carouselSize-1) {
                this.els.navNext.addClass('ux-carousel-nav-disabled');
            }
        }
    }
});

/*
* Derived Class for Image
*/

beeline.web.ImageCarousel = function(elId, config) {
   // explicitly call the superclass constructor
   beeline.web.ImageCarousel.superclass.constructor.call(this, elId, config); 

};
 
Ext.extend(beeline.web.ImageCarousel, beeline.web.Carousel, {
	sliceClass:'sliderItem',	
	autoPlay: true,
	itemSelector: 'div.sliderItem', 
	interval: 0,
	transitionEasing: 'easeIn',
	sliceItems: 4,
	wMargin:800,
	maxHeight:250,

	

  initDom: function() {
	var SlideShow=this.el;
	var SlideShowWidth=this.el.getWidth()-this.wMargin;
	var SlideShowHeight=this.maxHeight-this.el.getHeight();
	var sliceItems=this.sliceItems;
	var sliceClass=this.sliceClass;

	var i = 0;
	var slice = null;
    
	SlideShow.select('a').each(function(linkToImage) {
		if((i%sliceItems)==0){
            slice = Ext.DomHelper.append(SlideShow,'<div class="'+sliceClass+'"></div>', true);
		}
		//append 
		var addedItem=slice.appendChild(linkToImage);
		// scale
		var oldWidth=linkToImage.first().getWidth();
		var picWidth=SlideShowWidth/sliceItems;
		var scaleFactor=oldWidth/picWidth;
        var picHeight=linkToImage.first().getHeight()/scaleFactor;
		
        if(picHeight>SlideShowHeight){
		  scaleFactor=picHeight/SlideShowHeight;
          picHeight=picHeight/scaleFactor;
          picWidth=picWidth/scaleFactor;
		}
		addedItem.first().setStyle('width',picWidth+'px').setStyle('height',picHeight+'px');
		i++;
	});

	// clone Images for full sliderSlice
	SlideShow.select('.'+this.sliceClass+' a').each(function(slice) {
		var items=0;
		//count items
		slice.select('a').each(function(singleImage) {
			items++;
		});
        
		while(items%sliceItems){
			slice.appendChild(slice.prev('div').select('a').item(items-1).dom.cloneNode(true));
			items++;
		} 
	});
    
	Ext.select('.'+this.sliceClass).each(function(slidePage){
		slidePage.addClass(this.sliceClass);
	});
	
	Ext.select('.'+this.sliceClass).each(function(slidePage){
		slidePage.addClass('sliderItem');
	});
    }
});