// NewsPaperColumns

// by Jan Martin Roelofs

// De Creative Commons Naamsvermelding 3.0 Nederland Licentie is van toepassing op dit werk. Ga naar http://creativecommons.org/licenses/by/3.0/nl/ of stuur een brief naar Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, VS om deze licentie te bekijken.

var NpColumn = new Object();

NpColumn.MinWidth= 600;

NpColumn.Init = function(){

    // we'll generate newspaper columns with evenly divided paragraphs
    // your text should be in a div with class 'npcolumns'
    // if you want a vertical divider it needs to have class 'withdivider' too

    $$('div.npcolumns').each(function(column){

        with (column){

            var columnChildren = getChildren();

            // we only use columns if we have enough space
            if (offsetWidth > NpColumn.MinWidth){

                if (columnChildren[0] && !(columnChildren[0].hasClass('npcolumnsinner')) && (columnChildren.length > 0)){

                    // make new structure
                    var innerDiv      = new Element('div', {'class': 'npcolumnsinner'});
                    var leftDiv       = new Element('div', {'class': 'npleftcolumn'});
                    var leftInnerDiv  = new Element('div');
                    var rightDiv      = new Element('div', {'class': 'nprightcolumn'});
                    var rightInnerDiv = new Element('div');

                    innerDiv.adopt(leftDiv, rightDiv);
                     leftDiv.appendChild( leftInnerDiv);
                    rightDiv.appendChild(rightInnerDiv);

                    // fill left column and put it in place
                    leftInnerDiv.adopt(columnChildren);
                    appendChild(innerDiv);

                    // some adjustmends to get the margins right in strict mode
                    leftInnerDiv.setStyle('margin-top',   - leftInnerDiv.offsetTop);
                    leftInnerDiv.setStyle('margin-bottom',  leftInnerDiv.offsetHeight -  leftDiv.offsetHeight);

                    // lets divide the stuff
                    var SliceIndex = 0;
                    while ((SliceIndex < columnChildren.length) && (columnChildren[SliceIndex].offsetTop < offsetHeight/2)){
                        SliceIndex++;
                    }

                    // without the following adjustment the left column would always be bigger
                    // that's not always wanted so we look at the previous possible breakpoint 
                    // if that's a lot closer to the middle, then we cut there
                    // we also don't want everything in one column
                    if ((columnChildren.length > 1) && ((SliceIndex == columnChildren.length) ||
                        (Math.abs((offsetHeight/2) - columnChildren[SliceIndex-1].offsetTop)*1.2 < Math.abs((offsetHeight/2) - columnChildren[SliceIndex].offsetTop)))){
                        SliceIndex--;
                    }

                    // now that we have found the slice index
                    // all children after are put in the right column
                    rightInnerDiv.adopt(columnChildren.slice(SliceIndex));

                    // some adjustmends to get the margins right in strict mode
                    rightInnerDiv.setStyle('margin-top',  - rightInnerDiv.offsetTop);
                    rightInnerDiv.setStyle('margin-bottom', rightInnerDiv.offsetHeight - rightDiv.offsetHeight);

                    if (hasClass('withdivider')){
                        innerDiv.addClass ('withline');
                    }
                }
            }

            // we undo the columns if we have little space
            else if (columnChildren[0] && columnChildren[0].hasClass('npcolumnsinner')){

                var innerDiv    = columnChildren[0];
                var  leftDiv    = innerDiv.getElement('div');
                var rightDiv    = leftDiv.getNext();

                adopt( leftDiv.getElement('div').getChildren());
                adopt(rightDiv.getElement('div').getChildren());

                removeChild(innerDiv);
            }
        }
    })
};

window.addEvents({load: NpColumn.Init, resize: NpColumn.Init});