// scroller
function scrollElement(e, direction, step) {

	// stop click event
	e.stop();

	var ul = this.scrollUl;

	// initialize
	if (!ul.startPosition) { ul.startPosition = 0; }
	if (!ul.startScrollY)  { ul.startScrollY  = 0; }
	if (!ul.children)      { ul.children = ul.getChildren(); }

	if (!ul.scroll) {
		ul.scroll = new Fx.Scroll(this.scrollContent, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeInOut,
			onComplete: function() {
				ul.startPosition = ul.endPosition;
				ul.startScrollY  = ul.endScrollY;
			}
		});
	}
	var defaultPositionStep = this.scrollContent.getSize().y / ul.children[0].getSize().y;
	var positionStep = ((step) ? step : defaultPositionStep);

	// determine end position
	ul.endPosition = ul.startPosition + (((direction == 'up') ? 1 : -1) * positionStep);
	if (ul.endPosition < 0) { ul.endPosition = 0; }
	if (ul.endPosition > ul.children.length - positionStep) { ul.endPosition = ul.children.length - positionStep; }

	// is at start / end before animation
	ul.isAtStartBeforeAnimation = (ul.startPosition == 0);
	ul.isAtEndBeforeAnimation   = (ul.startPosition == (ul.children.length - positionStep));

	// is at start / end after animation
	ul.isAtStartAfterAnimation  = (ul.endPosition == 0);
	ul.isAtEndAfterAnimation    = (ul.endPosition == (ul.children.length - positionStep));

	// disable / enable scroll button TODO: toggle class?
	if (ul.isAtEndAfterAnimation) {
		this.btnScrollUp.addClass('scroll-up-disabled');
	} else {
		this.btnScrollUp.removeClass('scroll-up-disabled');
	}

	if (ul.isAtStartAfterAnimation) {
		this.btnScrollDown.addClass('scroll-down-disabled');
	} else {
		this.btnScrollDown.removeClass('scroll-down-disabled');
	}

	// determine end scrollY
	var scrollDiffY = 0;
	if (ul.endPosition < ul.startPosition) {
		loopStartPosition = ul.endPosition;
		loopEndPosition   = ul.startPosition;
	} else {
		loopStartPosition = ul.startPosition;
		loopEndPosition   = ul.endPosition;
	}

	for (var i = loopStartPosition; i < loopEndPosition; i++) {
		var child = ul.children[i];
		scrollDiffY += ((direction == 'up') ? 1 : -1) * child.getSize().y;
	}
	ul.endScrollY = ul.startScrollY + scrollDiffY;

	// scroll
	ul.scroll.start(0, ul.endScrollY);
}

// reset forms (to avoid privacy issues)
function clearForms() {
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}

window.addEvent('load',   function() { clearForms(); });
window.addEvent('unload', function() { clearForms(); });

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

	// fix IE6 not caching css background images
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(err) {}

    var body            = $(document.body);
    var wprHeader       = $('wpr-header');
    var wprContent      = $('wpr-content');
    var wprSidebarRight = $('wpr-sidebar-right');
    var wprThememenu    = $('wpr-thememenu');
    var thememenu       = $('thememenu');
    var themeSubmenu    = $('themesubmenu');
    var themeSubTabmenu = $('theme-subtabmenu');

    // determine template variant
    var homePage               = body.hasClass('home');
    var themePage              = body.hasClass('LMR-theme');
    var tabsPage               = body.hasClass('LMR-tabs');
    var forumSubjectPage       = body.hasClass('forum_onderwerp');
    var mijnVerhaalSubjectPage = body.hasClass('mijn_verhaal_onderwerp');
    var stuurVerhaalPage       = body.hasClass('stuur-jouw-verhaal-in');
    var contentPage            = body.hasClass('LMR-page');
    var hulpVerlenersPage      = body.hasClass('de_hulpverleners');
    var menuPage               = body.hasClass('LMR-page-menu');
    var menuLeftPage           = body.hasClass('LMR-page-menu-left');

    // scroll to formErrors
    var formErrors = body.getElement('div.form-errors');
    if (formErrors) {
        var scrollToErrors = new Fx.Scroll(window).toElement(formErrors);
    }

    // hover table rows forum
    var forumTable = $('table-index-forum');

    if (forumTable) {
        var tableRows  = forumTable.getElements('tbody tr');

        tableRows.each(function(row) {
            var forumLink = row.getElement('a').href;
            row.addEvent('mouseenter', function() { this.toggleClass('hover'); });
            row.addEvent('mouseleave', function() { this.toggleClass('hover'); });
            row.addEvent('click', function() { window.location.href = forumLink; });
        });
    }

    // animate theme menu
    if (thememenu) {

        var themes = thememenu.getElements('div');

        themes.each(function(theme) {

            // get thememenu
            theme.menu = theme.getFirst('ul');

            // add bottom and "more" link
            theme.menu.more = new Element('div', {
                'class': 'thememenu-bottom',
                'html':  '<p class="thememenu-more">meer ...</p>'
            });
            theme.menu.more.inject(theme);

            theme.setStyle('overflow', 'visible');

            theme.menu.startHeight = 70;
            theme.menu.totalHeight = theme.menu.getSize().y + 5; // 5px padding bottom
            theme.menu.slideFx = new Fx.Tween(theme.menu, { transition: Fx.Transitions.Cubic.easeInOut, duration: 300 });
            theme.menu.slideFx.set('height', theme.menu.startHeight);

            theme.menu.animate = function(action) {
                this.slideFx.cancel();

                var height  = (action == 'out') ? this.totalHeight : this.startHeight;
                var display = (action == 'out') ? 'none' : 'block';

                this.more.getElement('p').setStyle('display', display);

                this.slideFx.start('height', height);
            };

            theme.menu.addEvent('mouseenter', function() { this.animate('out'); });
            theme.menu.addEvent('mouseleave', function() { this.animate('in'); });
            theme.menu.more.addEvent('mouseenter', function() { theme.menu.animate('out'); });
            theme.menu.more.addEvent('mouseleave', function() { theme.menu.animate('in'); });
        });
    }

    // toggle thememenu
    var buttonToggleThememenu = $('all-themes').getElement('a');

   wprHeader.marginFx = new Fx.Tween(wprHeader, {
       transition: Fx.Transitions.Cubic.easeInOut,
       duration: 300
    });

    wprThememenu.toggleFx = new Fx.Tween(wprThememenu, {
        transition: Fx.Transitions.Cubic.easeInOut,
        duration: 300,
        onComplete: function() {
            if (wprThememenu.getStyle('overflow') == 'hidden' && wprThememenu.show) {
                wprThememenu.setStyle('overflow', 'visible');
            }
        }
    });
    wprThememenu.show = true;

    if (!body.hasClass('home')) {
        wprThememenu.show = false;
        wprThememenu.setStyle('overflow', 'hidden');
        wprThememenu.toggleFx.set('height', 0);
        wprHeader.marginFx.set('margin-bottom', 0);
    }

    buttonToggleThememenu.addEvent('click', function(e) {
        // stop / prevent events
        e.stop();
        wprThememenu.toggleFx.cancel();
        wprHeader.marginFx.cancel();

        if (wprThememenu.show) { // hide menu
            wprThememenu.show = false;
            wprThememenu.toggleFx.start('height', 0);
            wprHeader.marginFx.start('margin-bottom', 0);
            this.getParent().toggleClass('show');
        } else { // show menu
            wprThememenu.show = true;
            wprThememenu.toggleFx.start('height', 200);
            wprHeader.marginFx.start('margin-bottom', 210);
            this.getParent().toggleClass('show');
        }
    });

    buttonToggleThememenu.addEvent('click', function(e) {
        e.stop();
        wprThememenu.setStyle('overflow', 'hidden');
        wprThememenu.toggleFx.start('height', 30);
    });

    // get dimensions before adding corners
    var wprContentHeight = wprContent.getSize().y + 50; // top 50px
    var wprwprSidebarRightHeight = wprSidebarRight.getSize().y + 20; // bottom 20px

    // add round corners
    if (themeSubmenu && themePage) {
        var themeSubmenubottom = new Element('div', { 'class': 'bottom' });
        themeSubmenubottom.inject(themeSubmenu, 'after');
    }
    if (themeSubTabmenu && tabsPage) {
        var submenuTabBottom = new Element('div', { 'class': 'bottom' });
        submenuTabBottom.inject(themeSubTabmenu);
    }
    if (menuLeftPage) {
        var submenuPageBottom = new Element('div', { 'class': 'bottom' });
        submenuPageBottom.inject($('page-subpagemenu'));
    }
    if (contentPage || menuLeftPage) {
        var contentPageTop    = new Element('div', { 'class': 'top' });
        var contentPageBottom = new Element('div', { 'class': 'bottom' });
        contentPageTop.inject($('content'), 'before');
        contentPageBottom.inject($('content'), 'after');
    }
    if (wprContent && tabsPage && !forumSubjectPage && !stuurVerhaalPage) {
        var contentBottom = new Element('div', { 'class': 'bottom' });
        contentBottom.inject(wprContent);

        // stretch content column
        if (wprContentHeight < wprwprSidebarRightHeight) {
           $('content').setStyle('height', wprSidebarRight.getSize().y);
        }
    }
    if (menuPage) {
        var menuPageBottom = new Element('div', { 'class': 'bottom' });
        menuPageBottom.inject($('pagesubmenu'), 'after');
    }

    // add header to forum comments and remove last border
    if (forumSubjectPage || mijnVerhaalSubjectPage) {

        var subject     = forumSubjectPage ? body.getElement('div.forum_onderwerp') : body.getElement('div.verhaal');
        var comments    = forumSubjectPage ? body.getElements('div.forum_reactie') : body.getElements('div.mijn_verhaal_reactie');
        var commentForm = $('content-bottom');

        if (comments.length > 0) {
            var commentsHeader = new Element('div', {
                'class': 'content comments-header',
                'html': '<h2>Reacties</h2>'
            });
            commentsHeader.inject(comments[0], 'before');

            var lastComment = comments[comments.length -1]; // -1 for index
            lastComment.setStyle('border', 'none');
        }
        var scrollToCommentFormButton = new Element('div', {
            'class': 'content btn-scroll-to-comment-form',
            'html': '<h2>Reageer</h2>',
            'events': {
                'click': function() {
                    var scrollBody = new Fx.Scroll(window).toElement(commentForm);
                }
            }
        });
        scrollToCommentFormButton.inject(subject, 'after');
    }

    // movie sidebar_zijn_wij_deskundig.php
	var wprMovie = $('movie-zijn-wij-deskundig');

	if (wprMovie && (tabsPage || homePage)) {
		wprMovie.destroy();

	} else if (hulpVerlenersPage) {

		var swfZijnWijDeskundig = new Swiff('/layouts/hulpmix/swf/flvplayer.swf', {
			width: 225,
			height: 187,
			vars: {
				file: 'http://s3.amazonaws.com/hulpmix/hulpmix.flv',
				image: '/images/content/img-still-zijn-wij-deskundig.jpg',
				autostart: false,
				repeat: false
			}
		});
		swfZijnWijDeskundig.replaces(wprMovie);
	}

	// attach scroll buttons to scroll modules
	var scrollModules = body.getElements('.scroll');

	scrollModules.each(function(scrollModule) {

		scrollModule.scrollHeader  = scrollModule.getElement('.scroll-head');
		scrollModule.scrollContent = scrollModule.getElement('.scroll-content');

		if (scrollModule.scrollHeader && scrollModule.scrollContent) {

			scrollModule.scrollUl = scrollModule.scrollContent.getElement('ul');

			if (scrollModule.scrollUl.getSize().y < scrollModule.scrollContent.getSize().y) {
				scrollModule.scrollContent.setStyle('height', scrollModule.scrollUl.getSize().y);
			}

            scrollModule.scrollContent.setStyle('height', scrollModule.scrollContent.getSize().y);
            scrollModule.scrollContent.setStyle('overflow', 'hidden');

			var scrollListItems = scrollModule.scrollUl.getElements('li');
			var numVisibleLis = (scrollModule.scrollContent.getSize().y / scrollListItems[0].getSize().y).round();

			if (scrollListItems.length > numVisibleLis) {
				scrollModule.btnScrollUp   = new Element('a', { 'class': 'scroll-up', 'href': '#' });
				scrollModule.btnScrollDown = new Element('a', { 'class': 'scroll-down scroll-down-disabled', 'href': '#' });

				scrollModule.btnScrollDown.inject(scrollModule.scrollHeader);
				scrollModule.btnScrollUp.inject(scrollModule.scrollHeader);

				scrollModule.btnScrollUp.addEvent('click', scrollElement.bindWithEvent(scrollModule, 'up'));
				scrollModule.btnScrollDown.addEvent('click', scrollElement.bindWithEvent(scrollModule, 'down'));
			} else {
			    scrollModule.removeClass('scroll');
			    scrollModule.addClass('no-scroll');
			    scrollModule.scrollContent.setStyle('height', scrollListItems.length * scrollListItems[0].getSize().y);
			}
		} else {
		    scrollModule.addClass('no-scroll');
		}
	});

    // form interaction
    var radioCommentsOn = $('reageren_ja');
    var radioCommentsOff = $('reageren_nee');
    var emailLine = $('email-line');

    if (radioCommentsOn && radioCommentsOff && emailLine) {
        emailLine.setStyles({
            'height': 0,
            'overflow': 'hidden'
        });

        radioCommentsOn.addEvent('click', function() {
           emailLine.tween('height', 80);
        });

        radioCommentsOff.addEvent('click', function() {
           emailLine.tween('height', 0);
        });
    }

    // open external links in new window
    var externalLinks = $$('a[href^="http://"], a[href^="https://"]');
    if (externalLinks) {
        externalLinks.setProperty('target', '_blank');
    }
});