/*  ContentFlow, version $$VERSION$$ 
 *  (c) 2007, 2008 Sebastian Kutsch
 *  <http://www.jacksasylum.eu/ContentFlow/>
 *
 *  ContentFlow is distributed under the terms of the MIT license.
 *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
 *
 *--------------------------------------------------------------------------*/

/* Global configutaion and initilization object */
var ContentFlowGlobal = {
    Flows: [],
    AddOns: {}, 
    scriptName: 'contentflow.js',
    scriptElement:  null,

    getScriptElement:function () {
        var regex = new RegExp(this.scriptName);
        var scripts = document.getElementsByTagName('script');
        for (var i=0; i<scripts.length; i++) {
            if (scripts[i].src && regex.test(scripts[i].src)) { return scripts[i]; }
        }
        return '';
    },

    getScriptPath: function () {
        var regex = new RegExp(this.scriptName);
        return this.scriptElement.src.replace(regex, '');
    },

    init: function () {
        this.scriptElement = this.getScriptElement(this.scriptName);
        if (!this.scriptElement) {
            this.scriptName = 'contentflow_src.js';
            this.scriptElement = this.getScriptElement(this.scriptName);
        }

        this.BaseDir = this.getScriptPath() ;
        if (!this.AddOnBaseDir) { this.AddOnBaseDir = this.BaseDir; }
        if (!this.CSSBaseDir) { this.CSSBaseDir = this.BaseDir; }

        document.write('<link rel="stylesheet" title="Standard" href="'+this.CSSBaseDir+'mycontentflow.css" type="text/css" media="screen" />');
        document.write('<link rel="stylesheet" title="Standard" href="'+this.CSSBaseDir+'contentflow.css" type="text/css" media="screen" />');

        if (this.scriptElement.getAttribute('charset')) {
            var AddOns = this.scriptElement.getAttribute('charset').split(' ');
            for (var i=0; i<AddOns.length; i++) {
                document.write('<script type="text/javascript" src="'+this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js"><\/script>');
            }
        }

        /* ========== ContentFlow auto initialization on document load ==========
         * thanks to Dean Edwards
         * http://dean.edwards.name/weblog/2005/02/order-of-events/
         */
        var CFG = this;

        /* for Mozilla, Opera 9, Safari */
        if (document.addEventListener) {
            /* for Safari */
            if (/WebKit/i.test(navigator.userAgent)) { // sniff
                var _timer = setInterval(function() {
                    if (/loaded|complete/.test(document.readyState)) {
                        clearInterval(_timer);
                        CFG.onloadInit(); // call the onload handler
                    }
                }, 10);
            }
            else {
              document.addEventListener("DOMContentLoaded", CFG.onloadInit, false);
            }
        }

        /* for Internet Explorer */
        /*@cc_on @*/
        /*@if (@_win32)
        document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>");
        var script = document.getElementById("__ie_cf_onload");
        script.onreadystatechange = function() {
            if (this.readyState == "complete") {
                CFG.onloadInit(); // call the onload handler
            }
        };
        /*@end @*/

        /* for all other browsers */
        window.addEvent('charset', CFG.onloadInit, false);
        /* ================================================================== */

    },

    onloadInit: function () {
        // quit if this function has already been called
        if (arguments.callee.done) { return; }
        // flag this function so we don't do the same thing twice
        arguments.callee.done = true;
        
        /* fix for mootools */
        if (window.Element && document.all && !window.opera) {
            for (var prop in window.CFElement.prototype) {
                if(!window.Element.prototype[prop]) {
                    window.Element.prototype[prop] = window.CFElement.prototype[prop];
                }
            }
        }
        /* fix for Prototype */
        if (window.$ && typeof Prototype != "undefined" && document.all && !window.opera) {
            var o$ = window.$;
            window.$ = function (el) { return o$(window._$(el)); } ;
        }
        else if (!window.$) {
            window.$ = window._$;
        }

        var i;
        for (i=0; i< ContentFlowGlobal.Flows.length; i++) {
           ContentFlowGlobal.Flows[i].init(); 
        }

        var divs = document.getElementsByTagName('div');
        DIVS: for (i = 0; i < divs.length; i++) {
            if (divs[i].className.match(/\bContentFlow\b/)) {
                for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
                    if (divs[i] == ContentFlowGlobal.Flows[j].container) { continue DIVS; }
                }
                var CF = new ContentFlow(divs[i],{}, false);
                CF.init();
            }
        }
    }
};




/* ========== ContentFlowAddOn ========== */
var ContentFlowAddOn = function (name, methods) {
    ContentFlowGlobal.AddOns[name] = this;
    this.name = name;
    if (name != "DEFAULT") {
        this.scriptpath = this.getScriptPath('ContentFlowAddOn_'+name+'.js');
    }
    if (!methods) { methods = {}; }
    this.methods = methods;
    if (methods.init) { methods.init(this); }
};

ContentFlowAddOn.prototype = {

    getScriptPath: function  (scriptname) {
        var regex = new RegExp(scriptname);
        var scripts = document.getElementsByTagName('script');
        for (var i=0; i<scripts.length; i++) {
            if (scripts[i].src && regex.test(scripts[i].src)) {
                return scripts[i].src.replace(regex, '');
            }
        }
        return '';
    },

    loadConf: function () {
        //document.write('<script type="text/javascript" src="'+this.scriptpath+'ContentFlowAddOn_'+this.name+'_conf.js"><\/script>');
        //alert(window.ContentFlowAddOn_lightbox_conf);
        //alert(window['ContentFlowAddOn_'+this.name+'_conf']);
        //for (var para in window['ContentFlowAddOn_'+this.name+'_conf'])
            //alert (para);
        this.conf = window['ContentFlowAddOn_'+this.name+'_conf'];
    },

    addScript: function  (path) {
        document.write('<script type="text/javascript" src="'+path+'"><\/script>');
    },
    addScripts: function  (basePath, filenames) {
        for (var i=0; i<filenames.length; i++) {
            this.addScript(basePath+filenames[i]);
        }
    },
    addStylesheet: function  (path) {
        document.write('<link rel="stylesheet" title="Standard" href="'+path+'" type="text/css" media="screen" />');
    },
    addStylesheets: function  (basePath, filenames) {
        for (var i=0; i<filenames.length; i++) {
            this.addStylesheet(basePath+filenames[i]);
        }
    },

    _init: function (flow) {
        this._setConf(flow);
        this._initMethods(flow);
    },

    _setConf: function(flow) {
        if (this.methods.ContentFlowConf) { flow.setConfig(this.methods.ContentFlowConf); }
    },

    _initMethods: function (flow) {
        var methods = [
            'onclickActiveItem',
            'onMakeActive',
            'onclickPreButton',
            'onclickNextButton',
            'calcPosition',
            'calcSize',
            'calcStepWidth',
            'calcZIndex',
            'calcFontSize'
        ];

        for (var i=0; i<methods.length; i++) {
            if (this.methods[methods[i]] ) {
                flow['_'+methods[i]] = this.methods[methods[i]];
            }
        }
    }
};

var ContentFlowDefaultAddOn = new ContentFlowAddOn('DEFAULT', {

    onclickActiveItem: function (item) {
        var url, target;

        if (url = item.content.getAttribute('href')) {
            target = item.content.getAttribute('target');
        }
        else if (url = item.element.getAttribute('href')) {
            target = item.element.getAttribute('target');
        }
        else if (url = item.content.getAttribute('src')) {
            target = item.content.getAttribute('target');
        }

        if (url) {
            if (target) {
                window.open(url, target).focus();
            }
            else {
                window.location.href = url;
            }
        }
    },

    onMakeActive: function (activeItem) {},
    
    onclickPreButton: function (event) {
        this.moveToIndex('pre');
        event.stop();
    },
    
    onclickNextButton: function (event) {
        this.moveToIndex('next');
        event.stop();
    },

    calcStepWidth: function(diff, absDiff) {
        var stepwidth;
        if (absDiff > this.visibleItems) {
            if (diff > 0) {
                stepwidth = diff - this.visibleItems;
            } else {
                stepwidth = diff + this.visibleItems;
            }
        } else if (this.visibleItems >= this.items.length) {
            stepwidth = diff / this.items.length;
        } else {
            stepwidth = diff * ( this.visibleItems / this.items.length);
            //var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( this.visibleItems / this.items.length);
        }
        return stepwidth;
    },

    calcSize: function (x, f) {
        var h = this.maxHeight/(Math.abs(x)+1);
        var w = h;

        return {width: w, height: h};
    },

    calcPosition: function (x, f, size) {
        var X = x * size.width * 2;
        var Y = - this.flowCenter.y + size.height/2;  // bottom
        return {x: X, y: Y};

    },

    calcZIndex: function (x, f, I) {
        return -Math.abs(I);
    },

    calcFontSize: function (x, f, size) {
        return size.height / this.maxHeight;
    }

});




/* ========== ContentFlow ========== */
var ContentFlow = function (container, config, initOnLoad) {

    ContentFlowGlobal.Flows.push(this);

    if (container) {
        this.container = container;
        for (var option in this.defaultConf) {
            this[option] = this.defaultConf[option];
        }
        this.setConfig(config?config:{});
    } else {
        throw ('ContentFlow ERROR: No flow container node or id given');
    }

};

ContentFlow.prototype = {
    _imagesToLoad: 0,
    _activeItem: 0,
    _currentPosition: 0,
    _targetPosition: 0,
    _stepLock: false,
    _millisecondsPerStep: 50, 
    _fileRegEx: /(([^\/?=&]+)\.(\w+)){1}$/,
    _browserIE: (document.all && !window.opera) ? true : false,
    _browserIE7: (this._browserIE && typeof(document.body.style.maxHeight) != "undefined") ? true : false,
    _browseriPhone: /iPhone|iPod/i.test(navigator.userAgent)? false : true,
    _browserKonq: navigator.appName.indexOf('Konqueror') != -1 ? true : false,

    defaultConf: { 
        useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN]

        biggestItemPos: 0,
        loadingTimeout: 30000, //milliseconds
        activeElement: 'content', // item or content

        maxItemHeight: 0,
        scaleFactor: 1.0,
        scaleFactorLandscape: 1.0,

        circularFlow: true,
        visibleItems: -1,
        startItem:  "center",
        scrollInFrom: "pre",

        flowSpeedFactor: 1.0,
        flowDragFriction: 1.0,
        scrollWheelSpeed: 1.0,

        reflectionType: "clientside",   // client-side, server-side, none
        reflectionWithinImage: /iPhone|iPod/i.test(navigator.userAgent)? false : true,
        reflectionColor: "transparent", // none, transparent, overlay or hex RGB CSS style #RRGGBB
        reflectionHeight: 0.5,          // float (relative to original image height)
        negativeMarginOnFloat: "auto",  // auto, none or float (relative to reflectionHeight)
        reflectionOverlaySrc: "img/reflectionOverlay.png",
        reflectionServerSrc: "{URLTO}{FILENAME}_reflection.{EXT}"  // {URLTO}, {FILE}, {FILENAME}, {EXT}

    },


    /*
     * ==================== public methods ==================== 
     */

    /*
     * calls _init() if ContentFlow has not been initialized before
     * needed if ContentFlow is not automatically initialized in window.load
     */
    init: function () {
        if(this.isInit) { return; }
        this._init();
    },

    /*
     * returns a data object, containing all configuration parameters and their values
     */
    getConfig: function () {
        var conf = {};
        for (var option in this.defaultConf) {
            conf[option] = this[option];
        }
        return conf;
    },

    /*
     * parses configuration object and initializes configuration values
     */
    setConfig: function(config) {
        if (!config) { return; }
        var dC = this.defaultConf;
        for (var option in config) {
            if (dC[option] == "undefined" ) { continue; }
            switch (option) {
                case "scrollInFrom":
                case "startItem":
                case "negativeMarginOnFloat":
                    if (typeof(config[option]) == "number"  || typeof(config[option]) == "string") {
                        this[option] = config[option];
                    }
                    break;
                default:
                    if (typeof(dC[option] == config[option])) {
                        this[option] = config[option];
                    }
            }
        }
        switch (this.reflectionColor) {
            case "overlay":
                break;
            case this.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.reflectionColor:this.reflectionColor+"x":
                this.reflectionColorRGB = {
                    hR: this.reflectionColor.slice(1,3),
                    hG: this.reflectionColor.slice(3,5),
                    hB: this.reflectionColor.slice(5,7),
                    iR: parseInt(this.reflectionColor.slice(1,3), 16),
                    iG: parseInt(this.reflectionColor.slice(3,5), 16),
                    iB: parseInt(this.reflectionColor.slice(5,7), 16)
                };
                break;
            // case "none":
            // case "transparent":
            default:
                this.reflectionColor = "transparent"; 
                this.reflectionColorRGB = {
                    hR: 0, hG: 0, hB:0,
                    iR: 0, iG: 0, iB:0
                };
                break;
        }
        if (this.negativeMarginOnFloat == "none") { this.negativeMarginOnFloat = 0; }
        if (this.items) {
            if (this.visibleItems <  0) {
                this.visibleItems = Math.round(Math.sqrt(this.items.length));
            }
            this.visibleItems = Math.min(this.visibleItems, this.items.length - 1);
        }

    },

    getItem: function (index) {
        return this.items[this._checkIndex(Math.round(index))]; 
    },

    /*
     * returns the index number of the active item
     */
    getActiveItem: function() {
        return this._activeItem;
    },

    /*
     * returns the number of items the flow contains
     */
    getNumberOfItems: function () {
        return this.items.length;
    },

    /*
     * reinitializes sizes.
     * called on window.resize
     */
    resize: function () {
        this._initSizes();
        this._initStep();
    }, 

    /*
     * scrolls flow to item i
     */

    moveToPosition: function (p) {
        if (!this.circularFlow) { p = this._checkIndex(p); }
        this._targetPosition = p;
        this._initStep();
    },
    moveToIndex: function (index) {
        this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.circularFlow)));
        this._initStep();
    },
    moveToItem: function (item) {
        var i;
        if (item.itemIndex) { i = item.itemIndex; }
        else { i = item.index; }
        this.moveToIndex(i);
    },
    moveTo: function (i) {
        if (typeof i == "object") { this.moveToItem(i); }
        if (isNaN(i) || i == Math.floor(i)) { this.moveToIndex(); }
        else { this.moveToPosition(i); }
    }, 

    /*
     * initializes item and adds it at index position
     */
    addItem: function(el, index) {
        if (typeof index == "string") {
            switch (index) {
                case "last":
                case "end":
                    index = this.itemsLastIndex + 1;
                    break;
                default:
                    index = this._getIndexByKeyWord(index, this._activeItem, false);
            }
        }

        index = Math.max(index, 0);
        index = Math.min(index, this.itemsLastIndex + 1);
        
        var tpIndex = this._getIndexByPosition(this._targetPosition);
        var cpIndex = this._getIndexByPosition(this._currentPosition);
        if ( index <= tpIndex ) { tpIndex++; }
        if ( index <= cpIndex ) { cpIndex++; }

        el.style.visibility = "hidden";
        /* insert item at index position into flow */ 
        if (index > this.itemsLastIndex || !this.items[index]) {
            this.flow.appendChild(el);
        }
        else {
            this.flow.insertBefore(el, this.items[index].element);
        }

        if (this.items.length === 0 ) { $(el).addClassName('active'); }

        this.items.splice(index,0, {element: el, item: el, index:index});
        this._reIndex(index);

        /* init item after insertion. that way it's part of the document and all styles are applied */
        this._initItem(index);

        this._targetPosition = this._getPositionByIndex(tpIndex);
        this._currentPosition = this._getPositionByIndex(cpIndex);

        this._initStep();
        return index;
        
    },
        
    /*
     * removes item at index position, cleans it up and returns it
     */
    rmItem: function(index) {
        index = this._getIndexByKeyWord(index, this._activeItem, true);
        
        var tpIndex = this._getIndexByPosition(this._targetPosition);
        var cpIndex = this._getIndexByPosition(this._currentPosition);
        if ( index <= tpIndex ) { tpIndex--; }
        if ( index <= cpIndex ) { cpIndex--; }

        var Item = this.items[index];
        var item = Item.element;

        /* remove event listeners */
        var ciItem = this._ciItem;
        var caItem = this._caItem;

        Item[this.activeElement].removeEvent('click', ciItem, false);
        if (window.removeEventListener) {
            Item[this.activeElement].removeEvent('click', caItem, false);
        }
        else {
            Item[this.activeElement].onclick = function () {};
        }

        this.items.splice(index,1);

        this._reIndex(index);
        
        /* adjust targetItem, currentPos and activeItem so that current view does not change*/
        this._targetPosition = this._getPositionByIndex(tpIndex);
        this._currentPosition = this._getPositionByIndex(cpIndex);
        this._activeItem = this.getItem(Math.round(this._currentPosition));

        /* remove item from DOM tree, take the next step and return removed item  */
        item.parentNode.removeChild(item);
        this._makeActive(this._activeItem);
        this._initStep();

        return Item.original;

    },

    /*
     * unsets/deactivates the method called when a (on)click event is fired on the active item
     */
    unsetOnclickActiveItem: function () {
        this.setOnclickActiveItem(function () {});
    },

    /*
     * sets the function 'method' to be the (on)click method called
     * when a click event happens on an active item. It will be bound to the
     * contentflow object (so 'this' refers tho the CF object).
     */
    setOnclickActiveItem: function (method) {
        this._onclickActiveItem = method;
    },
    setClickActiveItem: function (method) {
        this.setOnclickActiveItem(method);
    }, 

    /*
     * these methods set the coresponding private method and
     * bind the given function to the CF object
     */
    setOnMakeActive: function (method) {
        this._calcStepWidth = method.bind(this);
    },
    setCalcStepWidth: function (method) {
        this._calcStepWidth = method.bind(this);
    },
    setCalcSize: function (method) {
        this._calcSize = method.bind(this);
    },
    setCalcPosition: function (method) {
        this._calcPosition = method.bind(this);
    },
    setCalcZIndex: function (method) {
        this._calcZIndex = method.bind(this);
    },
    setCalcFontSize: function (method) {
        this._calcFontSize = method.bind(this);
    },

    /*
     * ==================== helper methods ====================
     */

    /*
     * checks if index is within the index range of the this.items array
     * returns a value that is within this range
     */
    _checkIndex: function (index) {
        index = Math.max(index, 0);
        index = Math.min(index, this.itemsLastIndex);
        return index;
    },

    /* adjust item indices */
    _reIndex: function (index) {
        for (var i = index ; i < this.items.length; i++) {
            this.items[i].itemIndex = i;
            this.items[i].index = i;
        }
        this._setLastIndex();
    },

    /*
     * sets the object property itemsLastIndex
     */
    _setLastIndex: function () {
        this.itemsLastIndex = this.items.length - 1;
    },

    _getItemByIndex: function (index) {
        return this.items[this._checkIndex(index)];
    },

    _getItemByPosition: function (position) {
        return this._getItemByIndex(this._getIndexByPosition(position));
    },

    /* returns the position of an item-index relative to current position */
    _getPositionByIndex: function(index) {
        index = this._checkIndex(index);
        if (!this.circularFlow) { return index; }
        var cI = this._getIndexByPosition(this._currentPosition);
        var dI = index - cI;
        if (Math.abs(dI) > dI+this.items.length) {
            dI+= this.items.length;
        }
        else if (Math.abs(dI) > (Math.abs(dI-this.items.length))) {
            dI -= this.items.length;
        }

        return this._currentPosition + dI;

    },

    /* returns the index an item at position p would have */
    _getIndexByPosition: function (position) {
        var mod;
        if (position < 0) { mod = 0; }
        else { mod = 1; }

        var I = (Math.round(position) + mod) % this.items.length;
             if (I>0)        { I -= mod; }
        else if (I<0)        { I += this.items.length - mod; }
        else if (position<0) { I = 0; }
        else                 { I = this.items.length - 1; }

        return I;
    },

    _getIndexByKeyWord: function (keyword, relativeTo, check) {
        var index;
        if (relativeTo) { index = relativeTo; }
        else { index = this._activeItem.index; }

        if (!keyword || keyword == "undefined") { keyword = index; }

        if (isNaN(keyword)) {
            switch (keyword) {
                case "active":
                    index = this._activeItem.index;
                    break;
                case "first":
                case "start":
                    index = 0;
                    break;
                case "last":
                case "end":
                    index = this.itemsLastIndex;
                    break;
                case "middle":
                case "center":
                    index = Math.round(this.itemsLastIndex/2);
                    break;
                case "next":
                    index += 1;
                    break;
                case "pre":
                case "previous":
                    index -= 1;
                    break;
                case 'visible':
                case 'visiblePre':
                case 'visibleLeft':
                    index -= this.visibleItems;
                    break;
                case 'visibleNext':
                case 'visibleRight':
                    index += this.visibleItems;
                    break;
                default:
                    index = index;
            }
        }
        else {
            index = keyword;
        }
        if (check !== false) { index = this._checkIndex(index); }
        
        return index;
    },

    _setImageFormat: function (img) {
        img.origProportion = img.height / img.width;
        img.setAttribute('origProportion', img.height / img.width);
        //img.origWidth = img.width;
        //img.origHeight = img.height;
        if (img.origProportion >= 1) { 
            img.addClassName('portray');
        }
        else {
            img.addClassName('landscape');
        }
    },

    /*
     * add reflection to item i
     */
    _addReflection: function(item) {
        var reflection;
        var image = item.content;

        if (this.reflectionType == "serverside") {
            var mFILE = this._fileRegEx.exec(image.src);
            var sURLTO = image.src.replace(new RegExp(mFILE[1]+'$'), '');

            var src = this.reflectionServerSrc;
            src = src.replace(/\{URLTO\}/, sURLTO);
            src = src.replace(/\{FILE\}/, mFILE[1]);
            src = src.replace(/\{FILENAME\}/, mFILE[2]);
            src = src.replace(/\{EXT\}/, mFILE[3]);

            reflection = item.reflection = document.createElement('img');
            reflection.src = src;

        } else {

            if (this._browserIE) {
                var RefImg;
                var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
                if (this.reflectionColorRGB) {
                    // transparent gradient
                    if (this.reflectionColor == "transparent") {
                        item.reflection = document.createElement('img');
                        reflection = item.reflection;
                        RefImg = reflection;
                        reflection.src = image.src;
                    }
                    // color gradient
                    else {
                        reflection = item.reflection = document.createElement('div');
                        RefImg = document.createElement('img');
                        RefImg.src = image.src;
                        reflection.width = RefImg.width;
                        reflection.height = RefImg.height;
                        RefImg.style.width = '100%';
                        RefImg.style.height = '100%';
                        var color = this.reflectionColorRGB;
                        reflection.style.backgroundColor = '#'+color.hR+color.hG+color.hB;
                        reflection.appendChild(RefImg);
                    }
                    filterString += ' progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY='+this.reflectionHeight*100+' finishY=0)';
                } else {
                    item.reflection = document.createElement('img');
                    reflection = item.reflection;
                    RefImg = reflection;
                    reflection.src = image.src;
                }
                // crop image (streches and crops (clip on default dimensions), original proportions will be restored through CSS)
                filterString += ' progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22='+1/this.reflectionHeight+')';

                RefImg.style.filter = filterString;

            } else {
                if (this.reflectionWithinImage) {
                    var canvas = item.canvas = $(document.createElement('canvas'));
                }
                else {
                    var canvas = reflection = item.reflection = document.createElement('canvas');
                }
                
                if (canvas.getContext) {
                    if (this.reflectionWithinImage) {
                        for (var i=0; i <image.attributes.length; i++) {
                            canvas.setAttributeNode(image.attributes[i].cloneNode(true));
                        }
                    }

                    var context = canvas.getContext("2d");
                        
                    // overwrite default height and width
                    if (this.reflectionWithinImage) {
                        canvas.width = image.width;
                        canvas.height = image.height; 
                        this._setImageFormat(canvas);
                        canvas.height = image.height * (1 + this.reflectionHeight);
                    }
                    else {
                        canvas.width = image.width;
                        canvas.height = image.height * this.reflectionHeight;
                    }
                        
                    context.save(); /* save default context */

                    /* draw image into canvas */
                    if (this.reflectionWithinImage)
                        context.drawImage(image, 0, 0);

                    /* mirror image by transformation of context and image drawing */
                    if (this.reflectionWithinImage) { // -1 for FF 1.5
                        var contextHeight = image.height * 2 - 1;
                    }
                    else {
                        var contextHeight = image.height - 1;
                    }
                    
                    context.translate(0, contextHeight);
                    context.scale(1, -1);
                    /* draw reflection image into canvas */
                    context.drawImage(image, 0, 0);

                    /* restore default context for simpler further canvas manupulation */
                    context.restore();
                        
                    if (this.reflectionColorRGB) {
                        var gradient = context.createLinearGradient(0, 0, 0, canvas.height);

                        var alpha = [0, 0.5, 1];
                        if (this.reflectionColor == "transparent") {
                            context.globalCompositeOperation = "destination-in";
                            alpha = [1, 0.5, 0];
                        }

                        var red = this.reflectionColorRGB.iR;
                        var green = this.reflectionColorRGB.iG;
                        var blue = this.reflectionColorRGB.iB;
                        if (this.reflectionWithinImage) {
                            gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
                            gradient.addColorStop(image.height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
                            gradient.addColorStop(image.height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
                        }
                        else {
                            gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
                        }
                        gradient.addColorStop(1, 'rgba('+red+','+green+','+blue+','+alpha[2]+')');

                        context.fillStyle = gradient;
                        context.fillRect(0, 0, canvas.width, canvas.height);
                        
                    }

                    if (this.reflectionWithinImage) {
                        image.parentNode.replaceChild(canvas, image);
                        item.content = canvas;
                        delete item.image;// = true;
                    }
                    
                } else {
                    this.reflectionWithinImage = false;
                    delete item.reflection;
                }

            }
        }
        if (reflection) {
            reflection.className = "reflection";
            item.element.appendChild(reflection);

            if (this.reflectionColor == "overlay" && item.reflection ) {
                if (this._browserIE && !this._browserIE7) {
                    var refOverlay = item.reflectionOverlay = document.createElement('span');
                    refOverlay.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+this.reflectionOverlaySrc+'", sizingMethod="scale")';
                } else {
                    var refOverlay = item.reflectionOverlay = document.createElement('img');
                    refOverlay.src = this.reflectionOverlaySrc;
                }
                refOverlay.width = this.reflectionOverlay.width;
                refOverlay.height = this.reflectionOverlay.height;
                refOverlay.className = 'refoverlay';
                item.element.appendChild(refOverlay);
            }
            
            /* be shure that caption is last child */
            if (item.caption) { item.element.appendChild(item.caption); }
        } 

    },


    /* just for debugging proposes */
    info: function(string) {
        var info = document.getElementById('info');
        info.innerHTML = string;
    },


    /*
     * ==================== item click events ====================
     * handles the click event on an active and none active item
     */

    _onclickInactiveItem: function () {},
    _clickInactiveItem: function (event) {
        var el = event.target;
        var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
        this._onclickInactiveItem(this.items[index]);
        this.moveToIndex(index);
    },


    _onclickActiveItem: function () {},
    _clickActiveItem: function (event) {
        var el = event.target;
        var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
        this._onclickActiveItem(this.items[index]);
    },
    
    _makeActive: function (AI) {
        var ciItem = this._ciItem;
        var caItem = this._caItem;

        /* remove click events from old active item */
        this._activeItem[this.activeElement].removeClassName('active');
        if (window.addEventListener) {
            this._activeItem[this.activeElement].removeEvent('click', caItem, false);
        } else {
            this._activeItem[this.activeElement].onclick = ciItem;
        }

        this._activeItem = AI;
    
        /* add click events to new active Item*/
        this._activeItem[this.activeElement].addClassName('active');
        if (window.addEventListener) {
            this._activeItem[this.activeElement].addEvent('click', caItem, false);
        } else {
            this._activeItem[this.activeElement].onclick = caItem;
        }

        if (this.slider && !this.sliderLock) {
            this._setSliderLabel(this._activeItem.index);
        }
        this._setGlobalCaption();
        this._onMakeActive(this._activeItem);
    },


    /*
     * ==================== initialization ====================
     */


    /* -------------------- main init -------------------- */
    _init: function () {

        if (typeof(this.container) == 'string') { // no node
            var container = document.getElementById(this.container);
            if (container) {
                this.container = container;
            } else {
                throw ('ContentFlow ERROR: No element with id \''+this.container+'\' found!');
                return;
            }
        }
        
        /* reserve CSS namespace */

        $(this.container).addClassName('ContentFlow');

        this.flow = $(this.container).getChildrenByClassName('flow')[0];
        if (!this.flow) {
            throw ('ContentFlow ERROR: No element with class\'flow\' found!');
            return;
        }

        this.isInit = true;

        this.scrollbar = this.container.getChildrenByClassName('scrollbar')[0];
        if (this.scrollbar) {
           this.slider = $(this.scrollbar).getChildrenByClassName('slider')[0];
            if (this.slider) {
                if (this._browserIE && !this._browserIE7) {
                    var virtualSlider = document.createElement('div');
                    virtualSlider.className = 'virtualSlider';
                    this.slider.appendChild(virtualSlider);
                }
                this.position = this.slider.getChildrenByClassName('position')[0];
            }

        }
        this.globalCaption = this.container.getChildrenByClassName('globalCaption')[0];
        this.loadIndicator = this.container.getChildrenByClassName('loadIndicator')[0];
        
        /* init AddOns */
        this._initAddOns();

        /* init click functions */
        this._ciItem =  this._clickInactiveItem.bind(this);
        this._caItem =  this._clickActiveItem.bind(this);

        if (this.activeElement != "content") { this.activeElement = "item"; }

        this._initItemList();

        var now = new Date();
        var cf = this;
        var timer = window.setInterval (
            function() {
                if ( cf._imagesToLoad == 0 || new Date() - now > cf.loadingTimeout ) {
                    clearInterval(timer);
                    cf._initStep2();
                }
            }, 10
        );

    },

    _initStep2: function () {

        this.flow.style.visibility = "visible"; // show flow after images are loaded
        this._initSizes();

        /* init startparameters */
        this._initStartParameters();

        /* setup observers */
        this._initObservers();

        /* take first step */
        this._initStep();
        
        /* show the flow if it was hidden */
        if (this.loadIndicator) this.loadIndicator.style.display = "none";
    },

    /* ---------- init AddOns ---------- */ 
    _initAddOns: function () {
        ContentFlowGlobal.AddOns['DEFAULT']._init(this);
        if (typeof this.useAddOns == "string") {
            this.useAddOns = new Array();
            if (this.useAddOns != "none") {
                for (var AddOn in ContentFlowGlobal.AddOns) {
                    this.useAddOns.push(AddOn);
                }
            }
        }
        var AddOn;
        for (var i=0; i< this.useAddOns.length; i++) {
            AddOn = ContentFlowGlobal.AddOns[this.useAddOns[i]];
            if (AddOn) { AddOn._init(this); }
        }
    },

    /* ---------- init elemet sizes ---------- */ 
    _initSizes: function () {
        if (this.containerOldHeight) this.container.style.height = this.containerOldHeight;
        if (this.flowOldHeight) this.flow.style.height = this.flowOldHeight;
        this.containerOldHeight = "auto";
        this.flowOldHeight = "auto";
        
        if (this.maxItemHeight <= 0) {

            this.maxHeight = this.flow.clientWidth / 3 * screen.height/screen.width * this.scaleFactor ;  // divided by 3 because of left/center/right, yes it's a magic number

            if (this.container.style.height && this.container.style.height != "auto") {
                this.maxHeight = this.container.clientHeight / (this.scaleFactor * (this.reflectionType != "none" ? 1 + this.reflectionHeight : 1)); 
                this.containerOldHeight = this.container.style.height;
            }
            else if (this.flow.style.height && this.flow.style.height != "auto") {
                this.maxHeight = this.flow.clientHeight / (this.scaleFactor * (this.reflectionType != "none" ? 1 + this.reflectionHeight : 1));
                this.flowOldHeight = this.flow.style.height;
            }
        }
        else {
            this.maxHeight = this.maxItemHeight;
        }

        if (this.scrollbar) {
            this.scrollbarDim = this.scrollbar.getDimensions();
            this.scrollbarCenter = {x: this.scrollbarDim.width/2, y:this.scrollbarDim.height/2};
            this.scrollbarPos = this.scrollbar.findPos();
            var maxHeightCorrection = this.scrollbarDim.height;

            if (this.slider) {
                this.sliderDim = this.slider.getDimensions();
                this.sliderCenter = {x: this.sliderDim.width/2, y:this.sliderDim.height/2};
                this.sliderPos = this.slider.findPos();
                maxHeightCorrection += this.sliderDim.height;

                if (this.position) {
                    this.position.innerHTML="&nbsp;";
                    this.positionDim = this.position.getDimensions();
                    this.positionPos = this.position.findPos();
                    var extraSpace = this.positionPos.top - this.sliderPos.top;
                    if (extraSpace > 0) {
                        extraSpace += -this.scrollbarDim.height + this.positionDim.height;
                        this.scrollbar.style.marginBottom = extraSpace + "px";
                    }
                    else {
                        extraSpace *= -1;
                        this.scrollbar.style.marginTop = extraSpace + "px";
                    }
                    maxHeightCorrection += extraSpace;
                }
            }
            if (this.container.style.height && this.container.style.height != "auto") {
                this.maxHeight -= maxHeightCorrection; 
            }
        }

        var maxItemSize = this._calcSize(this.biggestItemPos, 0);


        if (this.reflectionType != "none") {
            this.flow.style.height = maxItemSize.height * (1 + this.reflectionHeight) + "px";
            if (typeof(this.negativeMarginOnFloat) == "number") {
                this.flow.style.marginBottom = -maxItemSize.height * (this.reflectionHeight * this.negativeMarginOnFloat)+ "px";
            } else {
                this.flow.style.marginBottom = -maxItemSize.height * this.reflectionHeight+ "px";
            }
            this.flowDim = this.flow.getDimensions();
            if (this.container.clientHeight < this.flowDim.height) {
                this.container.style.height = this.flowDim.height+"px";
            }
        } else {
            this.flow.style.height = maxItemSize.height + "px";
            this.flow.style.marginBottom = "0";
        }
        this.flowDim = this.flow.getDimensions();
        this.flowCenter = {x: this.flowDim.width/2, y:maxItemSize.height/2};
    },

    /*
     * ---------- init item lists ----------
     */
    _initItemList: function () {
        this.shownItems = {};
        var items = this.flow.getChildrenByClassName('item');
        this.items = new Array();
        for (var i=0; i<items.length; i++) {
            this.items[i] = {};
            this.items[i].element = this.items[i].item = $(items[i]);
            this._initItem(i);
            this.shownItems[i] = i;
        }
        this.items[0].element.addClassName('active');
        this._activeItem = this.items[0];
        this._setLastIndex();
    },

    /*
     *  init item
     */
    _initItem: function(index) {
        var item = this.items[index];
        item.original = item.element.cloneNode(true);
        item.index = index;
        item.element.itemIndex = index;

        item.content = item.element.getChildrenByClassName('content')[0];
        item.caption = item.element.getChildrenByClassName('caption')[0];
        item.label = item.element.getChildrenByClassName('label')[0];
            
        /* if content is image set properties */
        if (item.content.nodeName == "IMG") {
            this._imagesToLoad++;

            var foo = function () { 
                this._imagesToLoad--;
                item.image = item.content;
                this._setImageFormat(item.image);
                if (this.reflectionType != "none") { this._addReflection(item); }

                var ciItem = this._ciItem;
                if (window.addEventListener) {
                    item[this.activeElement].addEvent('click', ciItem, false);
                } else {
                    item[this.activeElement].onclick = ciItem;
                }
            };

            var foobar = foo.bind(this);
            if (item.content.complete && item.content.width > 0) {
                foobar();
            }
            else {
                item.content.onload = foobar;
            }

            /* add overlay if Gecko because of DnD of images */
            /*
            if (!document.all) {
                this.itemsOverlay[index] = document.createElement('div');
                this.itemsOverlay[index].className = 'overlay';
                item.appendChild(this.itemsOverlay[index]);
                if (this.reflectionType != "none") {
                    item.addClassName('withReflection');
                    this.itemsOverlay[index].style.height = (1 + this.reflectionHeight) * 100 +"%";
                }
            }
            */

        } 

    },

    /*
     * initializes the startparameter visibleItems, startItem and scrollinFrom
     */
    _initStartParameters: function () {

        if (this.visibleItems < 0) {
            this.visibleItems = Math.round(Math.sqrt(this.items.length));
        }
        this.visibleItems = Math.min(this.visibleItems, this.items.length - 1);

        this._targetPosition = this._getIndexByKeyWord(this.startItem);

        var index = this._getIndexByKeyWord(this.scrollInFrom, this._targetPosition);
        switch (this.scrollInFrom) {
            case "next":
                index -= 0.5;
                break;
            case "pre":
                index += 0.5;
                break;
            case "none":
                this._activeItem = this.getItem(index);
        } 
        this._currentPosition = index;
        
    },

    /*
     * adds event listeners to elements
     */
    _initObservers: function() {
        if (this.scrollbar) {
            var sb = this._clickedScrollbar.bind(this);
            this.scrollbar.addEvent('click', sb, false);

            if (this.slider) {
                var actS = this._activateDragSlider.bind(this);
                this.slider.addEvent('mousedown', actS, false);
            }
            
            var pre = this.scrollbar.getChildrenByClassName('preButton')[0];
            if (pre) {
                var mt = this._onclickPreButton.bind(this);
                pre.addEvent('click', mt, false);
            }
            var next = this.scrollbar.getChildrenByClassName('nextButton')[0];
            if (next) {
                var mt = this._onclickNextButton.bind(this);
                next.addEvent('click', mt, false);
            }
        }

        if (this.flowDragFriction > 0) {
            var actF = this._activateDragFlow.bind(this);
            this.flow.addEvent('mousedown', actF, false);
        }

        if (this.scrollWheelSpeed > 0) {
            var wheel = this._wheel.bind(this);
            if(window.addEventListener) {
                this.container.addEventListener('DOMMouseScroll', wheel, false);
            }
            this.container.onmousewheel = wheel;
        }

        var resize = this.resize.bind(this);
        window.addEvent('resize', resize, false);
        
        var key = this._keyStroke.bind(this);
        this.container.onkeydown = key;
    },


    /*
     * ==================== Key strok ====================
     */

    /*
     * handles keystroke events
     */
    _keyStroke: function(event) {
        if(!event) { var event = window.event; }
        if (event.which) {
            var keyCode = event.which;
        } else if (event.keyCode) {
            var keyCode = event.keyCode;
        }

        switch (keyCode) {
            case 37:
                //this.moveToIndex('pre');
                this.moveTo('pre');
                break;
            case 38:
                this.moveToIndex('visibleNext');
                break;
            case 39:
                this.moveToIndex('next');
                break;
            case 40:
                this.moveToIndex('visiblePre');
                break;
        }
    },
    
    /*
     * ==================== mouse wheel ====================
     * Event handler for mouse wheel event
     * http://adomas.org/javascript-mouse-wheel/
     */

    _wheel: function (event) {
        if (!event) { var event = window.event; } // MS
        
        var delta = 0;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120; 
        } else if (event.detail) {
            delta = -event.detail/3;
        }

        if (delta) {
            var target = this._targetPosition ;
            if (delta < 0 ) {
                target += (1 * this.scrollWheelSpeed);
            } else {
                target -= (1 * this.scrollWheelSpeed);
            } 
            this.moveToPosition(Math.round(target));
        }

        event.stop();
    },

    /*
     * ==================== drag and throw flow ====================
     */

    /*
     * init mousemove and mouseup events on flow 
     */
    _activateDragFlow: function(event) {
        if (!event) { var event = window.event; }

        this.mouseX = event.clientX; 
        this.ms = new Date();

        var dragF = this.dragF = this._dragFlow.bind(this);
        window.addEvent('mousemove',dragF, false);

        var deaDF = this._deactivateDragFlow.bind(this);
        window.addEvent('mouseup', deaDF, false);
    },

    /*
     * remove mousemove event from flow
     */
    _deactivateDragFlow: function(event) {
        if (!event) { var event = window.event; }
        event.stop();

        var dragF = this.dragF;
        window.removeEvent('mousemove', dragF, false);

        this.moveToPosition(Math.round(this._targetPosition));
        
    },

    /*
     * handles the mouse movemend and inits next step while mousedown
     */
    _dragFlow: function(event) {
        if (!event) { var event = window.event; }

        var ms = new Date();
        var mouseX = event.clientX;
        
        var dur = (this.ms - ms); // ms
        var dist = mouseX - this.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
        var itemDist = (dist / this.flowDim.width)* (2*this.visibleItems +1); // items
        var target = this._currentPosition - itemDist * 2*this.visibleItems / this.flowDragFriction ;

        this.ms = ms;
        this.mouseX = mouseX; 

        this.moveToPosition(target);
    },

    /*
     * ==================== scrollbar/slider ====================
     */

    /*
     * handles the positioning of the slider
     */
    _setSliderPosition: function (relPos) {
        relPos = relPos - Math.floor(relPos) + this._getIndexByPosition(Math.floor(relPos));
        if (Math.round(relPos) < 0) {
            relPos = this.itemsLastIndex;
        }
        else if (relPos <= 0) {
            relPos = 0;
        }
        else if (Math.round(relPos) > this.itemsLastIndex) {
            relPos = 0;
        }
        else if (relPos >= this.itemsLastIndex) {
            relPos = this.itemsLastIndex;
        }


        if (this.items.length > 1) {
            var sPos = (relPos / this.itemsLastIndex)* this.scrollbarDim.width;
        } else {
            var sPos = 0.5 * this.scrollbarDim.width;
        }
        this.slider.style.left = sPos - this.sliderCenter.x+ "px";
        this.slider.style.top = this.scrollbarCenter.y - this.sliderCenter.y +"px";

    },

    _setSliderLabel: function (index) {
        if (this.position) {
            index = this._checkIndex(Math.round(index))
            if (this.items[index].label) {
                this.position.innerHTML = this.items[index].label.innerHTML;
            }
            else {
                this.position.innerHTML = index + 1;
            }
            this.position.style.left = (this.sliderDim.width - this.position.clientWidth)/2 + "px";
        }
    },

    /*
     * handles the click event on the scrollbar
     */
    _clickedScrollbar: function(event) {
        if (!event) { var event = window.event; }

        if (!this.lockScrollbarClick) {
            var mouseX = event.clientX; 
            var positionOnScrollbar = mouseX - this.scrollbarPos.left;
            var targetIndex = Math.round(positionOnScrollbar/this.scrollbarDim.width * this.itemsLastIndex);
            this.moveToIndex(targetIndex);
        }
        else
            this.lockScrollbarClick = false;
    },

    /* -------------------- drag slider -------------------- */

    /*
     * init mousemove event on slider
     */
    _activateDragSlider: function(event) {
        if (!event) { var event = window.event; }

        //this.sliderPos = parseInt(this.slider.style.left);
        this.sliderStartPosition = parseInt(this.slider.style.left) + this.sliderCenter.x;
        this.dragSliderStartPosition = this._currentPosition;
        this.sliderStartIndex = this._getIndexByPosition(this.dragSliderStartPosition);
        this.mouseX = event.clientX; 
        this.lockScrollbarClick = true;

        var dragS = this.dragS = this._dragSlider.bind(this);
        window.addEvent('mousemove', dragS, false);
    },

    /*
     * remove mousemove event from slider
     */
    _deactivateDragSlider: function(event) {
        var dragS = this.dragS;
        window.removeEvent('mousemove', dragS, false);
        this._targetPosition = Math.round(this._targetPosition);
        this._initStep(true);
    },
    
    /*
     * handles the slider movemend and inits next step on mouse move
     */
    _dragSlider: function(event) {
        if (!event) { var event = window.event; }

        var deaDS = this._deactivateDragSlider.bind(this);
        window.addEvent('mouseup', deaDS, false);

        var newSliderPosition = this.sliderStartPosition + event.clientX - this.mouseX;
        var selectedIndex = this._checkIndex(newSliderPosition / this.scrollbarDim.width * this.itemsLastIndex);
        this._targetPosition =  this.dragSliderStartPosition + selectedIndex - this.sliderStartIndex;

        this.sliderLock = true;
        this._setSliderPosition(selectedIndex);
        this._setSliderLabel(selectedIndex);
        this._initStep(true);
    },

    /*
     * ==================== set global Caption ====================
     */
    _setGlobalCaption: function () {
        if (this.globalCaption) {
            this.globalCaption.innerHTML = '';
            if(this._activeItem.caption) {
                this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true));
            }
        }
    },

    /*
     * ==================== move items ====================
     */

    /*
     * intend to make a step 
     */
    _initStep: function (holdSlider) {
        if(holdSlider) {
            this.sliderLock = true;
        } else {
            this.sliderLock = false;
        }
        if (!this._stepLock) {
            this._stepLock = true;
            this._step();
        }
    },


    /*
     * make a step
     */
    _step: function () {
        
        var diff = this._targetPosition - this._currentPosition; 
        var absDiff = Math.abs(diff);
        if ( absDiff > 0.001) { // till activeItem is nearly at position 0

            this._currentPosition += this.flowSpeedFactor * this._calcStepWidth(diff, absDiff);

            var AI = this.items[(this._getIndexByPosition(this._currentPosition))];
            if (AI != this._activeItem) { this._makeActive(AI); }
            
            this._positionItems();

            var st = this._step.bind(this);
            setTimeout(st,this._millisecondsPerStep);

        } else {
            this.sliderLock = false;
            //this._currentPosition = this._activeItem.index;
            this._currentPosition = Math.round(this._currentPosition);
            this._setSliderLabel(this._activeItem.index);
            this._setGlobalCaption();
            this._positionItems();
            this._stepLock = false;
        }

        if (this.slider && !this.sliderLock) {
            this._setSliderPosition(this._currentPosition);
        }
    },

    /*
     * position items
     */
    _positionItems: function () {


        var start = this._currentPosition - this.visibleItems;
        var end = this._currentPosition + this.visibleItems;
        if (!this.circularFlow) {
            start = this._checkIndex(start);
            end = this._checkIndex(end);
        }

        this.oldShownItems = this.shownItems;
        this.shownItems = {};
        /* get indeces of all visible items*/
        for (var p = start ; p <= end; p++) {
            var i = this._getIndexByPosition(p);
            this.shownItems[i] = p;
        }

        /* hide all items, that where show last time but not now*/
        for (var e in this.oldShownItems) {
            if (!this.shownItems[e]) this.items[e].element.style.display = "none";
        }


        for (var i in this.shownItems) {
            var p = this.shownItems[i];
            var Item = this.items[i].element;
            Item.style.display = "none"; // don't show item, till all manipulations are done

            /* Index and position relative to activeItem */
            var relI = Math.round(p - this._currentPosition);
            var relX = Math.round(p) - this._currentPosition;
            var f = relX < 0 ? -1 : 1;

            /* run calculations */
            var size = this._calcSize(relX, f);
            var position = this._calcPosition(relX, f, size);
            var zindex = this._calcZIndex(relX, f, relI);
            var fontSize = this._calcFontSize(relX, f, size);

            /* set position */
            Item.style.left = this.flowCenter.x + position.x - size.width/2 + "px";
            Item.style.top = this.flowCenter.y - position.y - size.height/2 + "px";
            
            /* set size */
            Item.style.width = size.width +"px";
            Item.style.height = size.height +"px";

            /* scale font */
            if (!this._browserIE) {
                //Item.style.fontSize = fontSize * parseInt(Item.style.fontSize) + "px";
            //} else {
                Item.style.fontSize = fontSize * 100 +"%";
            }

            /* set image size */
            if (this.items[i].image || this.reflectionWithinImage) {
                this.positionContent(i, size, position);
            }

            Item.style.zIndex = 32768 + zindex; // just for FF
            Item.style.display = "block";
            Item.style.visibility = "visible";

        }

    },
    positionContent: function (i, size, position) {
        var Item = this.items[i];
        var content = this.items[i].content;
        var proportion = content.origProportion;

        /* calc size and position of content */
        if (proportion >= 1) {
            var contentDim = {
                height: size.height,
                width: size.height / proportion 
            };
        } else {
            var height = size.width * proportion * this.scaleFactorLandscape;
            height = height > this.maxHeight ? this.maxHeight : height;
            var contentDim = {
                height: height,
                width: height / proportion 
            };
            // still needed ?
            if (this._browserIE) {
                if (!contentDim.width) { // don't know why image format is not set, but this will do
                    this._setImageFormat(content);
                    i--;
                }
                Item.style.left = parseInt(Item.style.left) + (size.width - contentDim.width )/2 + "px";
            }
        }
        var contentPos = {
            left: this._browserIE ? 0 : (size.width - contentDim.width )/2,
            top: size.height - contentDim.height
        };

        /* set dimensions and position of content */
        if (this.reflectionType != "none" && this.reflectionWithinImage && !this._browserIE) {
            content.style.height = contentDim.height * (1 + this.reflectionHeight) + "px";
        } else {
            content.style.height = contentDim.height + "px";
        }
        content.style.width = contentDim.width + "px";
        content.style.marginLeft = contentPos.left + "px";
        content.style.marginTop = contentPos.top + "px";



        if (this.items[i].reflection) {
            /* set dimensions and position of reflection */
            var reflection = this.items[i].reflection
            reflection.style.height = contentDim.height*this.reflectionHeight+"px";
            reflection.style.width = content.style.width;
            reflection.style.marginLeft = content.style.marginLeft;

            if (this.items[i].reflectionOverlay) {
                /* set dimensions and position of reflection-overlay */
                var refover = this.items[i].reflectionOverlay;
                refover.style.height = reflection.style.height;
                refover.style.width = reflection.style.width;
                refover.style.marginLeft = reflection.style.marginLeft;
                refover.style.marginTop = '-'+reflection.style.height;
            }
        }
    }
};


/* ==================== extendig javascript/DOM objects ==================== */

/*
 *  adds bind method to Function class
 *  http://www.digital-web.com/articles/scope_in_javascript/
 */

if (!Function.bind) {
    Function.prototype.bind = function(obj) {
        var method = this;
        return function () {
            return method.apply(obj, arguments);
        };
    };
}


if (!Event.stop) {
    Event.prototype.stop = function () {
        this.cancelBubble = true;
        if (this.preventDefault) { this.preventDefault(); }
        if (this.stopPropagation) { this.stopPropagation(); }
        return false;
    };
}

if (document.all && !window.opera) {
    window._$ = function (el) {
        if (CFElement.prototype.extend && !el.extend) { CFElement.prototype.extend(el); }
        return el;
    };
} else {
    window._$ = function (el) {
        return el;
    };
}

if (!window.HTMLElement) {
    CFElement = {};
    CFElement.prototype = {};
    CFElement.prototype.extend = function (el) {
        for (var method in this) {
            if (!el[method]) { el[method] = this[method]; }
        }
    };
}
else {
    CFElement = window.HTMLElement;
}


/*
 * Thanks to Peter-Paul Koch
 * http://www.quirksmode.org/js/findpos.html
 */
if (!CFElement.findPos) {
    CFElement.prototype.findPos = function() {
        var obj = this;
        var curleft = curtop = 0;
        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;
            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            }
        }
        return {left:curleft, top:curtop};
    };
}

if (!CFElement.getDimensions) {
    CFElement.prototype.getDimensions = function() {
        return {width: this.clientWidth, height: this.clientHeight};
    };
}

/*
 * checks if an element has the class className
 */
if (!CFElement.hasClassName) {
    CFElement.prototype.hasClassName = function(className) {
        return (new RegExp('\\b'+className+'\\b').test(this.className));
    };
}

/*
 * adds the class className to the element
 */ 
if (!CFElement.addClassName) {
    CFElement.prototype.addClassName = function(className) {
        if(!this.hasClassName(className)) {
           this.className += (this.className ? ' ':'') + className ;
        }
    };
}

/*
 * removes the class className from the element el
 */ 
if (!CFElement.removeClassName) {
    CFElement.prototype.removeClassName = function(className) {
        this.className = this.className.replace(new RegExp('\\b'+className+'\\b'), '').replace(/\s\s/g,' ');
    };
}

/*
 * removes or adds the class className from/to the element el
 * depending if the element has the class className or not.
 */
if (!CFElement.toggleClassName) {
    CFElement.prototype.toggleClassName = function(className) {
        if(this.hasClassName(className)) {
            this.removeClassName(className);
        } else {
            this.addClassName(className);
        }
    };
}


/*
 * returns all children of element el, which have the class className
 */
if (!CFElement.getChildrenByClassName) {
    CFElement.prototype.getChildrenByClassName = function(className) {
        var children = new Array();
        for (var i=0; i < this.childNodes.length; i++) {
            var c = this.childNodes[i];
            if (c.nodeType == 1 && $(c).hasClassName(className)) {
                children.push(c);
            }
        }
        return children;
    };
}


/*
 * Browser independent event handling method.
 * adds the eventListener  eventName to element el and attaches the function method to it.
 */
if (!CFElement.addEvent) {
    CFElement.prototype.addEvent = function(eventName, method, capture) {
        if (this.addEventListener)
            this.addEventListener(eventName, method, capture);
        else
            this.attachEvent('on'+eventName, method);
    };
}
   
/*
 * Browser independent event handling method.
 * removes the eventListener  eventName with the attached function method from element el.
 */
if (!CFElement.removeEvent) {
    CFElement.prototype.removeEvent = function(eventName, method, capture) {
        if (this.removeEventListener) {
            this.removeEventListener(eventName, method, capture);
        }
        else {
            this.detachEvent('on'+eventName, method);
        }
    };
}

/*
 * Browser independent event handling method.
 * adds the eventListener  eventName to element el and attaches the function method to it.
 */
if (!window.addEvent) {
    window.addEvent = function(eventName, method, capture) {
        if (this.addEventListener) {
            this.addEventListener(eventName, method, capture);
        } else {
            if (eventName != 'load' && eventName != 'resize') {
                document.attachEvent('on'+eventName, method);
            }
            else {
                this.attachEvent('on'+eventName, method);
            }
        }
    };
}
   
/*
 * Browser independent event handling method.
 * removes the eventListener  eventName with the attached function method from element el.
 */
if (!window.removeEvent) {
    window.removeEvent = function(eventName, method, capture) {
        if (this.removeEventListener) {
            this.removeEventListener(eventName, method, capture);
        } else {
            if (eventName != 'load' && eventName != 'resize') {
                document.detachEvent('on'+eventName, method);
            }
            else {
                this.detachEvent('on'+eventName, method);
            }
        }
    };
}

/* ==================== start it all up ==================== */
ContentFlowGlobal.init();