var article_width = 300;
var article_margin = 75;
var speed = 40;
var scroller_width;
var fadeheight = 10;
var vp_height;
var sitebg = "white";
$(function() {
    $(".article").width(article_width)
.wrapAll("<div class=\"scroller\"></div>")
.each(function(i) {
    $(this).css("position", "absolute").css("left", i * (article_width + article_margin));
    scroller_width = (i + 1) * (article_width + article_margin);
    }).parent().css("position", "absolute").clone().insertAfter(".scroller:eq(0)").css("left", scroller_width);
    $(".scroller").wrapAll("<div id=\"viewport\"></div>").parent().css({ "overflow": "hidden", "width": "940px", "position": "relative" }).height(150);
    
    var scroller = new Scroll(0, scroller_width, [$(".scroller:eq(0)"), $(".scroller:eq(1)")]);
    scroller.init();
    vp_height = $("#viewport").height();
    $("<div></div>").addClass("conttop")
            .appendTo("div#viewport").css("background", "transparent")
            .width(fadeheight)
            .height(vp_height)
            .css("position", "absolute").css("top", "0px")
            .css("left", "0px")
            .clone().appendTo("div#viewport")
            .removeClass("conttop").addClass("contbottom")
            .css("left", parseInt($("#viewport").width()) - fadeheight);
    addfader();
    setTimeout(delay, 1000)
    var kjoer = 0;
    function scrollstop() {
        clearTimeout(kjoer);
        kjoer = 0;
    }
    function scrollstart() {
        kjoer = setInterval(scroller.left, speed);
    }
    function delay() {
        kjoer = setInterval(scroller.left, speed);
    }
    $('#stopbutton').mouseup(function() {
        if (kjoer !== 0)
            scrollstop()
        else
            scrollstart();
    });
});
function addfader() {
    var i = 1;
    while (i <= fadeheight) {
        var op = (i / fadeheight);
        $("<div></div>").addClass("fader").width(1).height(vp_height)
 .css({ "margin": "0px",
     "background": sitebg,
     "position": "absolute",
     "left": fadeheight - i,
     "opacity": op
 })
 .prependTo("div.conttop").clone().css("left", i).appendTo(".contbottom");
        i++;
    };
}
var Scroll = function(a, b, ets) {
    /* class for moving DOM elements around
    expects a,b as int being top or left of two
    elements. expects those two elements
    as an Array in ets. Provides a method .top
    to move it up, and a method .left  - well,
    you get it.
    */
    var self = this;
    this.dim = new Array(a, b)
    this.init = function() {
        $.each(["left", "top"], function() {
            var dir = this;
            self[dir] = function() { if (self.dim[1] <= 0) { self.dim = [0, -1 * self.dim[0]] }; $.each(ets, function(i) { this.css(dir, self.dim[i]); self.dim[i] -= 1; }); }
        });
    };
    return self;
};