fx.Pictureframe = Class.create();
Object.extend( fx.Pictureframe.prototype, Fx.Style.prototype );
Object.extend( fx.Pictureframe.prototype, {

    fadeIn: function () {
        this.clearTimer();
        this.custom(0, 1);
    },

    fadeOut: function () {
        this.clearTimer();
        this.custom(1, 0);
    }

});

PictureFrame = Class.create();
Object.extend( PictureFrame.prototype, {

    initialize: function( frame ) {

        this.pictures = [];
        this.texts = [];
        this.delays = [];
        this.current = 0;

        this.textContainer = getAllChildrenContainClassname( frame, "pictureframe-transparency-text" )[0];
        this.transparencyContainer = getAllChildrenContainClassname( frame, "pictureframe-transparency" )[0];
        this.elements = getAllChildrenContainClassname( frame, "pictureframe-item" );

        for( var i=0; i<this.elements.length; i++ ) {
            this.pictures[i] = new Fx.Pictureframe( this.elements[i], 'opacity', { duration: 1000 } ).set(0);

            this.texts[i] = getAllChildrenContainClassname( this.elements[i], 'pictureframe-item-text' )[0].innerHTML;

            if( this.elements[i].className.indexOf("duration-") != -1
             && ! isNaN( parseInt( this.elements[i].className.substring( this.elements[i].className.indexOf("duration-") + 9 ) ) )
            ) {
                this.delays[i] = parseInt( this.elements[i].className.substring( this.elements[i].className.indexOf("duration-") + 9 ) ) * 1000;
            } else {
                this.delays[i] = 10 * 1000;
            }
        }

        frame.style.height = getAllChildrenContainClassname( frame, "pictureframe-item-image" )[0].offsetHeight - 3 + "px";
        frame.className += " active";

        this.start();
    },

    start: function() {
        this.pictures[ this.current ].set( 1 );
        this.switchText();
        this.next();
    },

    switchText: function() {
        this.textContainer.innerHTML = this.texts[ this.current ];
        this.transparencyContainer.innerHTML = "<span>" + this.texts[ this.current ] + "</span>";
    },

    next: function() {

        setTimeout( this.pictures[ this.current ].fadeOut.bind( this.pictures[ this.current ] ), this.delays[ this.current ] );
        setTimeout( this.next.bind( this ), this.delays[ this.current ] + 2000 );
        setTimeout( this.switchText.bind( this ), this.delays[ this.current ] + 300 );

        if( typeof this.pictures[ this.current+1 ] == 'object' ) {
            setTimeout( this.pictures[ this.current+1 ].fadeIn.bind( this.pictures[ this.current+1 ] ), this.delays[ this.current ] );
            this.current += 1;
        } else {
            setTimeout( this.pictures[ 0 ].fadeIn.bind( this.pictures[ 0 ] ), this.delays[ this.current ] );
            this.current = 0;
        }
    }

});

window.onload = function() {

    myPictureFrames = [];
    pictureframes = getElementsByClassName( "pictureframe" );

    for( var i=0; i<pictureframes.length; i++ ) {
        myPictureFrames[i] = new PictureFrame( pictureframes[i] );
    }

}

function getElementsByClassName( className ) {
    var elements = document.getElementsByTagName( "*" );
    var matchingElements = [];
    var matchingClass = new RegExp( "(^|\\s)" + className.replace( /\-/g, "\\-" ) + "(\\s|$)" );
    for( var i=0; i<elements.length; i++ ) {
        if( matchingClass.test( elements[i].className ) ) {
            matchingElements.push( elements[i] );
        }
    }
    return matchingElements;
}

function hasClassName( element, className ) {
    var matchingClass = new RegExp( "(^|\\s)" + className.replace( /\-/g, "\\-" ) + "(\\s|$)" );
    if( matchingClass.test( element.className ) ) {
        return true;
    }
    return false;
}

/**
 * Finds all children which contain the given class name.
 *
 * Optionally, only elements within given parent are searched.
 *
 * @param {object} parentElement parent-element
 * @param {string} class name
 * @return {array} array with objects
 */
function getAllChildrenContainClassname( parentElement, className ) {
    var children = parentElement.childNodes;
    var result = new Array;

    for ( var i = 0; i < children.length; i++ ) {
        if( children[i].className ) {
            var classNames = children[i].className.split(' ');
        } else {
            var classNames = new Array;
        }
        for ( var j = 0; j < classNames.length; j++ ) {
            if ( classNames[j] == className ) {
                result.push( children[i] );
            }
        }
        if ( children[i].childNodes.length > 0 ) {
                result = result.concat( getAllChildrenContainClassname( children[i], className ) );
        }
    }
    return result;
}