contentflow 0.0.2

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in contentflow.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 sergio1990
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Contentflow
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'contentflow'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install contentflow
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/contentflow.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'contentflow/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "contentflow"
+  gem.version       = Contentflow::VERSION
+  gem.authors       = ["sergio1990"]
+  gem.email         = ["sergeg1990@gmail.com"]
+  gem.description   = "ContentFlow is a flexible CoverflowTM / ImageFlow like flow written in javascript, which can handle any kind of content for the Rails 3.1+ asset pipeline"
+  gem.summary       = "ContentFlow for the Rails 3.1+ asset pipeline"
+  gem.homepage      = "https://github.com/sergio1990/contentflow"
+
+  gem.add_dependency "railties", ">= 3.0"
+  gem.add_dependency "sass", ">= 3.2"
+  gem.add_development_dependency "bundler", ">= 1.0"
+  gem.add_development_dependency "rails",   ">= 3.1"
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+end

data/lib/contentflow.rb

@@ -0,0 +1,6 @@
+require "rails"
+require "contentflow/version"
+
+module Contentflow
+  require "contentflow/engine"
+end

data/lib/contentflow/engine.rb

@@ -0,0 +1,9 @@
+module Contentflow  
+  class Engine < ::Rails::Engine
+    initializer 'contentflow-setup', :group => :all do |app|
+      if config.respond_to? :sass
+        config.sass.load_paths << File.join(config.root, 'vendor')
+      end
+    end
+  end
+end

data/lib/contentflow/version.rb

@@ -0,0 +1,3 @@
+module Contentflow
+  VERSION = "0.0.2"
+end

data/vendor/assets/javascripts/contentflow.js

@@ -0,0 +1,2584 @@
+/*  ContentFlow, version 1.0.2 
+ *  (c) 2007 - 2010 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: 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<scripts.length; i++) {
+            if (scripts[i].src && regex.test(scripts[i].src))
+                return scripts[i];
+        }
+        return '';
+    },
+
+    getScriptPath: function (scriptElement, scriptName) {
+        var regex = new RegExp(scriptName+".*");
+        return scriptElement.src.replace(regex, '');
+    },
+
+    addScript: function  (path) {
+        if (this.Browser.IE || this.Browser.WebKit || this.Browser.Konqueror) {
+            document.write('<script type="text/javascript" src="'+path+'"><\/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<filename.length; i++)
+            this.addScript(basepath+filenames[i]);
+    },
+
+    addStylesheet: function (path) {
+        if (this.Browser.Gecko19) {
+            var link = document.createElement('link');
+            link.setAttribute('rel', 'stylesheet');
+            link.setAttribute('href', path);
+            link.setAttribute('type', 'text/css');
+            link.setAttribute('media', 'screen');
+            document.getElementsByTagName('head')[0].appendChild(link);
+        }
+        else {
+            document.write('<link rel="stylesheet" href="'+path+'" type="text/css" media="screen" />');
+        }
+
+    },
+
+    addStylesheets: function  (basePath, filenames) {
+        for (var i=0; i<filename.length; i++)
+            this.addStylesheet(basepath+filenames[i]);
+    },
+
+    initPath: function () {
+        /* get / set basic values */
+        this.scriptElement = this.getScriptElement(this.scriptName);
+        if (!this.scriptElement) {
+            this.scriptName = 'contentflow_src.js';
+            this.scriptElement = this.getScriptElement(this.scriptName);
+        }
+
+        this.BaseDir = this.getScriptPath(this.scriptElement, this.scriptName) ;
+        if (!this.AddOnBaseDir) this.AddOnBaseDir = this.BaseDir;
+        if (!this.CSSBaseDir) this.CSSBaseDir = this.BaseDir;
+    },
+
+    init: function () {
+        /* add default stylesheets */
+        this.addStylesheet(this.CSSBaseDir+'contentflow.css');
+        this.addStylesheet(this.CSSBaseDir+'mycontentflow.css');    // FF2: without adding a css-file FF2 hangs on a reload.
+                                                                    //      I don't have the slidest idea why
+                                                                    //      Could be timing problem
+        this.loadAddOns = new Array();
+        /* add AddOns scripts */
+        if (this.scriptElement.getAttribute('load')) {
+            var AddOns = this.loadAddOns = this.scriptElement.getAttribute('load').replace(/\ +/g,' ').split(' ');
+            for (var i=0; i<AddOns.length; i++) {
+                if (AddOns[i] == '') continue;
+                //if (AddOns[i] == 'myStyle') {
+                    //this.addStylesheet(this.BaseDir+'mycontentflow.css');
+                    //continue;
+                //}
+                this.addScript(this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js');
+            }
+        }
+
+        /* ========== 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 (this.Browser.WebKit) {
+                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);
+            }
+        }
+        else if (this.Browser.IE) {
+            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
+                }
+            };
+        }
+
+        /* 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;
+        
+        /* fix for mootools */
+        if (window.Element && Element.implement && document.all && !window.opera) {
+            for (var prop in window.CFElement.prototype) {
+                if(!window.Element.prototype[prop]) {
+                    var implement = {};
+                    implement[prop] = window.CFElement.prototype[prop];
+                    Element.implement(implement);
+                }
+            }
+        }
+
+        /* init all manualy created flows */
+        for (var i=0; i< ContentFlowGlobal.Flows.length; i++) {
+            ContentFlowGlobal.Flows[i].init(); 
+        }
+
+        /* init the rest */
+        var divs = document.getElementsByTagName('div');
+        DIVS: for (var 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();
+            }
+        }
+    }
+
+};
+
+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 <image.attributes.length; i++) {
+                        canvas.setAttributeNode(image.attributes[i].cloneNode(true));
+                    }
+                }
+
+                var context = canvas.getContext("2d");
+
+                /* calc image size */
+                var max = CFobj.maxHeight;
+                var size = CFobj._scaleImageSize(this, {width: max, height: max }, max)
+                var width = size.width;
+                var height = size.height;
+
+                // overwrite default height and width
+                if (CFobj._reflectionWithinImage) {
+                    canvas.width = width;
+                    canvas.height = height; 
+                    this.setImageFormat(canvas);
+                    canvas.height = height * (1 + CFobj.conf.reflectionHeight + CFobj.conf.reflectionGap);
+
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height * CFobj.conf.reflectionHeight;
+                }
+                    
+                context.save(); /* save default context */
+
+                /* draw image into canvas */
+                if (CFobj._reflectionWithinImage) {
+                    context.drawImage(image, 0, 0, width, height);
+                }
+
+                /* mirror image by transformation of context and image drawing */
+                if (CFobj._reflectionWithinImage) {
+                    var contextHeight = height * ( 1 + CFobj.conf.reflectionGap/2) * 2;
+                }
+                else {
+                    var contextHeight = image.height;
+                }
+                // -1 for FF 1.5
+                contextHeight -= 1;
+                
+                context.translate(0, contextHeight);
+                context.scale(1, -1);
+                /* draw reflection image into canvas */
+                context.drawImage(image, 0, 0, width, height);
+
+                /* restore default context for simpler further canvas manupulation */
+                context.restore();
+                    
+                if (CFobj._reflectionColorRGB) {
+                    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
+
+                    var alpha = [0, 0.5, 1];
+                    if (CFobj._reflectionColor == "transparent") {
+                        context.globalCompositeOperation = "destination-in";
+                        alpha = [1, 0.5, 0];
+                    }
+
+                    var red = CFobj._reflectionColorRGB.iR;
+                    var green = CFobj._reflectionColorRGB.iG;
+                    var blue = CFobj._reflectionColorRGB.iB;
+                    if (CFobj._reflectionWithinImage) {
+                        gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
+                        gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
+                        gradient.addColorStop(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 (CFobj._reflectionWithinImage) {
+                    image.parentNode.replaceChild(canvas, image);
+                    this.content = canvas;
+                    this.origContent = canvas;
+                    delete this.image;// = true;
+
+                }
+                
+            } else {
+                CFobj._reflectionWithinImage = false;
+                delete this.reflection;
+            }
+
+        }
+        if (reflection) {
+            reflection.className = "reflection";
+            this.element.appendChild(reflection);
+
+            /* be shure that caption is last child */
+            if (this.caption) this.element.appendChild(this.caption);
+        } 
+
+    }
+
+
+ };
+
+/*
+ * ============================================================
+ * ContentFlow
+ * ============================================================
+ */
+var ContentFlow = function (container, config) {
+
+    if (container) {
+        ContentFlowGlobal.Flows.push(this);
+        this.Container = container;
+        this._userConf = config?config:{};
+        this.conf = {};
+        this._loadedAddOns = new Array();
+    } else {
+        throw ('ContentFlow ERROR: No flow container node or id given');
+    }
+
+};
+
+ContentFlow.prototype = {
+    _imagesToLoad: 0,
+    _activeItem: 0,
+    _currentPosition: 0,
+    _targetPosition: 0,
+    _stepLock: false,
+    _millisecondsPerStep: 40, 
+    _reflectionWithinImage: true,
+    Browser: ContentFlowGlobal.Browser,
+    
+    _defaultConf: { 
+        /* pre conf */
+        useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN]
+
+        biggestItemPos: 0,
+        loadingTimeout: 30000, //milliseconds
+        activeElement: 'content', // item or content
+
+        maxItemHeight: 0,
+        scaleFactor: 1,
+        scaleFactorLandscape: 1.33,
+        scaleFactorPortrait: 1.0,
+        fixItemSize: false,
+        relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate
+
+        circularFlow: true,
+        verticalFlow: false,
+        visibleItems: -1,
+        endOpacity: 1,
+        startItem:  "center",
+        scrollInFrom: "pre",
+
+        flowSpeedFactor: 1.0,
+        flowDragFriction: 1.0,
+        scrollWheelSpeed: 1.0,
+        keys: {
+            13: function () { this.conf.onclickActiveItem(this._activeItem) },
+            37: function () { this.moveTo('pre') }, 
+            38: function () { this.moveTo('visibleNext') },
+            39: function () { this.moveTo('next') },
+            40: function () { this.moveTo('visiblePre') }
+        },
+
+        reflectionColor: "transparent", // none, transparent or hex RGB CSS style #RRGGBB
+        reflectionHeight: 0.5,          // float (relative to original image height)
+        reflectionGap: 0.0,
+
+        /* ==================== actions ==================== */
+
+        onInit: function () {},
+
+        onclickInactiveItem: function (item) {},
+
+        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;
+            }
+        },
+
+        onMakeInactive: function (item) {},
+
+        onMakeActive: function (item) {},
+
+        onReachTarget: function(item) {},
+
+        onMoveTo: function(item) {},
+
+        //onDrawItem: function(item, relativePosition, relativePositionNormed, side, size) {},
+        onDrawItem: function(item) {},
+        
+        onclickPreButton: function (event) {
+            this.moveToIndex('pre');
+            return Event.stop(event);
+        },
+        
+        onclickNextButton: function (event) {
+            this.moveToIndex('next');
+            return Event.stop(event);
+        },
+
+        /* ==================== calculations ==================== */
+
+        calcStepWidth: function(diff) {
+            var vI = this.conf.visibleItems;
+            var items = this.items.length;
+            items = items == 0 ? 1 : items;
+            if (Math.abs(diff) > 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<items.length; i++) {
+            var item = this.items[i] = new ContentFlowItem(this, items[i], i);
+            if (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<loadAddOns.length; i++) {
+            if (loadAddOns[i] == "none") {
+                loadAddOns = new Array();
+                break;
+            }
+            else if (loadAddOns[i] == "all") {
+                loadAddOns = new Array();
+                for (var AddOn in ContentFlowGlobal.AddOns)
+                    loadAddOns.push(AddOn);
+                break;
+            }
+        }
+
+        // init all AddOns that should be used and exist
+        for (var i=0; i<loadAddOns.length; i++) {
+            var AddOn = ContentFlowGlobal.AddOns[loadAddOns[i]];
+            if (AddOn) {
+                this._loadedAddOns.push(loadAddOns[i]);
+                AddOn._init(this);
+                this.Container.addClassName('ContentFlowAddOn_'+AddOn.name);
+                if (AddOn.methods.onloadInit)
+                    AddOn.methods.onloadInit(this);
+            }
+        }
+
+    },
+
+
+    _initGUI: function () {
+        
+        // resize
+        //if (!this.Browser.iPhone) {
+            var resize = this.resize.bind(this);
+            window.addEvent('resize', resize, false);
+        //}
+        //else {
+            //var g = this;
+            //window.addEvent('resize', function () {
+                //g._initSizes();
+                //g._initStep();
+            //} , false);
+        //}
+        
+        // pre and next buttons
+        var divs = this.Container.getElementsByTagName('div');
+        for (var i = 0; i < divs.length; i++) {
+            if ($CF(divs[i]).hasClassName('preButton')) {
+                var pre = divs[i];
+                var mt = this.conf.onclickPreButton;
+                pre.addEvent('click', mt, false);
+            }
+            else if (divs[i].hasClassName('nextButton')) {
+                var next = divs[i];
+                var mt = this.conf.onclickNextButton;
+                next.addEvent('click', mt, false);
+            }
+        }
+
+        // Container object
+        // mousewheel
+        if (this.conf.scrollWheelSpeed != 0) {
+            var wheel = this._wheel.bind(this);
+            if(window.addEventListener) this.Container.addEventListener('DOMMouseScroll', wheel, false);
+            this.Container.onmousewheel = wheel;
+        }
+
+        // key strokes
+        var key = this._keyStroke.bind(this);
+        if (this.conf.keys && !this.Browser.iPhone) {
+            if (document.addEventListener) {
+                if (!this.Browser.Opera) {
+                    var mouseoverCheck = document.createElement('div');
+                    mouseoverCheck.addClassName('mouseoverCheckElement');
+                    this.Container.appendChild(mouseoverCheck);
+
+                    if (this.Browser.WebKit) {
+                        document.body.addEvent('keydown',  function (event) {
+                            if (mouseoverCheck.offsetLeft > 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 = "&nbsp;";
+                        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();
+