// ACTIVATE FONT DETECOR, TABS AND ACCORDION

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

	t = new Detector();
		if(t.testFont() == true) {
			setActiveStyleSheet('default');
		}
		
	if(document.getElementById("tabs")) {
        var morphTabs = new MorphTabs('tabs'); // nasty hack
	}
	
	$$('.simple-slide').each(function(obj) {
       var slider = new Fx.Slide(obj.id + "_slide").hide();
       obj.addEvent("click", function () {slider.toggle();});
   });

	//create our Accordion instance
	$$('.news_accordion').each(function() {

    	var myAccordion = new Accordion($('.news_accordion'), 'h3.toggler', 'div.element', {
    	show: 2,
    	opacity: 1,
		onActive: function(toggler, element){
			toggler.setStyle('background-image', 'url(/app_themes/arla/images/accordion_hover.jpg)');
			toggler.setStyle('color', '#fff');
			element.setStyle('display', '');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('background-image', 'url(/app_themes/arla/images/accordion_header.jpg)');
			toggler.setStyle('color', '#505050');
			element.setStyle('display', '');
		}
		}); 
	});
	
	//create our Accordion instance
	$$('.menu_accordion').each(function() {

    	var myAccordion = new Accordion($('.menu_accordion'), 'a.toggler', 'ul.element', {
		display: active_menu_item,
		opacity: 1,
		onActive: function(toggler, element){
   			toggler.setStyle('background-color', '#dcdcdc');
   			toggler.setStyle('color', '#009114');
   			element.setStyle('display', '');
		},
		onBackground: function(toggler, element){
   			toggler.setStyle('background-color', '#fff');
   			toggler.setStyle('color', '#505050');
   			element.setStyle('display', '');
		}
		});

	});

});


// FOR SLIDING INSIDE TABS
function initSlides() {
   $$('.simple-slide').each(function(obj) {
       var slider = new Fx.Slide(obj.id + "_slide").hide();
       obj.addEvent("click", function () {slider.toggle();});
   });
}




// DETECT CALIBRI

var Detector = function(){
		var h = document.getElementsByTagName("BODY")[0];
		var d = document.createElement("DIV");
		var s = document.createElement("SPAN");
		d.appendChild(s);
		d.style.fontFamily = "sans-serif";		//font for the parent element DIV.
		s.style.fontFamily = "sans-serif";		//arial font used as a comparator.
		s.style.fontSize   = "72px";			//we test using 72px font size, we may use any size. I guess larger the better.
		s.innerHTML        = "mmmmmmmmmml";		//we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated
		h.appendChild(d);
		var defaultWidth   = s.offsetWidth;		//now we have the defaultWidth
		var defaultHeight  = s.offsetHeight;	//and the defaultHeight, we compare other fonts with these.
		h.removeChild(d);
		function testFont() {
			h.appendChild(d);
			var f = [];
			f[0] = s.style.fontFamily = "Calibri";	// Name of the font
			f[1] = s.offsetWidth;				// Width
			f[2] = s.offsetHeight;				// Height
			h.removeChild(d);
			if (f[1] != defaultWidth || f[2] != defaultHeight) {
				return true;
			}
			return false;
		}
	this.testFont = testFont;
}

// STYLESWITCHER

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);



// TABS

var MorphTabs = new Class({
    Implements: [Events, Options, Chain],

    version: '1.0',

    options: {
        width: '748px',
        height: '',
        changeTransition: {
            transition: 'linear',
            duration: 'short'
        },
        panelStartFx: 'fade',
        panelEndFx: 'appear',
        mouseOverClass: 'over',
        activateOnLoad: 'first',
        useAjax: false,
        ajaxUrl: '',
        ajaxOptions: {
            method: 'get',
            evalScripts: true
        },
        ajaxLoadingText: 'Loading...'
    },

    initialize: function(element, options) {
        if (options) this.setOptions(options);
        this.panelStartFx = this.options.panelStartFx;
        this.panelEndFx = this.options.panelEndFx;
        this.el = $(element);
        this.elid = element;
        this.el.setStyles({
            'height': this.options.height,
            'width': this.options.width
        });
        this.titles = $$('#' + this.elid + ' ul li');
        this.panelHeight = this.options.height.toInt() - (this.titles[0].getSize().y + 4);
        this.panelWidth = this.el.getSize().x;
        //this.el.getSize().y
        this.panel = new Element('div', {
            'id': 'morphPanel',
            'class': 'morphtabs_panel',
            'styles': {
                'width': this.panelWidth + 'px',
                'height': this.panelHeight + 'px'
            }
        }).inject(this.el.getFirst(), 'after');
        this.panelWrapBorder = this.panel.getStyle('border-width').toInt() * 2;
        this.panelWrap = new Element('div', {
            'id': 'morphPanelWrap',
            'class': 'morphtabs_panelwrap',
            'styles': {
                'height': (this.panelHeight + this.panelWrapBorder) + 'px',
                'width': (this.panelWidth + this.panelWrapBorder) + 'px'
            }
        }).wraps(this.panel);
        this.panelTop = this.panelWrap.getStyle('top').toInt();
        if (this.panelTop == 'NaN') this.panelTop = 0;
        this.panelWrap.setStyle('top', (Browser.Engine.trident5) ? (this.panelTop + 4) + 'px' : this.panelTop + 'px'); // fix for ie7.
        this.attach(this.titles);
        if (this.options.activateOnLoad != 'none') {
            this.firstRun = true;
            if (this.options.activateOnLoad == 'first') {
                this.activate(this.titles[0]);
            } else {
                this.activate(this.options.activateOnLoad);

            }
        }
    },

    attach: function(elements) {
        $$(elements).each(function(element) {
            var enter = element.retrieve('tab:enter', this.elementEnter.bindWithEvent(this, element));
            var leave = element.retrieve('tab:leave', this.elementLeave.bindWithEvent(this, element));
            var mouseclick = element.retrieve('tab:click', this.elementClick.bindWithEvent(this, element));
            element.addEvents({
                mouseenter: enter,
                mouseleave: leave,
                click: mouseclick
            });
            var title = element.get('title').replace(/ /g, '_');
            var el = $(title);
            element.store('panel:html', el.get('html'));
            element.store('panel:id', el.id);
            var elementDispose = $(title).dispose();
        }, this);
        return this;
    },

    detach: function(elements) {
        $$(elements).each(function(element) {
            element.removeEvent('mouseenter', element.retrieve('tab:enter') || $empty);
            element.removeEvent('mouseleave', element.retrieve('tab:leave') || $empty);
            element.removeEvent('mouseclick', element.retrieve('tab:click') || $empty);
            element.eliminate('tab:enter').eliminate('tab:leave').eliminate('tab:click').eliminate('panel:html').eliminate('panel:id');
            var elementDispose = element.dispose();
        });
        return this;
    },

    activate: function(tab) {

        if ($type(tab) == 'string') {
            myTab = $$('#' + this.elid + ' ul li').filter('[title=' + tab + ']')[0];
            tab = myTab;
        }
        if ($type(tab) == 'element') {
            var html = tab.retrieve('panel:html');
            this.panel.id = tab.retrieve('panel:id');
            this.titles.removeClass('active');
            tab.addClass('active');
            this.activeTitle = tab;
            this.panel.setStyle('overflow', 'hidden');
            if ($type(this.options.changeTransition) == 'object' && !this.firstRun) {
                this.getPanelFx(this.options.panelStartFx)
				.chain(function() {
				    this.fill(this.panel, html);
				    this.getPanelFx(this.options.panelEndFx)
					.chain(function() {
					    this.panel.setStyle('overflow', 'auto');
					} .bind(this));
				} .bind(this));
            } else if ($type(this.options.changeTransition) == 'object' && this.firstRun) {
                this.fill(this.panel, html);
                this.panel.store('flag', 'end');
                this.getPanelFx(this.options.panelEndFx)
				.chain(function() {
				    this.panel.setStyle('overflow', 'auto');
				} .bind(this));
            } else {
                this.fill(this.panel, html);
                this.panel.setStyle('overflow', 'auto');
            }
        }

    },

    getPanelFx: function(fx) {
        var flag = (this.firstRun) ? this.panel.retrieve('fxEffect:flag', 'show') : this.panel.retrieve('fxEffect:flag');
        var styles = {
            'margin-top': [0, 0],
            'margin-left': [0, 0],
            'width': [this.panelWidth, this.panelWidth],
            'height': [this.panelHeight, this.panelHeight],
            'opacity': [1, 1]
        };
        var fxEffect = this.panel.get('morph', this.options.changeTransition);
        switch (fx) {
            case 'blind:up':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'height': [this.panelHeight, 0]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [this.panelHeight, 0],
                        'height': [0, this.panelHeight]
                    }));
                }
                break;
            case 'blind:down':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [this.panelHeight],
                        'height': [0]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'height': [0, this.panelHeight]
                    }));
                }
                break;
            case 'blind:left':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'width': [this.panelWidth, 0]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [this.panelWidth, 0],
                        'width': [0, this.panelWidth]
                    }));
                }
                break;
            case 'blind:right':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [this.panelWidth],
                        'width': [0]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'width': [0, this.panelWidth]
                    }));
                }
                break;
            case 'slide:up':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [0, -this.panelHeight],
                        'width': [this.panelWidth],
                        'height': [this.panelHeight]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [this.panelHeight, 0]
                    }));
                }
                break;
            case 'slide:down':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [0, this.panelHeight],
                        'width': [this.panelWidth],
                        'height': [this.panelHeight]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-top': [-this.panelHeight, 0]
                    }));
                }
                break;
            case 'slide:left':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [0, -this.panelWidth],
                        'width': [this.panelWidth],
                        'height': [this.panelHeight]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [this.panelWidth, 0]
                    }));
                }
                break;
            case 'slide:right':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [0, this.panelWidth],
                        'width': [this.panelWidth],
                        'height': [this.panelHeight]
                    }));
                } else {
                    styles = fxEffect.start($merge(styles, {
                        'margin-left': [-this.panelWidth, 0]
                    }));
                }
                break;
            case 'fade':
                if (flag == 'hide') {
                    styles = fxEffect.start($merge(styles, {
                        'opacity': [1, 0]
                    }));
                }
                break;
            case 'appear':
                if (flag == 'show') {
                    styles = fxEffect.start($merge(styles, {
                        'opacity': [0, 1]
                    }));
                }
                break;
        }
        this.panel.store('fxEffect:flag', (flag == 'hide') ? 'show' : 'hide');

        if (this.firstRun) this.firstRun = false;
        return styles;
    },

    elementEnter: function(event, element) {
        if (element != this.activeTitle) {
            element.addClass(this.options.mouseOverClass);
        }
    },

    elementLeave: function(event, element) {
        if (element != this.activeTitle) {
            element.removeClass(this.options.mouseOverClass);
        }
    },

    elementClick: function(event, element) {
        if (element != this.activeTitle) {
            element.removeClass(this.options.mouseOverClass);
            this.activate(element);
        }
    },

    fill: function(element, contents) {
        if (this.options.useAjax) {
            this.getContent();
        } else {
            element.set('html', contents);
            //this line is fix for non-initialized slide div's when changing active tab by vladimir - propeople
            initSlides();
        }
    },

    getContent: function() {
        this.panel.set('html', this.options.ajaxLoadingText);
        var newOptions = {
            url: this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'),
            update: this.panel
        };
        this.options.ajaxOptions = $merge(this.options.ajaxOptions, newOptions);
        var tabRequest = new Request.HTML(this.options.ajaxOptions);
        tabRequest.send();
    },

    addTab: function(title, label, content) {
        var newTitle = new Element('li', {
            'title': title
        });
        newTitle.appendText(label);
        this.titles.include(newTitle);
        $$('#' + this.elid + ' ul').adopt(newTitle);
        var newPanel = new Element('div', {
            'id': title,
            'class': 'mootabs_panel'
        });
        if (!this.options.useAjax) {
            newPanel.set('html', content);
        }
        this.el.adopt(newPanel);
        this.attach(newTitle);
    },

    removeTab: function(title) {
        if (this.activeTitle.title == title) {
            this.activate(this.titles[0]);
        }
        var tab = $$('#' + this.elid + ' ul li').filter('[title=' + title + ']')[0];
        this.detach(tab);
    },

    next: function() {
        var nextTab = this.activeTitle.getNext();
        if (!nextTab) {
            nextTab = this.titles[0];
        }
        this.activate(nextTab);
    },

    previous: function() {
        var previousTab = this.activeTitle.getPrevious();
        if (!previousTab) {
            previousTab = this.titles[this.titles.length - 1];
        }
        this.activate(previousTab);
    }
});