// DHTML bidirectional marquee effect
// only initialize when all material has loaded
// otherwize not all dimensions may be known
Element.observe(window, 'load', function()
{
//    new Marquee('merkclip', 2, 0.05);
});
document.observe('dom:loaded', function()
{
    if ($('merkclip'))
        new MerkenBalk();
    if ($('schoenenclip'))
        new SchoenenBalk();
});

// requires the id of the element that needs to slide
// this slide element should have a direct decendent that contains all images
// also, the slide element should perform some form of clipping
var Marquee = Class.create({
    initialize: function(el, step, interval)
    {
        // properties
        this.frame = el;
        this.speed = step;
        this.interval = interval;
        this.stop = false;
        var slideElm = $(this.frame).firstChild;
        // ad hoc determination of width of slide based on dimensions of images
        //var list = slideElm.select('img');
        var list = Element.select(slideElm, 'img');
        this.imgCount = list.length;
        this.slideWidth = 0;
        list.each(function(i)
        {
            this.slideWidth += i.width +
                parseInt(i.getStyle('padding-left')) + parseInt(i.getStyle('border-left-width')) + parseInt(i.getStyle('margin-left')) +
                parseInt(i.getStyle('padding-right')) + parseInt(i.getStyle('border-right-width')) + parseInt(i.getStyle('margin-right'));
        }, this);
        // assign id to slider
        slideElm.id = this.frame + '1';
        slideElm.absolutize();
        slideElm.setStyle({width: this.slideWidth + 'px'});
        var initLeft = parseInt(slideElm.getStyle('left'));
        // duplicate slider
        var tmpElm = slideElm.cloneNode(true); // deep copy
        tmpElm.id = this.frame + '2';
        $(this.frame).insert(tmpElm);
        $(this.frame + '2').setStyle({left: this.slideWidth + initLeft + 'px', width: this.slideWidth + 'px'});
        // events: stop on mouseover, start on mouseout
        $(this.frame).observe('mouseover', function() {this.stop = true}.bindAsEventListener(this));
        $(this.frame).observe('mouseout', function() {this.stop = false}.bindAsEventListener(this));
        // run
        new PeriodicalExecuter(this.run.bind(this), this.interval);
    },

    // run animation
    run: function()
    {
        if (!this.stop) {
            var pos1 = $(this.frame + '1').positionedOffset().left - this.speed;
            var pos2 = $(this.frame + '2').positionedOffset().left - this.speed;
            if (pos1 + this.slideWidth < 0) {
                // switch sections, place the old left section to the right the of new left section
                pos1 = pos2;
                pos2 = pos1 + this.slideWidth;
                $(this.frame + '1').id = 'tempsection';
                $(this.frame + '2').id = this.frame + '1';
                $('tempsection').id = this.frame + '2';
            }
            // move sections to the left
            $(this.frame + '1').setStyle({left: pos1 + 'px'});
            $(this.frame + '2').setStyle({left: pos2 + 'px'});
        }
    }
});

// requires the id of the element that needs to slide
// this slide element should have a direct decendent that contains all images
// also, the slide element should perform some form of clipping
var SchoenenBalk = Class.create({
    initialize: function()
    {
        // properties
        this.frame = 'schoenenclip';
        this.speed = 0;
        this.interval = 0.01;
        this.stop = false;
        this.leftBorder = 249;
        this.frameWidth = 968;
        var slideElm = $(this.frame).firstChild;
        // ad hoc determination of width of slide based on dimensions of images
        //var list = slideElm.select('img');
        var list = Element.select(slideElm, 'div.item');
        this.divCount = list.length;
        this.slideWidth = 0;
        list.each(function(i)
        {
            this.slideWidth += i.getWidth() +
                parseInt(i.getStyle('border-left-width')) + parseInt(i.getStyle('margin-left')) +
                parseInt(i.getStyle('border-right-width')) + parseInt(i.getStyle('margin-right'));
        }, this);
        // assign id to slider
        // force initial position to the right
        slideElm.setStyle({width: this.slideWidth + 'px'});
        // events: stop on mouseover, start on mouseout
        $(this.frame).observe('mouseover', this.setSpeed.bindAsEventListener(this));
        $(this.frame).observe('mouseout', function() {this.stop = true}.bindAsEventListener(this));
        // image clicks
        $$('div.item a').each(function(a) {a.observe('click', this.showImg.bindAsEventListener(this))}, this);
        // run if slider is wider than view frame
        if (this.slideWidth > this.frameWidth - this.leftBorder) {
            new PeriodicalExecuter(this.run.bind(this), this.interval);
        }
    },

    // run animation
    run: function()
    {
        if (!this.stop) {
            var pos1 = $(this.frame + '1').positionedOffset().left;
            if ((this.speed < 0) && (pos1 < this.leftBorder) || ((this.speed > 0) && (pos1 + this.slideWidth > this.frameWidth))) {
                $(this.frame + '1').setStyle({left: (pos1 - this.speed) + 'px'});
            }
        }
    },

    // modify speed as a function of cursor position
    setSpeed: function(e)
    {
        // determine cursor location
        var x = Event.pointerX(e) - $(this.frame).cumulativeOffset().left;
        var a = 0.019471488178025038; // 0.013908205841446461;
        var b = -11.848400556328235; // -8.463143254520169;
        this.speed = Math.round(a * x + b);
        // hack to get dead area in the middle
        if (Math.abs(this.speed) < 3)
            this.speed = 0;
        this.stop = false;
    },

    // show big image
    showImg: function(e)
    {
        var elm = Event.element(e).up('div.item');
        var meta = elm.getAttribute('meta').evalJSON();
        $('bigimg').src = meta.img;
        $('bigimg').setAttribute('alt', meta.alt);
/*
        if (meta.title) {
            $$('#content_tekst h1').each(function(h) {h.update(meta.title)});
            $$('#content_tekst div').each(function(d) {d.update(meta.description)});
        }
*/
        Event.stop(e);
    }
});

// requires the id of the element that needs to slide
// this slide element should have a direct decendent that contains all images
// also, the slide element should perform some form of clipping
var MerkenBalk = Class.create({
    initialize: function()
    {
        // properties
        this.frame = 'merkclip';
        this.speed = 0;
        this.interval = 0.01;
        this.stop = false;
        this.leftBorder = 0;
        this.frameWidth = 880;
        var slideElm = $(this.frame).firstChild;
        // ad hoc determination of width of slide based on dimensions of images
        //var list = slideElm.select('img');
        var list = Element.select(slideElm, 'div.item');
        this.divCount = list.length;
        this.slideWidth = 0;
        list.each(function(i)
        {
            this.slideWidth += i.getWidth() +
                parseInt(i.getStyle('border-left-width')) + parseInt(i.getStyle('margin-left')) +
                parseInt(i.getStyle('border-right-width')) + parseInt(i.getStyle('margin-right'));
        }, this);
        // assign id to slider
        // force initial position to the right
        slideElm.setStyle({width: this.slideWidth + 'px'});
        // events: stop on mouseover, start on mouseout
        $(this.frame).observe('mouseover', this.setSpeed.bindAsEventListener(this));
        $(this.frame).observe('mouseout', function() {this.stop = true}.bindAsEventListener(this));
        // run if slider is wider than view frame
        if (this.slideWidth > this.frameWidth - this.leftBorder) {
            new PeriodicalExecuter(this.run.bind(this), this.interval);
        }
    },

    // run animation
    run: function()
    {
        if (!this.stop) {
            var pos1 = $(this.frame + '1').positionedOffset().left;
            if ((this.speed < 0) && (pos1 < this.leftBorder) || ((this.speed > 0) && (pos1 + this.slideWidth > this.frameWidth))) {
                $(this.frame + '1').setStyle({left: (pos1 - this.speed) + 'px'});
            }
        }
    },

    // modify speed as a function of cursor position
    setSpeed: function(e)
    {
        // determine cursor location
        var x = Event.pointerX(e) - $(this.frame).cumulativeOffset().left;
        var a = 12/880; // 0.019471488178025038;
        var b = -6; //-11.848400556328235;
        this.speed = Math.round(a * x + b);
        // hack to get dead area in the middle
        if (Math.abs(this.speed) < 2)
            this.speed = 0;
        this.stop = false;
    }

});