﻿/****************************
Classes
****************************/
axflow.Dialog = new Class({
    options: {
        width: 241,
        height: 167,
        method: 'ajax'
    },
    initialize: function(parentEl, options) {
        this.setOptions(options);
        this.parentEl = parentEl;
        this.textContainer = $('fluidityNonstopText');
        this.contentLoaded = false;
        this.rootEl = this.createRootElement();
        this.moveTo(parentEl.getCoordinates());
        this.abbr = {
            longWord: this.parentEl.title,
            shortWord: this.parentEl.get('text')
        };
        if(this.options.method == 'ajax') {
			this.ajax = this.createAjaxRequestThread();
		} else {
			this.ajax = this.getContent();
		}
		if(!Browser.Engine.trident) {
			this.effect = new Fx.Tween(this.rootEl, {
				property: 'opacity' 
			});
		}
    },
    getContent: function() {
        var contentsEl = new Element('div');
        contentsEl.className = "dialogContents";
        contentsEl.set('html', this.textContainer.get('html'));
        var topEl = new Element('div');
        topEl.className = "dialogTop";
        var bottomEl = new Element('div');
        bottomEl.className = "dialogBottom";
        this.rootEl.grab(topEl);
        this.rootEl.grab(contentsEl);
        this.rootEl.grab(bottomEl);
        ajax = this.rootEl;
        this.contentLoaded = true;
		this.fireEvent('contentLoaded');
		return ajax;
    },
    createAjaxRequestThread: function() {
        var self = this;
        var ajax = new Request.HTML({
            url: '/default.aspx', 
            data: self.abbr,
            method: 'get',
            update: self.rootEl,
			complete: function() {
				self.contentLoaded = true;
				self.fireEvent('contentLoaded');
			}
        });
        return ajax;
    },
    createRootElement: function() {
        var rootEl = new Element('div');
        rootEl.className = "dialog";
        rootEl.id = new Date().getTime();
        rootEl.setStyles({
            position: 'absolute',
            width: this.options.width
        });
        //rootEl.innerHTML = '<div class="loading"><img src="images/loader.gif" alt="" />Laddar...</div>'
        return rootEl;
    },
    moveTo: function(coords) {
        this.rootEl.setStyles({
            top: coords.top - this.rootEl.getSize().y - 15,
            left: coords.left - 20
        });
    },
    show: function(coords) {
        if(!this.isVisible()) {
            if(!Browser.Engine.trident) {
				this.effect.set(0);
            }
            
            //$$('html').forEach(function(el)
            //{
            //    el.setStyle('overflow', 'hidden');
            //});
            
            $(document.body).appendChild(this.rootEl);
            this.moveTo(coords);

            //$$('html').forEach(function(el)
            //{
            //    el.setStyle('overflow', 'auto');
            //});

            if(!Browser.Engine.trident) {
				this.effect.start(1);
            }
            if(this.options.method == 'ajax') {
				if(!this.contentLoaded) {
					this.ajax.cancel();
					this.ajax.send();
				}
			}
        }
    },
    close: function() {
        if(this.isVisible()) {
            this.rootEl.dispose();
        }
    },
    isVisible: function() {
        return $defined($(this.rootEl.id));
    }
});
axflow.Dialog.implement(new Options());
axflow.Dialog.implement(new Events());

axflow.EventRotator = new Class({
    Implements: [Options, Events],
    options: {
        delay: 5000
    },
    initialize: function(contentArray, contentElement) {
        var self = this;
        this.contentIndex = 0;
        this.contentArray = contentArray;
        this.contentElement = contentElement;
        this.effect = new Fx.Tween(this.contentElement, {property: 'opacity'});
        var height = 0;
        contentArray.forEach(function (content)
        {
            contentElement.set('html', content);
            var newheight = $$('.eventAlternateContent')[0].getSize().y;
            if(newheight > height) height = newheight;
        });
        contentElement.setStyle('height', height + 'px');
        contentElement.set('html', '');
    },
    rotate: function() {
        this.fireEvent('rotate');
        this.onRotate();
    },
    onRotate: function() {
        if(++this.contentIndex==this.contentArray.length) this.contentIndex = 0;
        this.show(this.contentIndex);
    },
    start: function() {
        this.rotator = this.rotate.periodical(this.options.delay, this);
    },
    stop: function() {
        $clear(this.rotator);
    },
    show: function(contentIndex) {
        this.fireEvent('change');
        this.contentIndex = contentIndex;
        var self = this;
        /*Execute a chain of functions:
          *hide (w animation),
          *load new content,
          *display (w animation)
        */
        this.effect.start(1,0).chain(
            function() {
                self.contentElement.set('html', self.contentArray[self.contentIndex]);
                this.start(0,1);
            }
        );
    }
});

axflow.TabView = new Class({
	initialize: function(tabViewClass) {
		this.className = tabViewClass;
		this.tabContentClassName = 'productTabContent';
		this.id = $$('.'+tabViewClass);
		if(this.id.length > 0) this.loadTabView();
	},
	
	loadTabView: function() {
		var thisParent = this;
		var el = this.id;
		this.hideNameLinks();
		
		$$('.'+this.className+' ul.tabs li').each(function(item, index) {
			item.setProperty('href', '#');
			if(index == 0) {
				thisParent.showTabContent(index);
			}
			item.addEvent('click', function(e) {
				thisParent.showTabContent(index);
			});
		});
	},

	hideTabContent: function(){
		$$('.' + this.className + ' ul li').each(function(item, index) {
			item.removeClass('active');
		});
		$$('.' + this.className + ' .' + this.tabContentClassName).each(function(item, index) {
			item.addClass('hide');
			item.removeClass('show');
		});
	},
	
	hideNameLinks: function(){
		$$('.' + this.className + ' a.name').each(function(item, index) {
			item.addClass('hide');
		});
		$$('.' + this.className + ' ul.tabs li a').each(function(item, index) {
			item.setProperty('href', 'javascript:void(0)');
		});
	},
	
	showTabContent: function(showID){
		this.hideTabContent();
		$$('.' + this.className + ' ul li').each(function(item, index) {
			if(index == showID) {
				item.addClass('active');
			}
		});
		$$('.' + this.className + ' .' + this.tabContentClassName).each(function(item, index) {
			if(index == showID) {
				item.removeClass('hide');
				item.addClass('show');
			}
		});
	}

});

axflow.ImageGallery2 = new Class({
    Implements: [Options, Events],
    options: {},
    initialize: function(rootEl, options) {
        this.setOptions(options);
        this.items = rootEl.getElements('li');
        if(this.items.length==0) return;
        this.addButtons(rootEl);
        this.addEvent('change', this.onChange);
        this.activeIndex = 0;
        this.show(0);
    },
    addButtons: function(rootEl) {
        var self = this;
        var btnEl = new Element('div', {'class': 'buttons'});
        this.countEl = new Element('span');
        //Only display buttons if there are more than one image in the gallery
        if(this.items.length>1) {
            btnEl.appendChild(new Element('img', {
                'events': {'click': self.prev.bind(self)},
                'src': '/images/prevButton.gif'
            }));
            btnEl.appendChild(this.countEl);
            btnEl.appendChild(new Element('img', {
                'events': {'click': self.next.bind(self)},
                'src': '/images/nextButton.gif'
            }));
        } else {
            btnEl.appendChild(this.countEl);
        }
        rootEl.appendChild(btnEl);
    },
    prev: function() {
        this.show(this.activeIndex-1);
        this.fireEvent('prev');
    },
    next: function() {
        this.show(this.activeIndex+1);
        this.fireEvent('next');
    },
    show: function(index) {

        //Hide "current" index
        this.items[this.activeIndex].removeClass('active');
        
        //Change active index (with roll)
        if((index)>=this.items.length) this.activeIndex = 0;
        else if((index)<0) this.activeIndex = this.items.length-1;
        else this.activeIndex = index;

        //Show the new item
        this.items[this.activeIndex].addClass('active');

        this.fireEvent('change');

    },
    onChange: function() {
        var self = this;
        this.countEl.set('text', (self.activeIndex+1)+'/'+self.items.length); 
    }
});

/*
axflow.ImageGallery = new Class({
	initialize: function(imageGalleryClass) {
		this.className = imageGalleryClass;
		this.id = $$('.'+imageGalleryClass);
		if(this.id.length > 0) this.loadImageGallery();
	},
	
	loadImageGallery: function() {
		var thisParent = this;
		var el = this.id;
		images = $$('.'+this.className+' ul.imageView li');
		if(images.length > 1)
			$$('.productImageButtons').setStyle('display', 'block');
		images.each(function(item, index) {
			if(index == 0) {
				thisParent.showImage(index);
			}
		});
		$$('.'+this.className+' span.prev').addEvent('click', function(e) {
			thisParent.prevImage();
		});
		$$('.'+this.className+' span.next').addEvent('click', function(e) {
			thisParent.nextImage();
		});
	},
	
	nextImage: function(){
		var nextImage;
		var imageList = $$('.'+this.className+' ul.imageView li');
		imageList.each(function(item, index) {
			if(item.className == 'active') {
				nextImage = index + 1;
				if(nextImage > imageList.length-1) {
					nextImage = 0;
				}
			}
		});
		this.showImage(nextImage);
	},
	
	prevImage: function() {
		var prevImage;
		var imageList = $$('.'+this.className+' ul.imageView li');
		imageList.each(function(item, index) {
			if(item.className == 'active') {
				prevImage = index - 1;
				if(prevImage < 0) {
					prevImage = imageList.length-1;
				}
			}
		});
		this.showImage(prevImage);
	},

	showImage: function(showID){
		this.hideImages();
		$$('.'+this.className+' ul.imageView li').each(function(item, index) {
			if(index == showID) {
				item.addClass('active');
				item.removeClass('hide');
				item.getElements('img').addClass('show');
			}
		});
	},

	hideImages: function() {
		$$('.'+this.className+' ul.imageView li').each(function(item, index) {
			item.removeClass('active');
		});
		$$('.' + this.className+' ul.imageView li').each(function(item, index) {
			item.addClass('hide');
		});
	}
});
*/