/*
 * FROH Magazin JS Functions
 */


// Aktuelle Ausgabe
var cTab = new Class({

	initialize: function(options){
		this.options = $extend({
			itemVisible:5,
                        container: '#aktuelle-ausgabe',
			contentItems: '#aktuelle-ausgabe div.content',
			contentNavigation: '#aktuelle-ausgabe ul.navigation',
			contentNavigationItems: '#aktuelle-ausgabe ul.navigation li'
		},options || {});

                // console.log('initialize');

                // store options in properties
                this.container = $$(this.options.container)[0];
		this.navItems = $$(this.options.contentNavigationItems);
                this.contentItems = $$(this.options.contentItems);

                // console.log('- navItems');
                // console.log(this.navItems);
                // console.log('- contentItems');
                // console.log(this.contentItems);

                // go through content elements, prepare them and set events
                this.initContentItems(this.contentItems);

                // go through nav items an connect them with the content
                this.initNavItemEvents(this.navItems);

                // get read on links and give them events
               this.initReadOnEvents(this.contentItems);
	},

        initContentItems: function(contentItems) {
            // console.log('- initContentItems');
               
                contentItems.each(function(item) {
                        // hide items that are not active
                        if(!item.get('class').contains('active')) {
                            item.setStyle('opacity', '0.0');
                        } else {
                            this.activeTab = item;
                        }

                        // console.log('-- pTags');
                        // hide all tags that are read on content
                        var hideTags = item.getElements('p[class!=intro]');
                            // console.log(hideTags);
                            hideTags.setStyle('display', 'none');
                }.bind(this));

        },

	initNavItemEvents: function(items){
            // console.log('- setNavItemsEvents');
                // go through items
		items.each(function(item) {
                    // add click event for each item a
                    var aTag = item.getElement('a');
                    aTag.addEvent('click', function() {
                        items.removeClass('active');
                        item.addClass('active');
                        var tabname = aTag.getAttribute('href').split("#")[1];
                        this.switchToTab(tabname);
                    }.bind(this));
                }.bind(this));
	},
        initReadOnEvents: function(contentItems) {
            // console.log('- setReadOnEvents');

                contentItems.each(function(item) {
                    var readmoreLink = item.getElements('p.intro a:last-child');

                    // only apply if there is a link 
                    if(readmoreLink != null && readmoreLink != undefined) {
                        readmoreLink.addEvent('click', function(e) {
                            // console.log('-- read on');
                            var container = this.container
                            var contentItem = e.target.getParent().getParent();
                            var allParagraphs = contentItem.getElementsByTagName("P");
                            var contentItemOldHeight = contentItem.getSize().y;

                            for(var i=0;i<allParagraphs.length;i++) {
                                allParagraphs[i].style.display = "block";
                            }

                            var contentItemNewHeight = contentItem.getSize().y;
                            var contentItemDiff = contentItemOldHeight - contentItemNewHeight;

                            this.resizeContainer(contentItemDiff, container);
                            e.target.setStyle('display', 'none');

                        }.bind(this));
                    }
                        
                }.bind(this));

        },
	switchToTab: function(tabname){
            // console.log('- switchToTab:' + tabname);
		var newTab = $$(this.options.container + ' .' + tabname)[0];
                var oldTab = this.activeTab
                var container = $$(this.options.container)[0];
                var diffHeight = oldTab.getSize().y - newTab.getSize().y;

                if(diffHeight < 0) {
                    this.resizeContainer(diffHeight, container);
                    this.fadeContent(newTab, oldTab);
                } else {
                    this.fadeContent(newTab, oldTab);
                    this.resizeContainer(diffHeight, container);
                }
                this.activeTab = newTab;
	},
        resizeContainer: function(sizeDifference, element) {

            var changeHeightFx = new Fx.Tween(element, {
                    transition: Fx.Transitions.Quart.easeInOut,
                    duration: 500
                });
            changeHeightFx.start('height', [element.getSize().y, (element.getSize().y - sizeDifference)]);
            
            return true;            
        },
        fadeContent: function(newContent, oldContent) {
            var fadeOldContent = new Fx.Tween(oldContent);
            var fadeNewContent = new Fx.Tween(newContent);

            fadeOldContent.start('opacity', [1.0, 0.0]);
            fadeNewContent.start('opacity', [0.0, 1.0]);

            return true;
        }
})

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

    var aktuelleAusgabe = new cTab();

});


window.addEvent('domready', function() {
	
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#000000');
		},
		onBackground: function(toggler, element){
                        if(toggler != null) {
                            toggler.setStyle('color', '#C9C9C9');
                        }
		}
	});

	//add click event to the "add section" link
        if($('add_section')) {
	$('add_section').addEvent('click', function(event) {
		event.stop();
		
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
		
		});
        }
});