﻿/**
 *
 * SekondenWeb Scripts
 *
 *
 * Revisions:
 * 0.1 - Oskar Holstensson - Initial draft
 * 1.0 - Oskar Holstensson - Ready for publication
 */

/**
 * DeferredResize class
 */

function DeferredResize(callback) {
    var self = this;
    this.callback = callback;
    this.$window = $(window);
    this.$window.resize(function () {
        self.onResize();
    });
    this.onResize();
}

DeferredResize.prototype.deferredResize = function () {
    var width = this.$window.width();
    this.timer = null;
    this.callback(width);
}

DeferredResize.prototype.onResize = function () {
    var self = this;
    if (this.timer) {
        clearTimeout(this.timer);
    }
    this.timer = setTimeout(function () {
        self.deferredResize();
    }, 100);
}

/**
 * DynamicResize class, handles the triggering of dynamic
 * resizing of the webpage.
 */

function DynamicResize(callback, sizes) {
    var self = this;
    this.currentSize = -1;
    this.sizes = sizes.concat(Infinity);
    this.callback = callback;
    this.$window = $(window);
    this.deferredResize = new DeferredResize(function () {
        self.onResize();
    });

    this.currentSize = this.getCurrentSize(this.$window.width());
    this.callback(this.currentSize, this.sizes[this.currentSize]);
}

DynamicResize.prototype.getCurrentSize = function (width) {
    for (var i = this.sizes.length - 1; i >= 0; i--) {
        if (width >= this.sizes[i]) {
            return i;
        }
    }
    return -1;
}

DynamicResize.prototype.onResize = function () {
    var width = this.$window.width();
    if (width < this.sizes[this.currentSize] || width >= this.sizes[this.currentSize + 1]) {
        this.currentSize = this.getCurrentSize(width);
        this.callback(this.currentSize, this.sizes[this.currentSize]);
    }
}

/**
 * Ellipsis class, handles cutting of long text segments
 * and allowing its dynamic expansion. Kind of deprecated.
 */

function Ellipsis(paragraph) {
    this.paragraph = paragraph;
    this.construct();
}

Ellipsis.THRESHOLD = 100;

Ellipsis.prototype.construct = function () {
    this.text = this.paragraph.text();
    if (this.text.length > Ellipsis.THRESHOLD) {
        this.state = 'closed';
        this.ellipsis = $('<div/>', { 'class': 'ellipsis' });
        this.anchor = $('<a/>', { 'text': '...' });
        this.registerClicks();
        this.ellipsis.append(this.anchor);
        this.paragraph.text(this.text.substring(0, Ellipsis.THRESHOLD));
        this.paragraph.append(this.ellipsis);
    }
};

Ellipsis.prototype.registerClicks = function () {
    var self = this;
    this.anchor.click(function () {
        self.toggle();
    });
};

Ellipsis.prototype.toggle = function () {
    if (this.state == 'open') {
        this.close();
    }
    else {
        this.open();
    }
};

Ellipsis.prototype.open = function () {
    this.state = 'open';
    this.anchor.text('Less');
    this.paragraph.text(this.text)
    this.paragraph.append(this.ellipsis);
    this.registerClicks();
};

Ellipsis.prototype.close = function () {
    this.state = 'closed';
    this.anchor.text('...');
    this.paragraph.text(this.text.substring(0, Ellipsis.THRESHOLD));
    this.paragraph.append(this.ellipsis);
    this.registerClicks();
};

function onResize(size, width) {
    var $body = $('body');
    if (size == 0) { /* 0px to 764px */
        $body.removeClass('medium');
        $body.addClass('small');
    }
    else if (size == 1) { /* 765px to 939px */
        $body.removeClass('small');
        $body.addClass('medium');
    }
    else { /* 940px to Inf */
        $body.removeClass('small');
        $body.removeClass('medium');
    }
}

jQuery(document).ready(function ($) {
    if (!Modernizr.mq('(min-width:0)')) {
        new DynamicResize(onResize, [0, 700, 940]);
    }
    if (Modernizr.svg) {
        var $logo = $('#logo img');
        $logo.attr('src', $logo.attr('src') + '-svg');
    }

    /* Problem: Images rotate on older browsers, but the border does not. Looks awful. */

    /*
    var $figs = $('.articleFig');
    if ($figs.length) {
        $figs.rotate(Math.random() * 5 - 2);
    }*/
});

