All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.primefaces.contentflow.contentflow.js Maven / Gradle / Ivy

There is a newer version: 14.0.0-RC2
Show newest version
/*  ContentFlow, version 1.0.2 
 *  (c) 2007 - 2010 Sebastian Kutsch
 *  
 *
 *  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: new Array,
    AddOns: {}, 
    scriptName: 'contentflow.js',
    scriptElement:  null,
    Browser: new (function () {
        this.Opera = window.opera ? true : false;
        this.IE = document.all && !this.Opera ? true : false;
        this.IE6 = this.IE && typeof(window.XMLHttpRequest) == "undefined" ? true : false;
        this.IE8 = this.IE && typeof(document.querySelectorAll) != "undefined" ? true : false;
        this.IE7 = this.IE && ! this.IE6 && !this.IE8 ? true : false;
        this.WebKit = /WebKit/i.test(navigator.userAgent) ? true : false, 
        this.iPhone = /iPhone|iPod/i.test(navigator.userAgent)? true : false;
        this.Chrome = /Chrome/i.test(navigator.userAgent) ? true : false;
        this.Safari = /Safari/i.test(navigator.userAgent) && !this.Chrome ? true : false;
        this.Konqueror = navigator.vendor == "KDE" ? true : false;
        this.Konqueror4 = this.Konqueror && /native code/.test(document.getElementsByClassName) ? true : false;
        this.Gecko = !this.WebKit && navigator.product == "Gecko" ? true : false;
        this.Gecko19 = this.Gecko && Array.reduce ? true : false;
    })(),

    getAddOnConf: function(name) {
        if(this.AddOns[name])
            return this.AddOns[name].conf;
        else
            return {};
    },

    setAddOnConf: function (name, conf) {
        this.AddOns[name].setConfig(conf);
    },

    getScriptElement:function (scriptName) {
        var regex = new RegExp(scriptName);
        var scripts = document.getElementsByTagName('script');
        for (var i=0; i<\/script>');
        }
        else {
            var script = document.createElement('script');
            script.src = path;
            script.setAttribute('type', 'text/javascript');
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    },

    addScripts: function  (basePath, filenames) {
        for (var i=0; i');
        }

    },

    addStylesheets: function  (basePath, filenames) {
        for (var i=0; i<\/script>");
            var script = document.getElementById("__ie_cf_onload");
            script.onreadystatechange = function() {
                if (this.readyState == "complete") {
                    CFG.onloadInit(); // call the onload handler
                }
            };
        }

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

        /* ================================================================== */

    },

    onloadInit: function () {
        // quit if this function has already been called
        if (arguments.callee.done) return;
        for (var i=0; i< ContentFlowGlobal.loadAddOns.length; i++) {
            var a = ContentFlowGlobal.loadAddOns[i];
            if (!ContentFlowGlobal.AddOns[a]) {
                var CFG = ContentFlowGlobal;
                window.setTimeout( CFG.onloadInit, 10);
                return;
            }
        }
        // flag this function so we don't do the same thing twice
        arguments.callee.done = true;
        
        /* init all manualy created flows */
        for (var i=0; i< ContentFlowGlobal.Flows.length; i++) {
            ContentFlowGlobal.Flows[i].init(); 
        }
    }

};

ContentFlowGlobal.initPath();


/*
 * ============================================================
 * ContentFlowAddOn
 * ============================================================
 */
var ContentFlowAddOn = function (name, methods, register) {
    if (typeof register == "undefined" || register != false)
        ContentFlowGlobal.AddOns[name] = this;
        
    this.name = name;
    if (!methods) methods = {};
    this.methods = methods;
    this.conf = {};
    if (this.methods.conf) {
       this.setConfig(this.methods.conf);
       delete this.methods.conf;
    }


    this.scriptpath = ContentFlowGlobal.AddOnBaseDir;
    if (methods.init) {
        var init = methods.init.bind(this);
        init(this);
    }
};

ContentFlowAddOn.prototype = {
    Browser: ContentFlowGlobal.Browser,

    addScript: ContentFlowGlobal.addScript,
    addScripts: ContentFlowGlobal.addScripts,

    addStylesheet: function (path) {
        if (!path)
            path = this.scriptpath+'ContentFlowAddOn_'+this.name+'.css';
        ContentFlowGlobal.addStylesheet(path);
    },
    addStylesheets: ContentFlowGlobal.addStylesheets,

    setConfig: function (conf) {
        for (var c in conf) {
            this.conf[c] = conf[c];
        }
    },

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


};



/* 
 * ============================================================
 * ContentFlowGUIElement
 * ============================================================
 */

var ContentFlowGUIElement = function (CFobj, element) {
    element.setDimensions = function () {
        this.dimensions = this.getDimensions();
        this.center = {x: this.dimensions.width/2, y:this.dimensions.height/2};
        this.position = this.findPos();
    };
    element.addObserver = function (eventName, method) {
        var m = this.eventMethod = method.bind(CFobj);
        this.observedEvent = eventName;
        this.addEvent(eventName, m, false);
    };
    
    element.makeDraggable = function (onDrag, beforeDrag, afterDrag) {

        this.stopDrag = function(event) {
            if (!event) var event = window.event;
            if (this.Browser.iPhone)  {
                window.removeEvent('touchemove', onDrag, false);
                if (!this.ontochmove) {
                    var t = event.target;
                    if (t.firstChild) t = t.firstChild;
                    var e = document.createEvent('MouseEvents');
                    e.initEvent('click', true, true);
                    t.dispatchEvent(e);
                }
            }
            else {
                window.removeEvent('mousemove', onDrag, false);
            }
            afterDrag(event); 
        }.bind(this);

        this.initDrag = function (event) {
            if (!event) var event = window.event;
            var e = event;
            if (event.touches) e = event.touches[0];

            this.mouseX = e.clientX; 
            this.mouseY = e.clientY; 

            beforeDrag(event);

        }.bind(this);

        this.startDrag = function (event) {
            if (!event) var event = window.event;

            var stopDrag = this.stopDrag;

            if (this.Browser.iPhone)  {
                var s = this;
                s.ontouchmove = false
                window.addEvent('touchmove', function (e) {
                        s.ontouchmove = true; 
                        onDrag(e);
                }, false);
                event.preventDefault();
                window.addEvent('touchend', stopDrag, false);
            }
            else {
                window.addEvent('mousemove', onDrag, false);
                window.addEvent('mouseup', stopDrag, false);
            }
            if(event.preventDefault) { event.preventDefault() }

        }.bind(this);

        var startDrag = this.startDrag;
        if (this.Browser.iPhone)  {
            this.addEventListener('touchstart', startDrag, false);
        }
        else {
            this.addEvent('mousedown', startDrag, false); 
        }
        
    };

    element.Browser = ContentFlowGlobal.Browser;
    $CF(element).setDimensions();
    return element;
};


/* 
 * ============================================================
 * ContentFlowItem
 * ============================================================
 */
var ContentFlowItem  = function (CFobj, element, index) {
    this.CFobj = CFobj;
    this._activeElement = CFobj.conf.activeElement;
    this.pre = null;
    this.next = null;
    /*
     * ==================== item click events ====================
     * handles the click event on an active and none active item
     */

    this.clickItem = function (event) {
        if(!event) var event = window.event;
        var el = event.target ? event.target : event.srcElement;
        var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
        var item = this.items[index];
        if (this._activeItem == item) {
            this.conf.onclickActiveItem(item);
        }
        else {
            if (this.conf.onclickInactiveItem(item) != false ) this.moveToIndex(index);
        }
    }.bind(CFobj),

    this.setIndex = function (index) {
        this.index = index;
        this.element.itemIndex = index;
    };
    this.getIndex = function () {
        return this.index;
    };


    /* generate deault HTML structure if item is an image */
    if ($CF(element).nodeName == "IMG") {
        var el = document.createElement('div');
        el.className = "item";

        var cont = element.parentNode.replaceChild( el, element);
        cont.className = "content";
        el.appendChild(cont);

        if (element.title) {
            var cap = document.createElement('div');
            cap.className = "caption";
            cap.innerHTML = element.title;
            el.appendChild(cap);
        }
        element = el;
    }

    /* create item object */
    this.element = $CF(element);
    this.item = element;
    if (typeof index != "undefined") this.setIndex(index);
    this.content = this.element.getChildrenByClassName('content')[0];
    this.caption = this.element.getChildrenByClassName('caption')[0];
    this.label = this.element.getChildrenByClassName('label')[0];

    /* if content is image set properties */
    if (this.content.nodeName == "IMG") {
        CFobj._imagesToLoad++;

        var foobar = function () { 
            CFobj._imagesToLoad--;
            this.image = this.content;
            this.setImageFormat(this.image);
            if ( CFobj.conf.reflectionHeight > 0) {
                this.addReflection();
            }
            this.initClick();
            CFobj._addItemCueProcess(true);
        }.bind(this);

        if (this.content.complete && this.content.width > 0)
            window.setTimeout(foobar, 100);
        else if (this.Browser.IE && !this.content.onload) {
            var self = this;
            var t = window.setInterval( function () {
                if (self.content.complete && self.content.width > 0) {
                    window.clearInterval(t);
                    foobar();
                }
            }, 10);
        }
        else
            this.content.onload = window.setTimeout(foobar, 100);
    }
    else {
        this.initClick();
        CFobj._addItemCueProcess(true);
    }

};

ContentFlowItem.prototype = {
    
    Browser: ContentFlowGlobal.Browser,

    makeActive: function () {
        this.element.addClassName('active');
        this.CFobj.conf.onMakeActive(this);
    },
    
    makeInactive: function () {
        this.element.removeClassName('active');
        this.CFobj.conf.onMakeInactive(this);
    },

    initClick: function () {
        var cItem = this.clickItem;
        this[this._activeElement].addEvent('click', cItem, false);
    },
    
    setImageFormat: function (img) {
        if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "auto";
        img.origProportion =  img.width / img.height;
        img.setAttribute('origProportion', img.width / img.height);
        if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "";
        //img.origWidth = img.width;
        //img.origHeight = img.height;
        if (img.origProportion <= 1)
            img.addClassName('portray');
        else
            img.addClassName('landscape');
    },

    /*
     * add reflection to item
     */
    addReflection: function() {
        var CFobj = this.CFobj;
        var reflection;
        var image = this.content;


        if (this.Browser.IE) {
            var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
            if (CFobj._reflectionColorRGB) {
                // transparent gradient
                if (CFobj.conf.reflectionColor == "transparent") {
                    var RefImg = reflection = this.reflection = document.createElement('img');
                    reflection.src = image.src;
                }
                // color gradient
                else {
                    reflection = this.reflection = document.createElement('div');
                    var 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 = CFobj._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='+CFobj.conf.reflectionHeight*100+' finishY=0)';
            } else {
                var RefImg = reflection = this.reflection = document.createElement('img');
                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/CFobj.conf.reflectionHeight+')';

            if (ContentFlowGlobal.Browser.IE6) {
                if (image.src.match(/\.png$/) ) {
                    image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
                    image.filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
                    filterString += " progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
                    image.origSrc = image.src;
                    image.src='img/blank.gif';
                    RefImg.src="img/blank.gif";
                }
            }

            reflection.filterString = filterString;
            RefImg.style.filter = filterString;

        } else {
            if (CFobj._reflectionWithinImage)
                var canvas = this.canvas = $CF(document.createElement('canvas'));
            else 
                var canvas = reflection = this.reflection = document.createElement('canvas');

            if (canvas.getContext) {
                if (CFobj._reflectionWithinImage) {
                    for (var i=0; i  vI) {
                if (diff > 0) {
                    var stepwidth = diff - vI;
                } else {
                    var stepwidth = diff + vI;
                }
            } else if (vI >= this.items.length) {
                var stepwidth = diff / items;
            } else {
                var stepwidth = diff * ( vI / items);
                //var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length);
                //var stepwidth = this.flowSpeedFactor * diff / this.visibleItems;
                //var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length)
                //var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed
            }
            return stepwidth;
        },
        
        calcSize: function (item) {
            var rP = item.relativePosition;
            //var rPN = relativePositionNormed;
            //var vI = this.conf.visibleItems; 

            var h = 1/(Math.abs(rP)+1);
            var w = h;
            return {width: w, height: h};
        },

        calcCoordinates: function (item) {
            var rP = item.relativePosition;
            //var rPN = item.relativePositionNormed;
            var vI = this.conf.visibleItems; 

            var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
            var x =  item.side * vI/(vI+1)* f; 
            var y = 1;

            return {x: x, y: y};
        },

        /*
        calcRelativeItemPosition: function (item) {
            var x = 0;
            var y = -1;
            return {x: x, y: y};
        },
        */

        calcZIndex: function (item) {
            return -Math.abs(item.relativePositionNormed);
        },

        calcFontSize: function (item) {
            return item.size.height;
        },
   
        calcOpacity: function (item) {
            return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity);
        }
    },

    /* ---------- end of defaultConf ---------- */

    
    /*
     * ==================== index 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;
    },

    /*
     * 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) {
        if (!this.conf.circularFlow) return this._checkIndex(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) {
        if (position < 0) var mod = 0;
        else var 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) {
        if (relativeTo)
            var index = relativeTo;
        else if (this._activeItem)
            var index = this._activeItem.index;
        else
            var index = 0;

        if (isNaN(keyword)) {
            switch (keyword) {
                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 "right":
                case "next":
                    index += 1;
                    break;
                case "left":
                case "pre":
                case "previous":
                    index -= 1;
                    break;
                case 'visible':
                case 'visiblePre':
                case 'visibleLeft':
                    index -= this.conf.visibleItems;
                    break;
                case 'visibleNext':
                case 'visibleRight':
                    index += this.conf.visibleItems;
                    break;
                default:
                    index = index;
            }
        }
        else {
            index = keyword;
        }
        if (check != false)
            index = this._checkIndex(index);
        
        return index;
    },


    _setCaptionLabel: function (index) {
        if(this.Position && !this.Slider.locked)
            this.Position.setLabel(index);
        this._setGlobalCaption();
    },


    /*
     * ==================== public methods ==================== 
     */
    getAddOnConf: function(name) {
          return ContentFlowGlobal.getAddOnConf(name);
    },

    setAddOnConf: function(name, conf) {
          ContentFlowGlobal.setAddOnConf(name, conf);
    },


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

    /*
     * 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":
                    if (typeof(config[option]) == "number"  || typeof(config[option]) == "string") {
                        //this["_"+option] = config[option];
                        this.conf[option] = config[option];
                    }
                    break;
                default:
                    if (typeof(dC[option] == config[option])) {
                        //this["_"+option] = config[option];
                        if (typeof config[option] == "function") {
                            this.conf[option] = config[option].bind(this);
                        }
                        else {
                            this.conf[option] = config[option];
                        }
                    }
            }
        }
        switch (this.conf.reflectionColor) {
            case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.conf.reflectionColor:this.conf.reflectionColor+"x":
                this._reflectionColorRGB = {
                    hR: this.conf.reflectionColor.slice(1,3),
                    hG: this.conf.reflectionColor.slice(3,5),
                    hB: this.conf.reflectionColor.slice(5,7),
                    iR: parseInt(this.conf.reflectionColor.slice(1,3), 16),
                    iG: parseInt(this.conf.reflectionColor.slice(3,5), 16),
                    iB: parseInt(this.conf.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.items) {
            if (this.conf.visibleItems <  0)
                this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
            this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
        }

        if (this.conf.relativeItemPosition) {
            var calcRP = {
                x: {
                    left: function(size) { return -1 },
                    center: function(size) { return 0 },
                    right: function(size) { return 1 }
                },
                y: {
                    top: function(size) { return -1 },
                    center: function(size) { return 0 },
                    bottom: function(size) { return 1 }
                }
            };

            var iP = this.conf.relativeItemPosition;
            iP = iP.replace(/above/,"top").replace(/below/,"bottom");
            var x, y = null;
            x = iP.match(/left|right/);
            y = iP.match(/top|bottom/);
            c = iP.match(/center/);
            if (!x) {
                if (c) x = "center";
                else x = "center";
            }
            if (!y) {
                if (c) y = "center";
                else y = "top";
            }
            var calcX = calcRP.x[x];
            var calcY = calcRP.y[y];
            this.conf.calcRelativeItemPosition = function (item) {
                var x = calcX(item.size);
                var y = calcY(item.size);
                return {x: x, y: y};
            };
            this.conf.relativeItemPosition = null;
        }

        if (this._reflectionType && this._reflectionType != "clientside") {
            this.conf.reflectionHeight = 0;
        }

    },

    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, holdPos) {
        if (!this.conf.circularFlow) p = this._checkIndex(p);
        this._targetPosition = p;
        this.conf.onMoveTo(this._getItemByPosition(p));
        this._initStep(false, holdPos);
    },
    moveToIndex: function (index) {
        this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.conf.circularFlow)));
        this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
        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);
        else if (isNaN(i) || (i == Math.floor(i) && i < this.items.length) ) this.moveToIndex(i);
        else this.moveToPosition(i);
    }, 

    /*
     * initializes item and adds it at index position
     */
    _addItemCue: [],
    _addItemCueProcess: function (deleteFirst) {
        var c = this._addItemCue;
        if (deleteFirst == true) 
            c.shift();
        if (c.length > 0 && ! c[0].p) {
            c[0].p = true;
            var self = this;
            var t = c.length > 5 ? 1 : 40;
            window.setTimeout(function () { self._addItem(c[0].el, c[0].i)}, t) ;
        }
    },
    addItem: function(el, index) {
        this._addItemCue.push({ el: el, i: index, p: false});
        if (this._addItemCue.length == 1) 
            this._addItemCueProcess();
    },

    _addItem: function(el, index) {
        if (typeof index == "string") {
            switch (index) {
                case "first":
                case "start":
                    index = 0;
                    break;
                case "last":
                case "end":
                    index = isNaN(this.itemsLastIndex) ? 0 : this.itemsLastIndex;
                    index += 1;
                    break;
                default:
                    index = this._getIndexByKeyWord(index);
            }
        }

        index = Math.max(index, 0);
        index = Math.min(index, this.itemsLastIndex + 1);
        index = isNaN(index) ? 0 : index;
        
        this.Flow.appendChild(el);

        /* init item after insertion. that way it's part of the document and all styles are applied */
        var item = new ContentFlowItem(this, el, index);
        if (this.items.length == 0 ) {
            this.resize();
            if (this.conf.circularFlow) {
                item.pre = item;
                item.next = item;
            }
        }
        else {
            if (index == this.itemsLastIndex + 1) {
                item.pre = this.items[this.itemsLastIndex];
                item.next = item.pre.next;
            }
            else {
                item.next = this.items[index];
                item.pre = item.next.pre;
            }
            if (item.pre) item.pre.next = item;
            if (item.next) item.next.pre = item;
        }
        this.items.splice(index,0, item);

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

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

        /* adjust targetItem, currentPos so that current view does not change*/
        if (Math.round(this._getPositionByIndex(index)) <= Math.round(this._targetPosition)) {
            this._targetPosition++;
            if (!this.conf.circularFlow)
                this._targetPosition = Math.min(this._targetPosition, this.itemsLastIndex);
        } 
        if (this._getPositionByIndex(index) <= this._currentPosition) {
            this._currentPosition++;
            if (!this.conf.circularFlow)
                this._currentPosition = Math.min(this._currentPosition, this.itemsLastIndex);
        }
        
        // avoid display errors (wrong sizing)
        var CF = this;
        window.setTimeout(function () {
            if(CF.items.length == 1 ) {
                CF._currentPosition = -0.01;
                CF._targetPosition = 0;
                CF.resize(); 
            }
            else {
                CF._initStep();
            }
        }, 100);

        return index;
        
    },
        
    /*
     * removes item at index position, cleans it up and returns it
     */
    rmItem: function(index) {
        if  (index == "undefined") index = this._activeItem.index;
        index = this._getIndexByKeyWord(index);
        if (!this.items[index]) return null;

        var item = this.items[index];

        if (item.pre) item.pre.next = item.next;
        if (item.next) item.next.pre = item.pre;
        this.items.splice(index,1);

        /* adjust item indices */
        for (var i = index ; i < this.items.length; i++) {
            this.items[i].setIndex(i);
        }
        this._setLastIndex();
        
        /* adjust targetItem, currentPos and activeItem so that current view does not change*/
        if (Math.round(this._getPositionByIndex(index)) < Math.round(this._targetPosition)) {
            this._targetPosition--;
            if (!this.conf.circularFlow)
                this._targetPosition = this._checkIndex(this._targetPosition);
        }
        if (this._getPositionByIndex(index) < this._currentPosition) {
            this._currentPosition--;
            if (!this.conf.circularFlow)
                this._currentPosition = this._checkIndex(this._currentPosition);
        }
        this._activeItem = this._getItemByPosition(this._currentPosition);

        /* remove item from DOM tree, take the next step and return removed item  */
        var removedItem = item.element.parentNode.removeChild(item.element);
        // avoid display errors (wrong sizing)
        var CF = this;
        window.setTimeout(function () { CF._initStep() }, 10);
        return removedItem;

    },


    /*
     * ==================== 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 */

        //$CF(this.Container).addClassName('ContentFlow');

        /* ---------- detect GUI elements */
        var flow = $CF(this.Container).getChildrenByClassName('flow')[0];
        if (!flow) {
            throw ('ContentFlow ERROR: No element with class\'flow\' found!');
            return;
        }
        this.Flow = new ContentFlowGUIElement(this, flow);

        var scrollbar = this.Container.getChildrenByClassName('scrollbar')[0];
        if (scrollbar) {
            this.Scrollbar = new ContentFlowGUIElement(this, scrollbar);
            var slider = this.Scrollbar.getChildrenByClassName('slider')[0];
            if (slider) {
                this.Slider = new ContentFlowGUIElement(this, slider);
                var position = this.Slider.getChildrenByClassName('position')[0];
                if (position) {
                    this.Position = new ContentFlowGUIElement(this, position);
                }
            }

        }

        /* ----------  init configuration */ 
        this.setConfig(this._defaultConf);
        this._initAddOns(); /* init AddOns */
        this.setConfig(this._userConf);
        
        this._initSizes(); // ......


        /* ---------- init item lists ---------- */
        var items = this.Flow.getChildrenByClassName('item');

        this.items = new Array();
        for (var i=0; i 0) { 
                item.pre = this.items[i-1];
                item.pre.next = item;
            }
        }
        this._setLastIndex();
        if (this.conf.circularFlow && this.items.length > 0) {
            var s = this.items[0];
            s.pre = this.items[this.items.length-1];
            s.pre.next = s;
        }

        /* ----------  init GUI */
        this._initGUI();

        /* ---------- init start parameters ---------- */
        if (this._activeElement != "content")
            this._activeElement = "element";

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

        this._targetPosition = this._getIndexByKeyWord(this.conf.startItem, 0);

        var index = this._getIndexByKeyWord(this.conf.scrollInFrom, this._targetPosition);
        switch (this.conf.scrollInFrom) {
            case "next":
            case "right":
                index -= 0.5;
                break;
            case "pre":
            case "previous":
            case "left":
                index += 0.5;
                break;
        } 
        this._currentPosition = index;
        

        /* ---------- wait till all images are loaded or 
         * grace time is up to show all and take the first step  
        */
        var now = new Date();
        var cf = this;
        var timer = window.setInterval (
            function() {
                if ( cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout ) {
                    clearInterval(timer);

                    cf._activeItem = cf.getItem(cf._currentPosition);
                    if (cf._activeItem) {
                        cf._activeItem.makeActive();
                        cf._setCaptionLabel(cf._activeItem.index);
                    }
                    
                    cf.Flow.style.visibility = "visible"; // show flow after images are loaded
                    if (cf.loadIndicator) cf.loadIndicator.style.display = "none";
                    if (cf.Scrollbar) cf.Scrollbar.style.visibility = "visible";

                    cf.resize();
                    for (var i=0; i < cf._loadedAddOns.length; i++) {
                        var a = ContentFlowGlobal.AddOns[cf._loadedAddOns[i]];
                        if (a.methods.afterContentFlowInit)
                            a.methods.afterContentFlowInit(cf);
                    }
                    cf.conf.onInit();
                }
            }, 10
        );
        
        this.isInit = true;

    },
    
    /* ---------- init AddOns ---------- */ 
    _initAddOns: function () {

        // get an array of names of all AddOns that should be used
        var loadAddOns = [];
        if (this._userConf.useAddOns) {
            if (typeof this._userConf.useAddOns == "string") {
                loadAddOns = this._userConf.useAddOns.split(" ");
            }
            else if (typeof this._userConf.useAddOns == "array") {
                loadAddOns = this._userConf.useAddOns;
            }
        }
        else if (this.Container.getAttribute("useAddOns")) {
            loadAddOns = this.Container.getAttribute("useAddOns").split(" ");
        }
        else {
            loadAddOns = this.conf.useAddOns.split(' ');
        }


        // check the names for keywords
        for (var i=0; i 0) key(event) ;
                        });
                    } else {
                        window.addEvent('keydown',  function (event) {
                            if (mouseoverCheck.offsetLeft > 0) key(event) ;
                        });
                    }
                } 
                else {
                    this.Container.addEvent('keydown', key);
                }
            }
            else {
               this.Container.onkeydown = key;
            }
        }


        // Flow object
        if (this.conf.flowDragFriction > 0) {
            var onDrag = function (event) {
                var e = event;
                if (event.touches) e = event.touches[0];
                var mouseX = e.clientX;
                var mouseY = e.clientY;
                
                if (this.conf.verticalFlow) {
                    var dist = mouseY - this.Flow.mouseY; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
                    var dim = this.Flow.dimensions.height;
                }
                else {
                    var dist = mouseX - this.Flow.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
                    var dim = this.Flow.dimensions.width;
                }
                var itemDist = (dist / dim )* (2*this.conf.visibleItems +1); // items
                var target = this._currentPosition - itemDist * 2*this.conf.visibleItems / this.conf.flowDragFriction ;

                this.Flow.mouseX = mouseX; 
                this.Flow.mouseY = mouseY; 

                this.moveToPosition(target, true);
            }.bind(this);

            var beforeDrag = function () {};

            var afterDrag = function (event) {
                var t = Math.round(this._targetPosition);
                if (Math.abs( t - this._currentPosition) > 0.001 )
                    this.moveToPosition(t);
            }.bind(this);


            this.Flow.makeDraggable(onDrag, beforeDrag, afterDrag);
        }

        // Scrollbar Object
        if (this.Scrollbar) {
            var click = function(event) {
                if (!event) var event = window.event;

                if (!this.Scrollbar.clickLocked) {
                    var mouseX = event.clientX; 
                    var positionOnScrollbar = mouseX - this.Scrollbar.position.left;
                    var targetIndex = Math.round(positionOnScrollbar/this.Scrollbar.dimensions.width * this.itemsLastIndex);
                    this.moveToIndex(targetIndex);
                }
                else
                    this.Scrollbar.clickLocked = false;
            }.bind(this);
            this.Scrollbar.addObserver('click', click);
        }

        // Slider Object
        if (this.Slider) {

            if (this.Browser.IE6) {
                var virtualSlider = document.createElement('div');
                virtualSlider.className = 'virtualSlider';
                this.Slider.appendChild(virtualSlider);
            }

            // position slider on scrollbar
            this.Slider.setPosition = 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.Scrollbar.dimensions.width;
                } else {
                    var sPos = 0.5 * this.Scrollbar.dimensions.width;
                }
                this.Slider.style.left = sPos - this.Slider.center.x+ "px";
                this.Slider.style.top = this.Scrollbar.center.y - this.Slider.center.y +"px";

            }.bind(this);

            // make slider draggable
            var beforeDrag = function (event) {
                this.Scrollbar.clickLocked = true;
            }.bind(this);

            var onDrag = function (event) {
                var e = event;
                if (event.touches) e = event.touches[0];
                var selectedIndex = this._checkIndex((e.clientX - this.Scrollbar.position.left) / this.Scrollbar.dimensions.width * this.itemsLastIndex);
                this._targetPosition = this._getPositionByIndex(selectedIndex);
                this.Slider.setPosition(selectedIndex);
                if (this.Position) this.Position.setLabel(selectedIndex);
                this._initStep(true, true);
            }.bind(this);

            var afterDrag = function (event) {
                this._targetPosition = Math.round(this._targetPosition);
                this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
                this._initStep(true);
            }.bind(this);

            this.Slider.makeDraggable(onDrag, beforeDrag, afterDrag);
        }

                
        // Position object
        if (this.Position) {
            this.Position.setLabel = function (index) {
                index = this._checkIndex(Math.round(index));
                if (this.items && this.items[index].label)
                    this.Position.innerHTML = this.items[index].label.innerHTML;
                else
                    this.Position.innerHTML = index + 1;
            }.bind(this);
        }


        this.globalCaption = this.Container.getChildrenByClassName('globalCaption')[0];
        this.loadIndicator = this.Container.getChildrenByClassName('loadIndicator')[0];
    },

    /* ---------- init element sizes ---------- */ 
    _initSizes: function (x) {
        //if (this.Browser.Konqueror4 && x != true) {
            //var t = this;
            //window.setTimeout( function () { t._initSizes(true) }, 0);
            //return;
        //}

        // sets this.maxHeight
        this._initMaxHeight();

        var scrollbarHeight = this._initScrollbarSize();

        // reduce maxHeit if container has a fixed height
        if (!this.conf.verticalFlow && this.Container.style.height && this.Container.style.height != "auto")
            this.maxHeight -= scrollbarHeight; 

        if (!this._activeItem) return;

        var mFS = this._findBiggestItem();

        var pF = this.Flow.findPos();

        /* set height / width of flow */
        if (this.conf.verticalFlow) {
            this.Flow.style.width = mFS.width.width+"px";
            this.Flow.style.height =3* mFS.width.width * (1 + this.conf.reflectionHeight + this.conf.reflectionGap) + "px";
        } else {
            this.Flow.style.height = mFS.height.height +(mFS.height.top - pF.top)+"px";
        }

        /* remove gap */
        var s = this.conf.verticalFlow ? mFS.width.width : mFS.height.height;
        var cH = s /(1 + this.conf.reflectionHeight + this.conf.reflectionGap);
        this.Flow.style.marginBottom = - (s - cH)+ "px";

        this.Flow.dimensions = this.Flow.getDimensions();

        if (!this.Browser.IE6) {
            if (this.conf.verticalFlow && this.Container.clientWidth < this.Flow.dimensions.width) {
                //this.Container.style.width = this.Flow.dimensions.width+"px";
            }
            else if (this.Container.clientHeight < this.Flow.dimensions.height) {
                this.Container.style.height = this.Flow.dimensions.height+"px";
            }
        }

        if (this.conf.verticalFlow) {
           this.Flow.center = {x: this.Flow.dimensions.height/2, y:mFS.width.width/2};
        } else {
           this.Flow.center = {x: this.Flow.dimensions.width/2, y:mFS.height.height/2};
        }

    },

    /* -------------------------------------------------------------------------------- */

    _initScrollbarSize: function () {
        var SB;
        var SL;
        var PO;
        if (SB = this.Scrollbar) {
            SB.setDimensions();
            var scrollbarHeight = SB.dimensions.height;

            if (SL = this.Slider) {
                SL.setDimensions();
                scrollbarHeight += SL.dimensions.height;

                if (PO = this.Position) {
                    
                    var oldLabel = PO.innerHTML;
                    var maxH = maxW = 0;
                    PO.style.width = "auto";

                    if (this.items) {
                        for (var i=0; i < this.items.length; i++) {
                            var item = this.items[i];
                            if (item.label) {
                                PO.innerHTML = item.label.innerHTML;
                            }
                            else {
                                PO.innerHTML = item.index;
                            }
                            var h = PO.clientHeight;
                            var w = PO.clientWidth;
                            if ( h >  maxH) maxH = h;
                            if ( w >  maxW) maxW = w;
                        }
                    }
                    else {
                        PO.innerHTML = " ";
                        maxH = PO.clientHeight;
                        maxW = PO.clientWidth;
                    }

                    PO.innerHTML = oldLabel;

                    PO.setDimensions();

                    PO.style.width = maxW +"px";
                    PO.style.left = (SL.dimensions.width - maxW)/2 + "px";

                    var extraSpace = PO.position.top - SL.position.top;
                    if (extraSpace > 0) {
                        extraSpace += -SB.dimensions.height + maxH;
                        SB.style.marginBottom = extraSpace + "px";
                    }
                    else {
                        extraSpace *= -1;
                        SB.style.marginTop = extraSpace + "px";
                    }
                    scrollbarHeight += extraSpace;
                }
            }
        }
        else {
            scrollbarHeight = 0;
        }

        return scrollbarHeight;

    },

    /* -------------------------------------------------------------------------------- */

    _initMaxHeight: function () {

        if (this.conf.verticalFlow) {
            var proportion = screen.width/screen.height;
            var Csd = this.Container.style.width;
            var Cdim = this.Container.clientWidth;
            var Fsd = this.Flow.style.width;
            var Fdim = this.Flow.clientWidth;
            var Fdim_o = this.Flow.clientHeight;
        } else {
            var proportion = screen.height/screen.width;
            var Csd = this.Container.style.height;
            var Cdim = this.Container.clientHeight;
            var Fsd = this.Flow.style.height;
            var Fdim = this.Flow.clientHeight;
            var Fdim_o = this.Flow.clientWidth;
        }

        // set height of container and flow
        if (this.ContainerOldDim) 
            Csd = this.ContainerOldDim;
        if (this.FlowOldDim) 
            Fsd = this.FlowOldDim;

        this.ContainerOldDim = "auto";
        this.FlowOldDim = "auto";
        

        /* calc maxHeight */
        if (this.conf.maxItemHeight <= 0) {

            this.maxHeight = Fdim_o / 3 * proportion/1 * this.conf.scaleFactor;  // divided by 3 because of left/center/right, yes it's a magic number

            if (this.conf.verticalFlow && (this.maxHeight == 0 || this.maxHeight > Fdim)) {
                this.maxHeight = Fdim;
            }

            if (Csd && Csd != "auto") {
                var gap = this.conf.verticalFlow  ? 0 : this.conf.reflectionGap;
                var rH = this.conf.verticalFlow  ? 0 : this.conf.reflectionHeight;
                this.maxHeight = Cdim/ (this.conf.scaleFactor* (1 + rH + gap)); 
                this.ContainerOldDim = Csd;
            }
            else if (Fsd && Fsd != "auto") {
                var gap = this.conf.verticalFlow  ? 0 : this.conf.reflectionGap;
                this.maxHeight = Fdim / (this.conf.scaleFactor* (1 + this.conf.reflectionHeight + gap));
                this.FlowOldDim = Fsd;
            }
        }
        else {
            this.maxHeight = this.conf.maxItemHeight;
        }
    },

    /* -------------------------------------------------------------------------------- */

    _findBiggestItem: function () {

        var currentItem = this._activeItem;

        var itemP = currentItem.pre;
        var itemN = currentItem.next;
        var mFS = maxFlowSize = {
            width: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 },
            height: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 }
        }


        var checkMax = function (item, rI) {
            var el = item.element;
            el.style.display = "block";
            var p = el.findPos();
            var h =  el.clientHeight;
            var w = el.clientWidth;
            if (h + p.top >= mFS.height.height + mFS.height.top) {
                mFS.height.height = h;
                mFS.height.top = p.top;
                mFS.height.item = item;
                mFS.height.rI = rI;
            }
            if (w + p.left >= mFS.width.width + mFS.width.left) {
                mFS.width.width = w;
                mFS.width.left = p.left;
                mFS.width.item = item;
                mFS.width.rI = rI;
            }
            el.style.display = "none";
        }

        var ocp = this._currentPosition;
        this._currentPosition = this.conf.visibleItems+1;

        // find the position with highest y-value
        for (var i=-this.conf.visibleItems; i <= this.conf.visibleItems; i++) {
            currentItem.element.style.display = "none";
            this._positionItem(currentItem, i);
            checkMax(currentItem, i);
        }

        // find the biggest item
        var index = mFS.height.rI;
        for (var i=0; i < this.items.length; i++) {
            var item = this.items[i];
            item.element.style.display = "none";
            this._positionItem(item, index);
            checkMax(item, index);
        }

        this._currentPosition = ocp;

        return mFS
    },



    /*
     * ==================== 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;
        }

        if (this.conf.keys[keyCode]) {
            this.conf.keys[keyCode].bind(this)();
            return Event.stop(event);
        }
        else {
            return true;
        }
    },
    
    /*
     * ==================== 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.conf.scrollWheelSpeed);
            } else {
                target -= (1 * this.conf.scrollWheelSpeed);
            } 
            this.moveToPosition(Math.round(target));
        }

        return Event.stop(event);
    },


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

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

    /*
     * intend to make a step 
     */
    _initStep: function (holdSlider, holdPos) {
        if (this.Slider) {
            if(holdSlider) {
                this.Slider.locked = true;
            } else {
                this.Slider.locked = false;
            }
        }
        this._holdPos = holdPos == true ? true : 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.conf.flowSpeedFactor * this.conf.calcStepWidth(diff, absDiff, this.items.length, this.conf.visibleItems);

            var AI = this.items[(this._getIndexByPosition(this._currentPosition))];

            if (AI && AI != this._activeItem) {
                if (this._activeItem) this._activeItem.makeInactive();
                this._activeItem = AI;
                this._activeItem.makeActive();
                this._setCaptionLabel(this._activeItem.index);
                if (Math.abs(this._targetPosition - this._currentPosition) <= 0.5 ) this.conf.onReachTarget(this._activeItem);
            }
            
            this._positionItems();

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

        } else if (!this._holdPos) {
            if (this.Slider) this.Slider.locked = false;
            this._currentPosition = Math.round(this._currentPosition);
            if(this.Position && !this.Slider.locked && this._activeItem) {
                this._setCaptionLabel(this._activeItem.index);
            }
            this._positionItems();
            this._stepLock = false;
        } else {
            this._stepLock = false;
        }

        if (this.Slider && !this.Slider.locked) {
            this.Slider.setPosition(this._currentPosition);
        }
    },
    


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

        if (this._lastStart) {
            var item = this._lastStart;
            while (item) {
                item.element.style.display="none";
                item = item.next;
                if (item == this._lastStart) break;
                if (item && item.pre == this._lastEnd) break;
            }
        }
        else {
            this._lastStart = this._activeItem;
        }

        if (!this._activeItem) return;
        var currentItem = this._activeItem;
        var itemP = currentItem.pre;
        var itemN = currentItem.next;

        this._positionItem(currentItem, 0);
        for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) {
            if (itemP) {
                this._positionItem(itemP, -i);
                this._lastStart = itemP;
                itemP = itemP.pre;
            }
            if (itemN) {
                this._positionItem(itemN, i);
                this._lastEnd = itemN;
                itemN = itemN.next;
            }
        }

    },

    _positionItem: function (item, relativeIndex) {

        var conf = this.conf;
        var vF = conf.verticalFlow;

        var els = item.element.style;
        //els.display =" none";
        //if (els.display != "none") return;

        /* Index and position relative to activeItem */
        var p = item.position = this._currentPosition + relativeIndex;
        var relativePosition = item.relativePosition = Math.round(p) - this._currentPosition;
        var relativePositionNormed = item.relativePositionNormed = conf.visibleItems > 0 ? relativePosition/conf.visibleItems : 0;
        var side = relativePosition < 0 ? -1 : 1;
        side *= relativePosition == 0 ? 0 : 1;
        item.side = side;

        var size = conf.calcSize(item);
        size.height = Math.max(size.height, 0);
        size.width = Math.max(size.width, 0);
        if (item.content.origProportion) size = this._scaleImageSize(item, size);
        item.size = size;

        var coords = item.coordinates = conf.calcCoordinates (item);
        var relItemPos = item.relativeItemPosition = conf.calcRelativeItemPosition(item);
        var zIndex = item.zIndex = conf.calcZIndex (item);
        var fontSize = item.fontSize = conf.calcFontSize (item);
        var opacity = item.opacity = conf.calcOpacity(item);

        size.height *= this.maxHeight;
        size.width *= this.maxHeight;

        /* set position */
        var sA = vF ? size.height : size.width;
        var sB = vF ? size.width : size.height;
        var pX = this.Flow.center.x * ( 1 + coords.x )  + (relItemPos.x - 1)  * sA/2;
        var pY = this.maxHeight/2 * ( 1 + coords.y ) + (relItemPos.y - 1 )* sB/2;
        els.left = (vF ? pY : pX)+"px";
        els.top = (vF ? pX : pY)+"px";
        
        this._setItemSize(item, size);

        /* set opacity */
        if (conf.endOpacity != 1) {
            this._setItemOpacity(item);
        }

        /* set font size */
        if (!this.Browser.IE) els.fontSize = (fontSize * 100) +"%";

        /* set z-index */
        els.zIndex = 32768 + Math.round(zIndex * this.items.length); // just for FF

        conf.onDrawItem(item);

        els.visibility = "visible";
        els.display = "block";
    },

    _scaleImageSize: function (item, size, max) {
        var sFL = this.conf.scaleFactorLandscape;
        var sFP = this.conf.scaleFactorPortrait;
        var vF = this.conf.verticalFlow;
        var prop = item.content.origProportion;
        var width = size.width;
        var height = size.height;
        var c = item.content;

        if (vF) {
            if (prop <= 1) {
                if (sFL != "max" && sFL != 1) {
                    height *= sFL;
                    width = Math.min(height * prop, max ? max : 1 );
                }
                height = width / prop;
            }
            else if (prop > 1) {
                if (sFP == "max") {
                    height = max ? max : 1;
                }
                else if (sFP != 1) {
                    width *= sFP;
                    height = Math.min(width/prop, max ? max : 1) 
                }
                else {
                    height = width / prop;
                }
                width = height * prop;
            }
        }
        else {
            if (prop > 1) {
                if (sFL != "max" && sFL != 1) {
                    width *= sFL;
                    height = Math.min(width / prop, max ? max : 1);
                }
                width = height * prop;
            }
            else if (prop <= 1) {
                if (sFP == "max") {
                    width = max ? max : 1;
                } 
                else if (sFP != 1) {
                    height *= sFP;
                    width = Math.min(height*prop, max ? max : 1);
                }
                else {
                    width = height * prop;
                }
                height = width / prop;
            }
        }

        height = isNaN(height) ? 0 : height;
        width = isNaN(width) ? 0 : width;

        if (!max && this.conf.fixItemSize) {

            var propS = size.width / size.height;

            var max = Math.max(size.width, size.height);
            var s = this._scaleImageSize(item, {width: max, height: max}, max);

            if (propS < 1) {
                height = s.height/size.height;
                width = height * prop / propS;
            }
            else {
                width = s.width/size.width;
                height = width / prop * propS;
            }

            var h = height * 100;
            var w = width * 100;
            var mL= (1 - width)/2 * 100;
            var mT= ( 1 - height ) / propS * 100 * (vF ? 0.5 : 1 );
            c.style.height = h+"%";
            if (item.reflection) item.reflection.style.height = h*this.conf.reflectionHeight+"%";
            c.style.width = w+"%";
            if (item.reflection) item.reflection.style.width = w+"%";
            c.style.marginLeft = mL+"%";
            if (item.reflection) item.reflection.style.marginLeft = mL+"%";
            c.style.marginTop = mT+"%";

            item.element.style.overflow = "hidden";

            return size;
        }
        else {
            return {width: width, height: height};
        }

    },

    _setItemSize: (function () {
        if (ContentFlowGlobal.Browser.IE) {
            var _setItemSize = function (item, size) {
                if (!this.conf.fixItemSize) {
                    item.content.style.height = size.height+"px";
                }
                else if (ContentFlowGlobal.Browser.IE6) {
                    var h = parseInt(item.content.style.height)/100;
                    item.content.style.height = size.height*h+"px"; 
                    var mT = parseInt(item.content.style.marginTop)/100;
                    item.content.style.marginTop = size.height*mT+"px";
                }
                if (item.reflection) {
                    var h = parseInt(item.content.style.height);
                    item.reflection.style.height = h*this.conf.reflectionHeight+"px";
                    item.reflection.style.marginTop = h * this.conf.reflectionGap + "px";
                }
                item.element.style.width = size.width +"px";
                item.element.style.height = size.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px";
            }
        }
        else {
            var _setItemSize = function (item, size) {
                if (item.reflection) {
                    item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
                    item.reflection.style.marginTop = size.height * this.conf.reflectionGap + "px";
                }
                else if (this._reflectionWithinImage) {
                    item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
                }
                else {
                    item.element.style.height = size.height +"px";
                }
                item.element.style.width = size.width +"px";
            }
        }
        return _setItemSize;

    })(),

    _setItemOpacity: (function () {
            if (ContentFlowGlobal.Browser.IE6) {
                var _setItemOpacity = function (item) { 
                    if (item.content.origSrc && item.content.origSrc.match(/\.png$/) ) {
                        var s = item.content.src;
                        item.content.src = item.content.origSrc;
                        item.content.style.filter = item.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
                        item.content.src = s;
                    }
                    else {
                        item.content.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
                    }
                    if (item.reflection) item.reflection.style.filter = item.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; 
                }
            }
            else if (ContentFlowGlobal.Browser.IE) {
                var _setItemOpacity = function (item) { item.element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; }
            }
            else {
                var _setItemOpacity = function (item) { item.element.style.opacity = item.opacity; }
            }
            return  _setItemOpacity;
    })()


};


/* ==================== 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);
        };
    };
}


/*
 * extending Math object
 */
if (!Math.erf2) {
    // error function (http://en.wikipedia.org/wiki/Error_function), implemented as erf(x)^2
    Math.erf2 = function (x) {
        var a = - (8*(Math.PI -3)/(3*Math.PI*(Math.PI -4)));
        var x2 = x*x;
        var f = 1 - Math.pow(Math.E, -x2 * (4/Math.PI + a*x2)/(1+a*x2));
        return f;
    };
}

if (!Math._2PI05) {
    Math._2PI05 = Math.sqrt(2*Math.PI);
}

if (!Math.normDist) {
    // normal distribution
    Math.normDist = function (x, sig, mu) {
        if (!sig) var sig = 1;
        if (!mu) var mu = 0;
        if (!x) var x = - mu;
        return 1/(sig * Math._2PI05) * Math.pow(Math.E, - (x-mu)*(x-mu)/(2*sig*sig) );
    };
}

if (!Math.normedNormDist) {
    Math.normedNormDist = function (x, sig, mu) {
        return this.normDist(x, sig, mu)/this.normDist(mu, sig, mu);
    };
}

if (!Math.exp) {
    Math.exp = function(x) {
        return Math.pow(Math.E, x);
    };
}

if (!Math.ln) {
    Math.ln = Math.log;
}

if (!Math.log2) {
    Math.log2 = function (x) {
        return Math.log(x)/Math.LN2;
    };
}

if (!Math.log10) {
    Math.log10 = function (x) {
        return Math.log(x)/Math.LN10;
    };
}

if (!Math.logerithm) {
    Math.logerithm = function (x, b) {
        if (!b || b == Math.E)
            return Math.log(x);
        else if (b == 2)
            return Math.log2(x);
        else if (b == 10)
            return Math.log10(x);
        else
            return Math.log(x)/Math.log(b);
    };
}


/*
 * extending Event object
 */
if (!Event) var Event = {};

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

/*
 * extending Element object
 */
if (document.all && !window.opera) {
    window.$CF = function (el) {
        if (typeof el == "string") {
            return window.$CF(document.getElementById(el));
        }
        else {
            if (CFElement.prototype.extend && el && !el.extend) CFElement.prototype.extend(el);
        }
        return el;
    };
} else {
    window.$CF = 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;
        try {
            if (obj.offsetParent) {
                curleft = obj.offsetLeft;
                curtop = obj.offsetTop;
                while (obj = obj.offsetParent) {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                }
            }
        }
        catch (ex) {}
        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 && $CF(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();

/**
 * PrimeFaces ContentFlow Widget
 */
PrimeFaces.widget.ContentFlow = PrimeFaces.widget.DeferredWidget.extend({

    init: function(cfg) {
        this._super(cfg);
        
        this.renderDeferred();
    },
    
     _render: function() {
        this.cf = new ContentFlow(this.id, this.cfg);
     }
});




© 2015 - 2024 Weber Informatics LLC | Privacy Policy