View | Details | Raw Unified | Return to bug 10756
Collapse All | Expand All

(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/CHANGELOG (+270 lines)
Line 0 Link Here
1
ContenFolw ChangeLog
2
====================
3
4
version 1.0 (2010/02/09)
5
-------------------------
6
 
7
 Beware: Because of a major restructuring, this release will break with older 
8
         AddOns and possibly with user defined configurations. If you have 
9
         defined your own calculation methods (calcSize, calcCoordinates, 
10
         calcRelativeItemPosition, calcZIndex or calcFontSize) you have to 
11
         rework them.
12
         If you use AddOns please update to the new version of the AddOn.
13
14
 * moved to relative return values for the following methods:
15
   calcSize := returns values ranging from 0.0 - 1.0
16
   calcCoordinates := returns values ranging from -1.0 to 1.0
17
   calcRelativeItemPosition := returns values ranging from -1.0 to 1.0
18
19
 * changed the paramters of the following methods:
20
   calcStepWidth   : ( diff )
21
   calcSize        : ( item ) 
22
   calcCoordinates : ( item ) 
23
   calcRelativeItemPosition : ( item ) 
24
   calcZIndex      : ( item ) 
25
   calcFontSize    : ( item ) 
26
27
 * added the following properties to the item object:
28
   next, position, pre, relativePosition, relativePositionNormed, side, size 
29
30
 * better image scaling in IE7 (bicubic interpolation)
31
32
 * changed landscapeScaleFactor default value to 1.33
33
34
 * moved from 20 to 25 redraws/recalculations/frames per second 
35
36
 * refined calculation of flow size
37
38
 * speedup by internel code cleanup
39
40
 * unified AddOn configuration
41
42
 * renamed 'container' to 'Container'
43
44
 * documentation update
45
46
47
 * addeded direct usage of image tags as items
48
49
 * added support for transparent PNGs on IE6
50
51
 * added touch handling on iPhone
52
   Dragging of the whole Flow and the scrollbar works now on the iPhone
53
54
 * added onDrawItem method
55
56
 * added fluid opacity change
57
   - option: endOpacity
58
   - method: calcOpacity
59
60
 * added fixItemSize option
61
62
 * added reflectionGap option 
63
 
64
 * added scaleFactorPortrait option
65
66
 * automatic scrolling to item will now be supressed if the onclickInactiveItem
67
   method returns 'false'
68
69
 * added conf object to flow
70
71
72
 * removed server side reflections
73
   - removed reflectionType option
74
     reflectionHeight = 0 deactivetes the reflection
75
   - removed negativeMarginOnFloat option
76
   - removed reflectionServerSrc option
77
78
 * removed obsolete contentPosition option
79
80
81
 * fixed FF drag problem
82
 
83
 * fixed addItem method
84
85
 * fixed rmItem method
86
87
    
88
89
version 0.7.2 (2009/10/01)
90
-------------------------
91
 * fixed possible conflict with jquery, prototype
92
 * fixed Konqueror 4 init bug
93
 * fixed iPhone init bug 
94
 * fixed IE 6,7,8 / mootools compatibility
95
   thanks to Michael Birchler
96
 * fixed IE6 scalefactor bug
97
 * simplified internal click event handling
98
 * added 'return' key to call the onclickActiveItem method
99
100
version 0.7 (2009/04/09)
101
------------------------
102
 Beware: Because of a major restructuring, this release will break with older 
103
         AddOns and possibly with user defined configurations. If you have 
104
         defined your own methods (i.e. calcCoordinates or onclickActiveItem) 
105
         you have to move the definitions into the configuration object.
106
         If you use AddOns please update to the new version of the AddOn.
107
108
         In any other case you can use the new version without any modification.
109
          
110
 * moved user definable method definitions to configuration
111
 * speedup by reducing number of calculations
112
 * flow element will now be centered within ContentFlow element
113
 * better handling of large images by Canvas supporting Browsers (all except IE)
114
 * removed reflectionOverlay option
115
 * removed set* methods to set methods
116
 * removed getConfig method
117
 * added cursermove style to slider
118
 * added "left" and "right" to position keywords (same as 'pre' and 'next')
119
120
 * added optional 'useAddOns' attribute to ContentFlow (X)HTML element
121
 * added optional deactivation of mousewheel
122
 * added revers mousewheel scrolling
123
 * added optional deactivation of keyboard 
124
 * added optional deactivation of drag 'n throw 
125
126
 * added keys option
127
 * added verticalFlow option
128
 * added contentPosition option
129
 * added relativeItemPosition option 
130
131
 * added onReachTarget method
132
 * added onMoveTo method
133
 * added onMakeInactive method 
134
 * added onclickInactiveItem method
135
136
 * fixed reload bug in Firefox 3 (Gecko 1.9)
137
 * fixed keyboard actions on FireFox (Gecko) and Safari (WebKit)
138
 * fixed refelctions on iPhone
139
 * fixed bug in moveTo method
140
 * fixed item positioning 
141
 * fixed bug if 'scrollInFrom' was set to 'none' 
142
 * fixed disappearing position label
143
144
 * structure cleanup
145
146
147
version 0.6 (2008/09/27)
148
------------------------
149
 This release contains major changes and could break with previous versions.
150
 But most times it can be used as a drop-in replacement. 
151
152
 * added AddOn System
153
154
 * handles now 'href' and 'target' attributes of 'item' and 'content' items
155
   by default
156
157
 * will respect style-height attributes of ContentFlow and flow elements
158
   (has to be defined on the element it self)
159
160
 * moved fancyScrollbar to AddOn
161
162
 * added optional 'label' element to item (will be used as slider label)
163
   (great for time lines)
164
165
 * scrollbar will be hidden until loader is hidden
166
167
 * default loader height fixed
168
169
 * switched from array based structure to object based structure for items
170
 
171
 * switched from index based calculations to global position based calculations
172
173
 * merged mycontentflow.css into contentflow.css and and added mycontentflow.css.example
174
 
175
 * new Initialization System
176
   - init when DOM is fully loaded
177
   - auto init of flows
178
   - auto loading of stylesheets
179
   - auto load of AddOns
180
   - background init of images
181
182
 * changed calculation methods
183
   - added calcCoordinates
184
   - added calcRelativeItemPosition
185
   - removed calcPosition
186
187
 * new methods
188
   - onMakeActive
189
   - onclickPreButton
190
   - onclickNextButton
191
192
 * new options
193
   - useAddOns
194
   - circularFlow
195
   - activeElement
196
197
 * enhanced options 
198
   - added scaleFactorLandscape option value "max"
199
   - flowDragFriction deactivates drag 'n throw if set to '0'
200
   - scrollWheelSpeed deactivates scrollwheel if set to '0'
201
202
 * internal restructuring and cleanup
203
204
 * removed unneeded images
205
206
 * switched to yuicompressor for javascript compression
207
208
 * squashed many bugs
209
210
211
version 0.5.3 (2008/05/22)
212
------------------------
213
 * resize bug fixed 
214
 * renamed maxHeight configuration option to maxItemHeight
215
216
version 0.5.2 (2008/05/21)
217
------------------------
218
 * bugfixes
219
220
version 0.5.1 (2008/05/18)
221
------------------------
222
 * bugfixes
223
224
version 0.5 (2008/05/18)
225
------------------------
226
 * if reflections are used images scale nicer and scrolling is more fluid
227
   in Firefox, Safari and Opera (or any other browser which knows about 'canvas')
228
 * added fancy scrollbar (with pre and next button)
229
 * added maxHeight conf property
230
   (if set content will be scaled depending on maxHeight)
231
 * moveTo method can handle keywords like 'pre', 'next', 'start' or 'end'
232
 * code cleanup
233
234
version 0.4 (2008/02/12)
235
------------------------
236
 * dynamically add and remove items !
237
 * caption of item is now optional
238
 * added setter for: clickActiveItem, calcSize, calcPosition, calcZIndex, calcFontSize
239
 * added getter for: config, activeItem, numberOfItems
240
 * squashed some bugs
241
 * some clean up
242
243
version 0.3 (2008/01/26)
244
------------------------
245
 * revamp of reflection handling:
246
   - added client side reflection generation !!!
247
     YES! Browser generated reflections without flash!
248
   - bedder handling of reflection sizes
249
   - bedder handling of server side reflection sources
250
   - bedder handling of overlays in IE6
251
   - removed unneeded options
252
   - added more flexible options
253
   - fix positioning of items in IE6
254
 * fixed resize event handling in IE
255
 * fixed slider-position element handling in IE6
256
 * fixed some minor bugs
257
   
258
version 0.2 (2008/01/22)
259
------------------------
260
 * handles now node-object and node-id string on object creation
261
 * configuration options are now given as configuration object
262
 * auto initialization on window load
263
 * auto detection of usage of load indicator, global caption and scrollbar
264
 * removed obsolete configuration options
265
 * minor cleanups
266
267
version 0.1 (2008/01/10)
268
------------------------
269
 * initial release
270
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.css (+155 lines)
Line 0 Link Here
1
/*  ContentFlowAddOn_DEFAULT, version 1.0.0 
2
 *  (c) 2008 - 2010 Sebastian Kutsch
3
 *  <http://www.jacksasylum.eu/ContentFlow/>
4
 *
5
 *  This file is distributed under the terms of the MIT license.
6
 *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
7
 *
8
 *--------------------------------------------------------------------------*/
9
10
/*
11
 * This is an example file of an AddOn stylesheet. All values are the default
12
 * values as they are found in 'mycontentflow.css'.
13
 *
14
 * It should give you a good idea which elements of the ContentFlow you can
15
 * style and how to excess them.
16
 *
17
 * To use this stylesheet follow this guideline:
18
 *
19
 * 1. Create a new AddOn and use the addStylesheet method in the init method.
20
 *    Take a look at ContentFlowAddOn_DEFAULT.js to know how.
21
 *    So a minimal AddOn file just to apply this stylesheet would look like this:
22
 *      new ContentFlowAddOn ('ADDONNAME', {
23
 *          init: function () { this.addStylesheet(); }
24
 *      });
25
 *
26
 * 2. Rename all class definitions '.ContentFlowAddOn_DEFAULT' to
27
 *    '.ContentFlowAddOn_ADDONNAME'.
28
 *    Where ADDONNAME is the name of your AddOn.
29
 *
30
 * 3. Make the changes you like
31
 *
32
 * 4. Reload your page :-)
33
 * 
34
 */
35
36
/* ========== ContentFlow ========== */
37
/*
38
 * Within this file you can adjust the styling of ContentFlow
39
 * to your personal needs. The default styling is the same as found on the 
40
 * project page.
41
 *
42
 */
43
44
.ContentFlowAddOn_DEFAULT {
45
}
46
47
    /* ----- styling of items ----- */
48
    .ContentFlowAddOn_DEFAULT .flow .item.active {
49
        cursor: pointer;
50
    }
51
        .ContentFlowAddOn_DEFAULT .flow .item .caption {
52
            font-size: 100%;
53
            font-weight: bold;
54
            text-align: center;
55
            color: white;
56
            max-height: 30%;
57
            bottom: 10%;
58
            background: url(img/1x1_0.5_black.png);
59
            width: 100%;
60
        }
61
        * html .ContentFlowAddOn_DEFAULT .flow .item .caption {
62
            background-image: none;
63
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
64
        }
65
            .ContentFlowAddOn_DEFAULT .flow .item .caption a,
66
            .ContentFlowAddOn_DEFAULT .flow .item .caption a:link,
67
            .ContentFlowAddOn_DEFAULT .flow .item .caption a:visited,
68
            .ContentFlowAddOn_DEFAULT .flow .item .caption a:active,
69
            .ContentFlowAddOn_DEFAULT .flow .item .caption a:hover {
70
                text-decoration: none;
71
                color: white;
72
                font-style: italic;
73
                font-size: 0.8em;
74
            }
75
            .ContentFlowAddOn_DEFAULT .flow .item .caption a:hover {
76
                text-decoration: underline;
77
            }
78
        .ContentFlowAddOn_DEFAULT .flow .item.active .caption {
79
            /*display: block;*/ /* uncomment to show caption inside item */
80
        }
81
82
    /* ----- scrollbar ----- */
83
    .ContentFlowAddOn_DEFAULT .scrollbar {
84
        width: 50%;
85
        margin: 0px auto;
86
        height: 16px;
87
        background: url(img/scrollbar_white.png) left center repeat-x;
88
        position: relative;
89
    }
90
91
        .ContentFlowAddOn_DEFAULT .scrollbar .slider {
92
            width: 16px;
93
            height: 16px;
94
            background: url(img/slider_white.png) center center no-repeat;
95
        }
96
        
97
        /* only for IE <= 6 and a alphatransparent slider image */
98
        * html .ContentFlow .scrollbar .slider { background-image: none; }
99
        * html .ContentFlow .scrollbar .slider .virtualSlider {
100
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
101
        }
102
103
            .ContentFlowAddOn_DEFAULT .scrollbar .slider .position {
104
                top: 120%;
105
                font-size: 16px;
106
                font-weight: bold;
107
                color: silver
108
            }
109
110
    /* ----- global caption ----- */
111
    .ContentFlowAddOn_DEFAULT .globalCaption {
112
        text-align: center;
113
        font-weight: bold;
114
        color: white;
115
        font-size: 14px;
116
        height: 20px;
117
        margin: 2em auto;
118
    }
119
        .ContentFlowAddOn_DEFAULT .globalCaption .caption {
120
        }
121
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a,
122
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a:link,
123
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a:visited,
124
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a:active,
125
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover {
126
                text-decoration: none;
127
                color: white;
128
                font-style: italic;
129
                font-size: 0.8em;
130
            }
131
132
            .ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover {
133
                text-decoration: underline;
134
            }
135
136
    /* ----- load indicator ----- */
137
    .ContentFlowAddOn_DEFAULT .loadIndicator {
138
        width: 100%;
139
        height: 100%;
140
        top: 0px;
141
        left: 0px;
142
        background: url(img/1x1_0.5_black.png);
143
    }
144
    * html .ContentFlowAddOn_DEFAULT .loadIndicator {
145
        background-image: none;
146
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
147
    }
148
        .ContentFlowAddOn_DEFAULT .loadIndicator .indicator {
149
            background: url(img/loader.gif) center center no-repeat;
150
            width: 100%;
151
            height: 100%;
152
        }
153
154
/* ================================= */
155
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.js (+290 lines)
Line 0 Link Here
1
/*  ContentFlowAddOn_DEFAULT, version 1.0.0 
2
 *  (c) 2008 - 2010 Sebastian Kutsch
3
 *  <http://www.jacksasylum.eu/ContentFlow/>
4
 *
5
 *  This file is distributed under the terms of the MIT license.
6
 *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
7
 */
8
9
/*
10
 * This is an example file of an AddOn file and will not be used by ContentFlow.
11
 * All values are the default values of ContentFlow.
12
 *
13
 * To create a new AddOn follow this guideline:
14
 *              (replace ADDONNAME by the name of your AddOn)
15
 *
16
 * 1. rename this file to ContentFlowAddOn_ADDONNAME.js
17
 * 2. Change the string 'DEFAULT' in the 'new ContentFlowAddOn' line to 'ADDONNAME'
18
 * 3. Make the changes you like/need
19
 * 4. Remove all settings you do not need (or comment out for testing).
20
 * 5. Add 'ADDONNAME' to the load attribute of the ContentFlow script tag in your web page
21
 * 6. Reload your page :-)
22
 *
23
 */
24
new ContentFlowAddOn ('DEFAULT', {
25
26
    /* 
27
     * AddOn configuration object, defining the default configuration values.
28
     */
29
    conf: {},
30
31
    /* 
32
     * This function will be executed on creation of this object (on load of this file).
33
     * It's mostly intended to automatically add additional stylesheets and javascripts.
34
     *
35
     * Object helper methods and parameters:
36
     * scriptpath:          basepath of this AddOn (without the filename)
37
     * addScript(path):     adds a javascript-script tag to the head with the src set to 'path'
38
     *                      i.e. this.addScript(scriptpath+"MyScript.js") .
39
     *
40
     * addStylesheet(path): adds a css-stylesheet-link tag to the head with href set to
41
     *                      'path' i.e. this.addStylesheet(scriptpath+"MyStylesheet.css") .
42
     *                      If path is omittet it defaults to :
43
     *                      scriptpath+'ContentFlowAddOn_ADDONNAME.css'.
44
     *
45
     */
46
    init: function() {
47
        // this.addScript();
48
        // this.addStylesheet();
49
    },
50
    
51
    /* 
52
     * This method will be executed for each ContentFlow on the page after the
53
     * HTML document is loaded (when the whole DOM exists). You can use it to
54
     * add elements automatically to the flow.
55
     *
56
     * flow:                the DOM object of the ContentFlow
57
     * flow.Flow:           the DOM object of the 'flow' element
58
     * flow.Scrollbar:      the DOM object of the 'scrollbar' element
59
     * flow.Slider:         the DOM object of the 'slider' element
60
     * flow.globalCaption:  the DOM object of the 'globalCaption' element
61
     *
62
     * You can access also all public methods of the flow by 'flow.METHOD' (see documentation).
63
     */
64
    onloadInit: function (flow) {
65
    },
66
67
    /* 
68
     * This method will be executed _after_ the initialization of each ContentFlow.
69
     */    
70
    afterContentFlowInit: function (flow) {
71
    },
72
    /*
73
     * ContentFlow configuration.
74
     * Will overwrite the default configuration (or configuration of previously loaded AddOns).
75
     * For a detailed explanation of each value take a look at the documentation.
76
     */
77
	ContentFlowConf: {
78
        loadingTimeout: 30000,          // milliseconds
79
        activeElement: 'content',       // item or content
80
81
        maxItemHeight: 0,               // 0 == auto, >0 max item height in px
82
        scaleFactor: 1.0,               // overall scale factor of content
83
        scaleFactorLandscape: 1.33,     // scale factor of landscape images ('max' := height= maxItemHeight)
84
        scaleFactorPortrait: 1.0,       // scale factor of portraoit and square images ('max' := width = item width)
85
        fixItemSize: false,             // don't scale item size to fit image, crop image if bigger than item
86
        relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate
87
88
        circularFlow: true,             // should the flow wrap around at begging and end?
89
        verticalFlow: false,            // turn ContentFlow 90 degree counterclockwise
90
        visibleItems: -1,               // how man item are visible on each side (-1 := auto)
91
        endOpacity: 1,                  // opacity of last visible item on both sides
92
        startItem:  "center",           // which item should be shown on startup?
93
        scrollInFrom: "pre",            // from where should be scrolled in?
94
95
        flowSpeedFactor: 1.0,           // how fast should it scroll?
96
        flowDragFriction: 1.0,          // how hard should it be be drag the floe (0 := no dragging)
97
        scrollWheelSpeed: 1.0,          // how fast should the mouse wheel scroll. nagive values will revers the scroll direction (0:= deactivate mouse wheel)
98
        keys: {                         // key => function definition, if set to {} keys ar deactivated
99
            13: function () { this.conf.onclickActiveItem(this._activeItem) },
100
            37: function () { this.moveTo('pre') }, 
101
            38: function () { this.moveTo('visibleNext') },
102
            39: function () { this.moveTo('next') },
103
            40: function () { this.moveTo('visiblePre') }
104
        },
105
106
        reflectionColor: "transparent", // none, transparent, overlay or hex RGB CSS style #RRGGBB
107
        reflectionHeight: 0.5,          // float (relative to original image height)
108
        reflectionGap: 0.0,             // gap between the image and the reflection
109
110
111
        /*
112
         * ==================== helper and calculation methods ====================
113
         *
114
         * This section contains all user definable methods. With thees you can
115
         * change the behavior and the visual effects of the flow.
116
         * For an explanation of each method take a look at the documentation.
117
         *
118
         * BEWARE:  All methods are bond to the ContentFlow!!!
119
         *          This means that the keyword 'this' refers to the ContentFlow 
120
         *          which called the method.
121
         */
122
        
123
        /* ==================== actions ==================== */
124
125
        /*
126
         * called after the inactive item is clicked.
127
         */
128
        onclickInactiveItem : function (item) {},
129
130
        /*
131
         * called after the active item is clicked.
132
         */
133
        onclickActiveItem: function (item) {
134
            var url, target;
135
136
            if (url = item.content.getAttribute('href')) {
137
                target = item.content.getAttribute('target');
138
            }
139
            else if (url = item.element.getAttribute('href')) {
140
                target = item.element.getAttribute('target');
141
            }
142
            else if (url = item.content.getAttribute('src')) {
143
                target = item.content.getAttribute('target');
144
            }
145
146
            if (url) {
147
                if (target)
148
                    window.open(url, target).focus();
149
                else
150
                    window.location.href = url;
151
            }
152
        },
153
        
154
        /*
155
         * called when an item becomes inactive.
156
         */
157
        onMakeInactive: function (item) {},
158
159
        /*
160
         * called when an item becomes active.
161
         */
162
        onMakeActive: function (item) {},
163
        
164
        /*
165
         * called when the target item/position is reached
166
         */
167
        onReachTarget: function(item) {},
168
169
        /*
170
         * called when a new target is set
171
         */
172
        onMoveTo: function(item) {},
173
174
        /*
175
         * called each item an item is drawn (after scaling and positioning)
176
         */
177
        onDrawItem: function(item) {},
178
179
        /*
180
         * called if the pre-button is clicked.
181
         */
182
        onclickPreButton: function (event) {
183
            this.moveToIndex('pre');
184
            Event.stop(event);
185
        },
186
        
187
        /*
188
         * called if the next-button is clicked.
189
         */
190
        onclickNextButton: function (event) {
191
            this.moveToIndex('next');
192
            Event.stop(event);
193
        },
194
        
195
        /* ==================== calculations ==================== */
196
197
        /*
198
         * calculates the width of the step.
199
         */
200
        calcStepWidth: function(diff) {
201
            var vI = this.conf.visibleItems;
202
            var items = this.items.length;
203
            items = items == 0 ? 1 : items;
204
            if (Math.abs(diff) > vI) {
205
                if (diff > 0) {
206
                    var stepwidth = diff - vI;
207
                } else {
208
                    var stepwidth = diff + vI;
209
                }
210
            } else if (vI >= this.items.length) {
211
                var stepwidth = diff / items;
212
            } else {
213
                var stepwidth = diff * ( vI / items);
214
            }
215
            return stepwidth;
216
        },
217
        
218
219
        /*
220
         * calculates the size of the item at its relative position x
221
         *
222
         * relativePosition: Math.round(Position(activeItem)) - Position(item)
223
         * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 
224
         * returns a size object
225
         */
226
        calcSize: function (item) {
227
            var rP = item.relativePosition;
228
229
            var h = 1/(Math.abs(rP)+1);
230
            var w = h;
231
            return {width: w, height: h};
232
        },
233
234
        /*
235
         * calculates the position of an item within the flow depending on it's relative position
236
         *
237
         * relativePosition: Math.round(Position(activeItem)) - Position(item)
238
         * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 
239
         */
240
        calcCoordinates: function (item) {
241
            var rP = item.relativePosition;
242
            //var rPN = item.relativePositionNormed;
243
            var vI = this.conf.visibleItems; 
244
245
            var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
246
            var x =  item.side * vI/(vI+1)* f; 
247
            var y = 1;
248
249
            return {x: x, y: y};
250
        },
251
        
252
        /*
253
         * calculates the position of an item relative to it's calculated coordinates
254
         * x,y = 0 ==> center of item has the position calculated by
255
         * calculateCoordinates
256
         *
257
         * relativePosition: Math.round(Position(activeItem)) - Position(item)
258
         * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 
259
         * size: size object calculated by calcSize
260
         */
261
        calcRelativeItemPosition: function (item) {
262
            var x = 0;
263
            var y = -1;
264
            return {x: x, y: y};
265
        },
266
267
        /*
268
         * calculates and returns the relative z-index of an item
269
         */
270
        calcZIndex: function (item) {
271
            return -Math.abs(item.relativePositionNormed);
272
        },
273
274
        /*
275
         * calculates and returns the relative font-size of an item
276
         */
277
        calcFontSize: function (item) {
278
            return item.size;
279
        },
280
281
        /*
282
         * calculates and returns the opacity of an item
283
         */
284
        calcOpacity: function (item) {
285
            return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity);
286
        }
287
	
288
    }
289
290
});
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/LICENSE (+19 lines)
Line 0 Link Here
1
Copyright (c) 2007 - 2010 Sebastian Kutsch
2
3
Permission is hereby granted, free of charge, to any person obtaining a copy
4
of this software and associated documentation files (the "Software"), to deal
5
in the Software without restriction, including without limitation the rights
6
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
copies of the Software, and to permit persons to whom the Software is
8
furnished to do so, subject to the following conditions:
9
10
The above copyright notice and this permission notice shall be included in
11
all copies or substantial portions of the Software.
12
13
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19
THE SOFTWARE.
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/changelog.html (+291 lines)
Line 0 Link Here
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4
<head>
5
    <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
6
</head>
7
<body>
8
9
    <h1 id="title"><img src="title.png"/></h1>
10
    <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3>
11
12
    <ul id="menu">
13
        <li><a href="index.html">start</a></li>
14
        <li><a href="docu.html">documentation</a></li>
15
        <li><a href="changelog.html">changelog</a></li>
16
        <li><a href="license.html">license</a></li>
17
        <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li>
18
    </ul>
19
    
20
    <pre class="simpleBlack">
21
ContenFolw ChangeLog
22
====================
23
24
version 1.0 (2010/02/09)
25
-------------------------
26
 
27
 Beware: Because of a major restructuring, this release will break with older 
28
         AddOns and possibly with user defined configurations. If you have 
29
         defined your own calculation methods (calcSize, calcCoordinates, 
30
         calcRelativeItemPosition, calcZIndex or calcFontSize) you have to 
31
         rework them.
32
         If you use AddOns please update to the new version of the AddOn.
33
34
 * moved to relative return values for the following methods:
35
   calcSize := returns values ranging from 0.0 - 1.0
36
   calcCoordinates := returns values ranging from -1.0 to 1.0
37
   calcRelativeItemPosition := returns values ranging from -1.0 to 1.0
38
39
 * changed the paramters of the following methods:
40
   calcStepWidth   : ( diff )
41
   calcSize        : ( item ) 
42
   calcCoordinates : ( item ) 
43
   calcRelativeItemPosition : ( item ) 
44
   calcZIndex      : ( item ) 
45
   calcFontSize    : ( item ) 
46
47
 * added the following properties to the item object:
48
   next, position, pre, relativePosition, relativePositionNormed, side, size 
49
50
 * better image scaling in IE7 (bicubic interpolation)
51
52
 * changed landscapeScaleFactor default value to 1.33
53
54
 * moved from 20 to 25 redraws/recalculations/frames per second 
55
56
 * refined calculation of flow size
57
58
 * speedup by internel code cleanup
59
60
 * unified AddOn configuration
61
62
 * renamed 'container' to 'Container'
63
64
 * documentation update
65
66
67
 * addeded direct usage of image tags as items
68
69
 * added support for transparent PNGs on IE6
70
71
 * added touch handling on iPhone
72
   Dragging of the whole Flow and the scrollbar works now on the iPhone
73
74
 * added onDrawItem method
75
76
 * added fluid opacity change
77
   - option: endOpacity
78
   - method: calcOpacity
79
80
 * added fixItemSize option
81
82
 * added reflectionGap option 
83
 
84
 * added scaleFactorPortrait option
85
86
 * automatic scrolling to item will now be supressed if the onclickInactiveItem
87
   method returns 'false'
88
89
 * added conf object to flow
90
91
92
 * removed server side reflections
93
   - removed reflectionType option
94
     reflectionHeight = 0 deactivetes the reflection
95
   - removed negativeMarginOnFloat option
96
   - removed reflectionServerSrc option
97
98
 * removed obsolete contentPosition option
99
100
101
 * fixed FF drag problem
102
 
103
 * fixed addItem method
104
105
 * fixed rmItem method
106
107
    
108
109
version 0.7.2 (2009/10/01)
110
-------------------------
111
 * fixed possible conflict with jquery, prototype
112
 * fixed Konqueror 4 init bug
113
 * fixed iPhone init bug 
114
 * fixed IE 6,7,8 / mootools compatibility
115
   thanks to Michael Birchler
116
 * fixed IE6 scalefactor bug
117
 * simplified internal click event handling
118
 * added 'return' key to call the onclickActiveItem method
119
120
version 0.7 (2009/04/09)
121
------------------------
122
 Beware: Because of a major restructuring, this release will break with older 
123
         AddOns and possibly with user defined configurations. If you have 
124
         defined your own methods (i.e. calcCoordinates or onclickActiveItem) 
125
         you have to move the definitions into the configuration object.
126
         If you use AddOns please update to the new version of the AddOn.
127
128
         In any other case you can use the new version without any modification.
129
          
130
 * moved user definable method definitions to configuration
131
 * speedup by reducing number of calculations
132
 * flow element will now be centered within ContentFlow element
133
 * better handling of large images by Canvas supporting Browsers (all except IE)
134
 * removed reflectionOverlay option
135
 * removed set* methods to set methods
136
 * removed getConfig method
137
 * added cursermove style to slider
138
 * added "left" and "right" to position keywords (same as 'pre' and 'next')
139
140
 * added optional 'useAddOns' attribute to ContentFlow (X)HTML element
141
 * added optional deactivation of mousewheel
142
 * added revers mousewheel scrolling
143
 * added optional deactivation of keyboard 
144
 * added optional deactivation of drag 'n throw 
145
146
 * added keys option
147
 * added verticalFlow option
148
 * added contentPosition option
149
 * added relativeItemPosition option 
150
151
 * added onReachTarget method
152
 * added onMoveTo method
153
 * added onMakeInactive method 
154
 * added onclickInactiveItem method
155
156
 * fixed reload bug in Firefox 3 (Gecko 1.9)
157
 * fixed keyboard actions on FireFox (Gecko) and Safari (WebKit)
158
 * fixed refelctions on iPhone
159
 * fixed bug in moveTo method
160
 * fixed item positioning 
161
 * fixed bug if 'scrollInFrom' was set to 'none' 
162
 * fixed disappearing position label
163
164
 * structure cleanup
165
166
167
version 0.6 (2008/09/27)
168
------------------------
169
 This release contains major changes and could break with previous versions.
170
 But most times it can be used as a drop-in replacement. 
171
172
 * added AddOn System
173
174
 * handles now 'href' and 'target' attributes of 'item' and 'content' items
175
   by default
176
177
 * will respect style-height attributes of ContentFlow and flow elements
178
   (has to be defined on the element it self)
179
180
 * moved fancyScrollbar to AddOn
181
182
 * added optional 'label' element to item (will be used as slider label)
183
   (great for time lines)
184
185
 * scrollbar will be hidden until loader is hidden
186
187
 * default loader height fixed
188
189
 * switched from array based structure to object based structure for items
190
 
191
 * switched from index based calculations to global position based calculations
192
193
 * merged mycontentflow.css into contentflow.css and and added mycontentflow.css.example
194
 
195
 * new Initialization System
196
   - init when DOM is fully loaded
197
   - auto init of flows
198
   - auto loading of stylesheets
199
   - auto load of AddOns
200
   - background init of images
201
202
 * changed calculation methods
203
   - added calcCoordinates
204
   - added calcRelativeItemPosition
205
   - removed calcPosition
206
207
 * new methods
208
   - onMakeActive
209
   - onclickPreButton
210
   - onclickNextButton
211
212
 * new options
213
   - useAddOns
214
   - circularFlow
215
   - activeElement
216
217
 * enhanced options 
218
   - added scaleFactorLandscape option value "max"
219
   - flowDragFriction deactivates drag 'n throw if set to '0'
220
   - scrollWheelSpeed deactivates scrollwheel if set to '0'
221
222
 * internal restructuring and cleanup
223
224
 * removed unneeded images
225
226
 * switched to yuicompressor for javascript compression
227
228
 * squashed many bugs
229
230
231
version 0.5.3 (2008/05/22)
232
------------------------
233
 * resize bug fixed 
234
 * renamed maxHeight configuration option to maxItemHeight
235
236
version 0.5.2 (2008/05/21)
237
------------------------
238
 * bugfixes
239
240
version 0.5.1 (2008/05/18)
241
------------------------
242
 * bugfixes
243
244
version 0.5 (2008/05/18)
245
------------------------
246
 * if reflections are used images scale nicer and scrolling is more fluid
247
   in Firefox, Safari and Opera (or any other browser which knows about 'canvas')
248
 * added fancy scrollbar (with pre and next button)
249
 * added maxHeight conf property
250
   (if set content will be scaled depending on maxHeight)
251
 * moveTo method can handle keywords like 'pre', 'next', 'start' or 'end'
252
 * code cleanup
253
254
version 0.4 (2008/02/12)
255
------------------------
256
 * dynamically add and remove items !
257
 * caption of item is now optional
258
 * added setter for: clickActiveItem, calcSize, calcPosition, calcZIndex, calcFontSize
259
 * added getter for: config, activeItem, numberOfItems
260
 * squashed some bugs
261
 * some clean up
262
263
version 0.3 (2008/01/26)
264
------------------------
265
 * revamp of reflection handling:
266
   - added client side reflection generation !!!
267
     YES! Browser generated reflections without flash!
268
   - bedder handling of reflection sizes
269
   - bedder handling of server side reflection sources
270
   - bedder handling of overlays in IE6
271
   - removed unneeded options
272
   - added more flexible options
273
   - fix positioning of items in IE6
274
 * fixed resize event handling in IE
275
 * fixed slider-position element handling in IE6
276
 * fixed some minor bugs
277
   
278
version 0.2 (2008/01/22)
279
------------------------
280
 * handles now node-object and node-id string on object creation
281
 * configuration options are now given as configuration object
282
 * auto initialization on window load
283
 * auto detection of usage of load indicator, global caption and scrollbar
284
 * removed obsolete configuration options
285
 * minor cleanups
286
287
version 0.1 (2008/01/10)
288
------------------------
289
 * initial release
290
291
</pre></body></html>
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.css (+1 lines)
Line 0 Link Here
1
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-size:100%;font-weight:700;text-align:center;color:#FFF;max-height:30%;bottom:10%;background:url(img/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:16px;background:url(img/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:16px;height:16px;background:url(img/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:silver;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#FFF;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#000;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(img/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#FFF;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.js (+2 lines)
Line 0 Link Here
1
/* ContentFlow, version 1.0.0  | (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) */
2
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(A){if(this.AddOns[A]){return this.AddOns[A].conf}else{return{}}},setAddOnConf:function(B,A){this.AddOns[B].setConfig(A)},getScriptElement:function(D){var C=new RegExp(D);var A=document.getElementsByTagName("script");for(var B=0;B<A.length;B++){if(A[B].src&&C.test(A[B].src)){return A[B]}}return""},getScriptPath:function(C,B){var A=new RegExp(B+".*");return C.src.replace(A,"")},addScript:function(B){if(this.Browser.IE||this.Browser.WebKit||this.Browser.Konqueror){document.write('<script type="text/javascript" src="'+B+'"><\/script>')}else{var A=document.createElement("script");A.src=B;A.setAttribute("type","text/javascript");document.getElementsByTagName("head")[0].appendChild(A)}},addScripts:function(C,B){for(var A=0;A<filename.length;A++){this.addScript(basepath+B[A])}},addStylesheet:function(B){if(this.Browser.Gecko19){var A=document.createElement("link");A.setAttribute("rel","stylesheet");A.setAttribute("titel","Standard");A.setAttribute("href",B);A.setAttribute("type","text/css");A.setAttribute("media","screen");document.getElementsByTagName("head")[0].appendChild(A)}else{document.write('<link rel="stylesheet" title="Standard" href="'+B+'" type="text/css" media="screen" />')}},addStylesheets:function(C,B){for(var A=0;A<filename.length;A++){this.addStylesheet(basepath+B[A])}},initPath:function(){this.scriptElement=this.getScriptElement(this.scriptName);if(!this.scriptElement){this.scriptName="contentflow_src.js";this.scriptElement=this.getScriptElement(this.scriptName)}this.BaseDir=this.getScriptPath(this.scriptElement,this.scriptName);if(!this.AddOnBaseDir){this.AddOnBaseDir=this.BaseDir}if(!this.CSSBaseDir){this.CSSBaseDir=this.BaseDir}},init:function(){this.addStylesheet(this.CSSBaseDir+"contentflow.css");this.addStylesheet(this.CSSBaseDir+"mycontentflow.css");this.loadAddOns=new Array();if(this.scriptElement.getAttribute("load")){var A=this.loadAddOns=this.scriptElement.getAttribute("load").replace(/\ +/g," ").split(" ");for(var C=0;C<A.length;C++){if(A[C]==""){continue}this.addScript(this.AddOnBaseDir+"ContentFlowAddOn_"+A[C]+".js")}}var E=this;if(document.addEventListener){if(this.Browser.WebKit){var D=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(D);E.onloadInit()}},10)}else{document.addEventListener("DOMContentLoaded",E.onloadInit,false)}}else{if(this.Browser.IE){document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>");var B=document.getElementById("__ie_cf_onload");B.onreadystatechange=function(){if(this.readyState=="complete"){E.onloadInit()}}}}window.addEvent("load",E.onloadInit,false)},onloadInit:function(){if(arguments.callee.done){return }for(var C=0;C<ContentFlowGlobal.loadAddOns.length;C++){var A=ContentFlowGlobal.loadAddOns[C];if(!ContentFlowGlobal.AddOns[A]){var G=ContentFlowGlobal;window.setTimeout(G.onloadInit,10);return }}arguments.callee.done=true;if(window.Element&&Element.implement&&document.all&&!window.opera){for(var H in window.CFElement.prototype){if(!window.Element.prototype[H]){var F={};F[H]=window.CFElement.prototype[H];Element.implement(F)}}}for(var C=0;C<ContentFlowGlobal.Flows.length;C++){ContentFlowGlobal.Flows[C].init()}var D=document.getElementsByTagName("div");DIVS:for(var C=0;C<D.length;C++){if(D[C].className.match(/\bContentFlow\b/)){for(var B=0;B<ContentFlowGlobal.Flows.length;B++){if(D[C]==ContentFlowGlobal.Flows[B].Container){continue DIVS}}var E=new ContentFlow(D[C],{},false);E.init()}}}};ContentFlowGlobal.initPath();var ContentFlowAddOn=function(B,A,C){if(typeof C=="undefined"||C!=false){ContentFlowGlobal.AddOns[B]=this}this.name=B;if(!A){A={}}this.methods=A;this.conf={};if(this.methods.conf){this.setConfig(this.methods.conf);delete this.methods.conf}this.scriptpath=ContentFlowGlobal.AddOnBaseDir;if(A.init){var D=A.init.bind(this);D(this)}};ContentFlowAddOn.prototype={Browser:ContentFlowGlobal.Browser,addScript:ContentFlowGlobal.addScript,addScripts:ContentFlowGlobal.addScripts,addStylesheet:function(A){if(!A){A=this.scriptpath+"ContentFlowAddOn_"+this.name+".css"}ContentFlowGlobal.addStylesheet(A)},addStylesheets:ContentFlowGlobal.addStylesheets,setConfig:function(A){for(var B in A){this.conf[B]=A[B]}},_init:function(A){if(this.methods.ContentFlowConf){A.setConfig(this.methods.ContentFlowConf)}}};var ContentFlowGUIElement=function(A,B){B.setDimensions=function(){this.dimensions=this.getDimensions();this.center={x:this.dimensions.width/2,y:this.dimensions.height/2};this.position=this.findPos()};B.addObserver=function(D,E){var C=this.eventMethod=E.bind(A);this.observedEvent=D;this.addEvent(D,C,false)};B.makeDraggable=function(F,E,G){this.stopDrag=function(I){if(!I){var I=window.event}if(this.Browser.iPhone){window.removeEvent("touchemove",F,false);if(!this.ontochmove){var H=I.target;if(H.firstChild){H=H.firstChild}var J=document.createEvent("MouseEvents");J.initEvent("click",true,true);H.dispatchEvent(J)}}else{window.removeEvent("mousemove",F,false)}G(I)}.bind(this);this.initDrag=function(H){if(!H){var H=window.event}var I=H;if(H.touches){I=H.touches[0]}this.mouseX=I.clientX;this.mouseY=I.clientY;E(H)}.bind(this);this.startDrag=function(J){if(!J){var J=window.event}var H=this.stopDrag;if(this.Browser.iPhone){var I=this;I.ontouchmove=false;window.addEvent("touchmove",function(K){I.ontouchmove=true;F(K)},false);J.preventDefault();window.addEvent("touchend",H,false)}else{window.addEvent("mousemove",F,false);window.addEvent("mouseup",H,false)}if(J.preventDefault){J.preventDefault()}}.bind(this);var D=this.startDrag;var C=function(H){var I=H.touches[0];document.getElementById("info").innerHTML=I.clientX;H.preventDefault()};if(this.Browser.iPhone){this.addEventListener("touchstart",D,false)}else{this.addEvent("mousedown",D,false)}};B.Browser=ContentFlowGlobal.Browser;$CF(B).setDimensions();return B};var ContentFlowItem=function(B,E,C){this.CFobj=B;this._activeElement=B.conf.activeElement;this.pre=null;this.next=null;this.clickItem=function(K){if(!K){var K=window.event}var I=K.target?K.target:K.srcElement;var H=I.itemIndex?I.itemIndex:I.parentNode.itemIndex;var J=this.items[H];if(this._activeItem==J){this.conf.onclickActiveItem(J)}else{if(this.conf.onclickInactiveItem(J)!=false){this.moveToIndex(H)}}}.bind(B),this.setIndex=function(H){this.index=H;this.element.itemIndex=H};this.getIndex=function(){return this.index};if($CF(E).nodeName=="IMG"){var F=document.createElement("div");F.className="item";var A=E.parentNode.replaceChild(F,E);A.className="content";F.appendChild(A);if(E.title){var D=document.createElement("div");D.className="caption";D.innerHTML=E.title;F.appendChild(D)}E=F}this.element=$CF(E);this.item=E;if(typeof C!="undefined"){this.setIndex(C)}this.content=this.element.getChildrenByClassName("content")[0];this.caption=this.element.getChildrenByClassName("caption")[0];this.label=this.element.getChildrenByClassName("label")[0];if(this.content.nodeName=="IMG"){B._imagesToLoad++;var G=function(){B._imagesToLoad--;this.image=this.content;this.setImageFormat(this.image);if(B.conf.reflectionHeight>0){this.addReflection()}this.initClick()}.bind(this);if(this.content.complete&&this.content.width>0){G()}else{this.content.onload=G}}else{this.initClick()}};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 A=this.clickItem;this[this._activeElement].addEvent("click",A,false)},setImageFormat:function(A){if(this.Browser.IE6||this.Browser.IE7){A.style.width="auto"}A.origProportion=A.width/A.height;A.setAttribute("origProportion",A.width/A.height);if(this.Browser.IE6||this.Browser.IE7){A.style.width=""}if(A.origProportion<=1){A.addClassName("portray")}else{A.addClassName("landscape")}},addReflection:function(){var F=this.CFobj;var S;var K=this.content;if(this.Browser.IE){var Q="progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";if(F._reflectionColorRGB){if(F.conf.reflectionColor=="transparent"){var N=S=this.reflection=document.createElement("img");S.src=K.src}else{S=this.reflection=document.createElement("div");var N=document.createElement("img");N.src=K.src;S.width=N.width;S.height=N.height;N.style.width="100%";N.style.height="100%";var M=F._reflectionColorRGB;S.style.backgroundColor="#"+M.hR+M.hG+M.hB;S.appendChild(N)}Q+=" progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY="+F.conf.reflectionHeight*100+" finishY=0)"}else{var N=S=this.reflection=document.createElement("img");S.src=K.src}Q+=" progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22="+1/F.conf.reflectionHeight+")";if(ContentFlowGlobal.Browser.IE6){if(K.src.match(/\.png$/)){K.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";K.filterString="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";Q+=" progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";K.origSrc=K.src;K.src="img/blank.gif";N.src="img/blank.gif"}}S.filterString=Q;N.style.filter=Q}else{if(F._reflectionWithinImage){var D=this.canvas=$CF(document.createElement("canvas"))}else{var D=S=this.reflection=document.createElement("canvas")}if(D.getContext){if(F._reflectionWithinImage){for(var R=0;R<K.attributes.length;R++){D.setAttributeNode(K.attributes[R].cloneNode(true))}}var C=D.getContext("2d");var P=F.maxHeight;var I=F._scaleImageSize(this,{width:P,height:P},P);var L=I.width;var J=I.height;if(F._reflectionWithinImage){D.width=L;D.height=J;this.setImageFormat(D);D.height=J*(1+F.conf.reflectionHeight+F.conf.reflectionGap)}else{D.width=L;D.height=J*F.conf.reflectionHeight}C.save();if(F._reflectionWithinImage){C.drawImage(K,0,0,L,J)}if(F._reflectionWithinImage){var O=J*(1+F.conf.reflectionGap/2)*2}else{var O=K.height}O-=1;C.translate(0,O);C.scale(1,-1);C.drawImage(K,0,0,L,J);C.restore();if(F._reflectionColorRGB){var B=C.createLinearGradient(0,0,0,D.height);var E=[0,0.5,1];if(F._reflectionColor=="transparent"){C.globalCompositeOperation="destination-in";E=[1,0.5,0]}var G=F._reflectionColorRGB.iR;var H=F._reflectionColorRGB.iG;var A=F._reflectionColorRGB.iB;if(F._reflectionWithinImage){B.addColorStop(0,"rgba("+G+","+H+","+A+","+E[0]+")");B.addColorStop(J/D.height,"rgba("+G+","+H+","+A+","+E[0]+")");B.addColorStop(J/D.height,"rgba("+G+","+H+","+A+","+E[1]+")")}else{B.addColorStop(0,"rgba("+G+","+H+","+A+","+E[1]+")")}B.addColorStop(1,"rgba("+G+","+H+","+A+","+E[2]+")");C.fillStyle=B;C.fillRect(0,0,D.width,D.height)}if(F._reflectionWithinImage){K.parentNode.replaceChild(D,K);this.content=D;this.origContent=D;delete this.image}}else{F._reflectionWithinImage=false;delete this.reflection}}if(S){S.className="reflection";this.element.appendChild(S);if(this.caption){this.element.appendChild(this.caption)}}}};var ContentFlow=function(A,B){if(A){ContentFlowGlobal.Flows.push(this);this.Container=A;this._userConf=B?B:{};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:{useAddOns:"all",biggestItemPos:0,loadingTimeout:30000,activeElement:"content",maxItemHeight:0,scaleFactor:1,scaleFactorLandscape:1.33,scaleFactorPortrait:1,fixItemSize:false,relativeItemPosition:"top center",circularFlow:true,verticalFlow:false,visibleItems:-1,endOpacity:1,startItem:"center",scrollInFrom:"pre",flowSpeedFactor:1,flowDragFriction:1,scrollWheelSpeed:1,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",reflectionHeight:0.5,reflectionGap:0,onInit:function(){},onclickInactiveItem:function(A){},onclickActiveItem:function(B){var A,C;if(A=B.content.getAttribute("href")){C=B.content.getAttribute("target")}else{if(A=B.element.getAttribute("href")){C=B.element.getAttribute("target")}else{if(A=B.content.getAttribute("src")){C=B.content.getAttribute("target")}}}if(A){if(C){window.open(A,C).focus()}else{window.location.href=A}}},onMakeInactive:function(A){},onMakeActive:function(A){},onReachTarget:function(A){},onMoveTo:function(A){},onDrawItem:function(A){},onclickPreButton:function(A){this.moveToIndex("pre");return Event.stop(A)},onclickNextButton:function(A){this.moveToIndex("next");return Event.stop(A)},calcStepWidth:function(D){var C=this.conf.visibleItems;var A=this.items.length;A=A==0?1:A;if(Math.abs(D)>C){if(D>0){var B=D-C}else{var B=D+C}}else{if(C>=this.items.length){var B=D/A}else{var B=D*(C/A)}}return B},calcSize:function(D){var B=D.relativePosition;var C=1/(Math.abs(B)+1);var A=C;return{width:A,height:C}},calcCoordinates:function(C){var B=C.relativePosition;var E=this.conf.visibleItems;var D=1-1/Math.exp(Math.abs(B)*0.75);var A=C.side*E/(E+1)*D;var F=1;return{x:A,y:F}},calcZIndex:function(A){return -Math.abs(A.relativePositionNormed)},calcFontSize:function(A){return A.size.height},calcOpacity:function(A){return Math.max(1-((1-this.conf.endOpacity)*Math.sqrt(Math.abs(A.relativePositionNormed))),this.conf.endOpacity)}},_checkIndex:function(A){A=Math.max(A,0);A=Math.min(A,this.itemsLastIndex);return A},_setLastIndex:function(){this.itemsLastIndex=this.items.length-1},_getItemByIndex:function(A){return this.items[this._checkIndex(A)]},_getItemByPosition:function(A){return this._getItemByIndex(this._getIndexByPosition(A))},_getPositionByIndex:function(B){if(!this.conf.circularFlow){return this._checkIndex(B)}var A=this._getIndexByPosition(this._currentPosition);var C=B-A;if(Math.abs(C)>C+this.items.length){C+=this.items.length}else{if(Math.abs(C)>(Math.abs(C-this.items.length))){C-=this.items.length}}return this._currentPosition+C},_getIndexByPosition:function(A){if(A<0){var C=0}else{var C=1}var B=(Math.round(A)+C)%this.items.length;if(B>0){B-=C}else{if(B<0){B+=this.items.length-C}else{if(A<0){B=0}else{B=this.items.length-1}}}return B},_getIndexByKeyWord:function(B,D,A){if(D){var C=D}else{if(this._activeItem){var C=this._activeItem.index}else{var C=0}}if(isNaN(B)){switch(B){case"first":case"start":C=0;break;case"last":case"end":C=this.itemsLastIndex;break;case"middle":case"center":C=Math.round(this.itemsLastIndex/2);break;case"right":case"next":C+=1;break;case"left":case"pre":case"previous":C-=1;break;case"visible":case"visiblePre":case"visibleLeft":C-=this.conf.visibleItems;break;case"visibleNext":case"visibleRight":C+=this.conf.visibleItems;break;default:C=C}}else{C=B}if(A!=false){C=this._checkIndex(C)}return C},_setCaptionLabel:function(A){if(this.Position&&!this.Slider.locked){this.Position.setLabel(A)}this._setGlobalCaption()},getAddOnConf:function(A){return ContentFlowGlobal.getAddOnConf(A)},setAddOnConf:function(B,A){ContentFlowGlobal.setAddOnConf(B,A)},init:function(){if(this.isInit){return }this._init()},setConfig:function(A){if(!A){return }var E=this._defaultConf;for(var F in A){if(E[F]=="undefined"){continue}switch(F){case"scrollInFrom":case"startItem":if(typeof (A[F])=="number"||typeof (A[F])=="string"){this.conf[F]=A[F]}break;default:if(typeof (E[F]==A[F])){if(typeof A[F]=="function"){this.conf[F]=A[F].bind(this)}else{this.conf[F]=A[F]}}}}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 C={x:{left:function(J){return -1},center:function(J){return 0},right:function(J){return 1}},y:{top:function(J){return -1},center:function(J){return 0},bottom:function(J){return 1}}};var I=this.conf.relativeItemPosition;I=I.replace(/above/,"top").replace(/below/,"bottom");var H,G=null;H=I.match(/left|right/);G=I.match(/top|bottom/);c=I.match(/center/);if(!H){if(c){H="center"}else{H="center"}}if(!G){if(c){G="center"}else{G="top"}}var D=C.x[H];var B=C.y[G];this.conf.calcRelativeItemPosition=function(K){var J=D(K.size);var L=B(K.size);return{x:J,y:L}};this.conf.relativeItemPosition=null}if(this._reflectionType&&this._reflectionType!="clientside"){this.conf.reflectionHeight=0}},getItem:function(A){return this.items[this._checkIndex(Math.round(A))]},getActiveItem:function(){return this._activeItem},getNumberOfItems:function(){return this.items.length},resize:function(){this._initSizes();this._initStep()},moveToPosition:function(B,A){if(!this.conf.circularFlow){B=this._checkIndex(B)}this._targetPosition=B;this.conf.onMoveTo(this._getItemByPosition(B));this._initStep(false,A)},moveToIndex:function(A){this._targetPosition=Math.round(this._getPositionByIndex(this._getIndexByKeyWord(A,this._activeItem.index,!this.conf.circularFlow)));this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));this._initStep()},moveToItem:function(B){var A;if(B.itemIndex){A=B.itemIndex}else{A=B.index}this.moveToIndex(A)},moveTo:function(A){if(typeof A=="object"){this.moveToItem(A)}else{if(isNaN(A)||(A==Math.floor(A)&&A<this.items.length)){this.moveToIndex(A)}else{this.moveToPosition(A)}}},addItem:function(C,A){if(typeof A=="string"){switch(A){case"first":case"start":A=0;break;case"last":case"end":A=this.itemsLastIndex+1;break;default:A=this._getIndexByKeyWord(A)}}A=Math.max(A,0);A=Math.min(A,this.itemsLastIndex+1);this.Flow.appendChild(C);var D=new ContentFlowItem(this,C,A);if(this.items.length==0){if(this.conf.circularFlow){D.pre=D;D.next=D}}else{if(A==this.itemsLastIndex+1){D.pre=this.items[this.itemsLastIndex];D.next=D.pre.next}else{D.next=this.items[A];D.pre=D.next.pre}if(D.pre){D.pre.next=D}if(D.next){D.next.pre=D}}this.items.splice(A,0,D);for(var B=A;B<this.items.length;B++){this.items[B].setIndex(B)}this._setLastIndex();if(Math.round(this._getPositionByIndex(A))<=Math.round(this._targetPosition)){this._targetPosition++;if(!this.conf.circularFlow){this._targetPosition=Math.min(this._targetPosition,this.itemsLastIndex)}}if(this._getPositionByIndex(A)<=this._currentPosition){this._currentPosition++;if(!this.conf.circularFlow){this._currentPosition=Math.min(this._currentPosition,this.itemsLastIndex)}}var E=this;window.setTimeout(function(){if(E.items.length==1){E._currentPosition=-0.01;E._targetPosition=0;E.resize()}else{E._initStep()}},100);return A},rmItem:function(A){if(A=="undefined"){A=this._activeItem.index}A=this._getIndexByKeyWord(A);if(!this.items[A]){return null}var D=this.items[A];if(D.pre){D.pre.next=D.next}if(D.next){D.next.pre=D.pre}this.items.splice(A,1);for(var B=A;B<this.items.length;B++){this.items[B].setIndex(B)}this._setLastIndex();if(Math.round(this._getPositionByIndex(A))<Math.round(this._targetPosition)){this._targetPosition--;if(!this.conf.circularFlow){this._targetPosition=this._checkIndex(this._targetPosition)}}if(this._getPositionByIndex(A)<this._currentPosition){this._currentPosition--;if(!this.conf.circularFlow){this._currentPosition=this._checkIndex(this._currentPosition)}}this._activeItem=this._getItemByPosition(this._currentPosition);var C=D.element.parentNode.removeChild(D.element);var E=this;window.setTimeout(function(){E._initStep()},10);return C},_init:function(){if(typeof (this.Container)=="string"){var B=document.getElementById(this.Container);if(B){this.Container=B}else{throw ("ContentFlow ERROR: No element with id '"+this.Container+"' found!");return }}$CF(this.Container).addClassName("ContentFlow");var A=$CF(this.Container).getChildrenByClassName("flow")[0];if(!A){throw ("ContentFlow ERROR: No element with class'flow' found!");return }this.Flow=new ContentFlowGUIElement(this,A);var M=this.Container.getChildrenByClassName("scrollbar")[0];if(M){this.Scrollbar=new ContentFlowGUIElement(this,M);var F=this.Scrollbar.getChildrenByClassName("slider")[0];if(F){this.Slider=new ContentFlowGUIElement(this,F);var H=this.Slider.getChildrenByClassName("position")[0];if(H){this.Position=new ContentFlowGUIElement(this,H)}}}this.setConfig(this._defaultConf);this._initAddOns();this.setConfig(this._userConf);this._initSizes();var J=this.Flow.getChildrenByClassName("item");this.items=new Array();for(var G=0;G<J.length;G++){var K=this.items[G]=new ContentFlowItem(this,J[G],G);if(G>0){K.pre=this.items[G-1];K.pre.next=K}}this._setLastIndex();if(this.conf.circularFlow&&this.items.length>0){var L=this.items[0];L.pre=this.items[this.items.length-1];L.pre.next=L}this._initGUI();if(this._activeElement!="content"){this._activeElement="element"}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 I=this._getIndexByKeyWord(this.conf.scrollInFrom,this._targetPosition);switch(this.conf.scrollInFrom){case"next":case"right":I-=0.5;break;case"pre":case"previous":case"left":I+=0.5;break}this._currentPosition=I;var E=new Date();var D=this;var C=window.setInterval(function(){if(D._imagesToLoad==0||new Date()-E>D._loadingTimeout){clearInterval(C);D._activeItem=D.getItem(D._currentPosition);if(D._activeItem){D._activeItem.makeActive();D._setCaptionLabel(D._activeItem.index)}D.Flow.style.visibility="visible";if(D.loadIndicator){D.loadIndicator.style.display="none"}if(D.Scrollbar){D.Scrollbar.style.visibility="visible"}D.resize();for(var O=0;O<D._loadedAddOns.length;O++){var N=ContentFlowGlobal.AddOns[D._loadedAddOns[O]];if(N.methods.afterContentFlowInit){N.methods.afterContentFlowInit(D)}}D.conf.onInit()}},10);this.isInit=true},_initAddOns:function(){var C=[];if(this._userConf.useAddOns){if(typeof this._userConf.useAddOns=="string"){C=this._userConf.useAddOns.split(" ")}else{if(typeof this._userConf.useAddOns=="array"){C=this._userConf.useAddOns}}}else{if(this.Container.getAttribute("useAddOns")){C=this.Container.getAttribute("useAddOns").split(" ")}else{C=this.conf.useAddOns.split(" ")}}for(var B=0;B<C.length;B++){if(C[B]=="none"){C=new Array();break}else{if(C[B]=="all"){C=new Array();for(var A in ContentFlowGlobal.AddOns){C.push(A)}break}}}for(var B=0;B<C.length;B++){var A=ContentFlowGlobal.AddOns[C[B]];if(A){this._loadedAddOns.push(C[B]);A._init(this);this.Container.addClassName("ContentFlowAddOn_"+A.name);if(A.methods.onloadInit){A.methods.onloadInit(this)}}}},_initGUI:function(){var C=this.resize.bind(this);window.addEvent("resize",C,false);var K=this.Container.getElementsByTagName("div");for(var G=0;G<K.length;G++){if($CF(K[G]).hasClassName("preButton")){var F=K[G];var A=this.conf.onclickPreButton;F.addEvent("click",A,false)}else{if(K[G].hasClassName("nextButton")){var I=K[G];var A=this.conf.onclickNextButton;I.addEvent("click",A,false)}}}if(this.conf.scrollWheelSpeed!=0){var J=this._wheel.bind(this);if(window.addEventListener){this.Container.addEventListener("DOMMouseScroll",J,false)}this.Container.onmousewheel=J}var L=this._keyStroke.bind(this);if(this.conf.keys&&!this.Browser.iPhone){if(document.addEventListener){if(!this.Browser.Opera){var D=document.createElement("div");D.addClassName("mouseoverCheckElement");this.Container.appendChild(D);if(this.Browser.WebKit){document.body.addEvent("keydown",function(O){if(D.offsetLeft>0){L(O)}})}else{window.addEvent("keydown",function(O){if(D.offsetLeft>0){L(O)}})}}else{this.Container.addEvent("keydown",L)}}else{this.Container.onkeydown=L}}if(this.conf.flowDragFriction>0){var E=function(R){var U=R;if(R.touches){U=R.touches[0]}var Q=U.clientX;var P=U.clientY;if(this.conf.verticalFlow){var V=P-this.Flow.mouseY;var T=this.Flow.dimensions.height}else{var V=Q-this.Flow.mouseX;var T=this.Flow.dimensions.width}var O=(V/T)*(2*this.conf.visibleItems+1);var S=this._currentPosition-O*2*this.conf.visibleItems/this.conf.flowDragFriction;this.Flow.mouseX=Q;this.Flow.mouseY=P;this.moveToPosition(S,true)}.bind(this);var N=function(){};var H=function(P){var O=Math.round(this._targetPosition);if(Math.abs(O-this._currentPosition)>0.001){this.moveToPosition(O)}}.bind(this);this.Flow.makeDraggable(E,N,H)}if(this.Scrollbar){var M=function(R){if(!R){var R=window.event}if(!this.Scrollbar.clickLocked){var Q=R.clientX;var P=Q-this.Scrollbar.position.left;var O=Math.round(P/this.Scrollbar.dimensions.width*this.itemsLastIndex);this.moveToIndex(O)}else{this.Scrollbar.clickLocked=false}}.bind(this);this.Scrollbar.addObserver("click",M)}if(this.Slider){if(this.Browser.IE6){var B=document.createElement("div");B.className="virtualSlider";this.Slider.appendChild(B)}this.Slider.setPosition=function(O){O=O-Math.floor(O)+this._getIndexByPosition(Math.floor(O));if(Math.round(O)<0){O=this.itemsLastIndex}else{if(O<=0){O=0}else{if(Math.round(O)>this.itemsLastIndex){O=0}else{if(O>=this.itemsLastIndex){O=this.itemsLastIndex}}}}if(this.items.length>1){var P=(O/this.itemsLastIndex)*this.Scrollbar.dimensions.width}else{var P=0.5*this.Scrollbar.dimensions.width}this.Slider.style.left=P-this.Slider.center.x+"px";this.Slider.style.top=this.Scrollbar.center.y-this.Slider.center.y+"px"}.bind(this);var N=function(O){this.Scrollbar.clickLocked=true}.bind(this);var E=function(P){var Q=P;if(P.touches){Q=P.touches[0]}var O=this._checkIndex((Q.clientX-this.Scrollbar.position.left)/this.Scrollbar.dimensions.width*this.itemsLastIndex);this._targetPosition=this._getPositionByIndex(O);this.Slider.setPosition(O);if(this.Position){this.Position.setLabel(O)}this._initStep(true,true)}.bind(this);var H=function(O){this._targetPosition=Math.round(this._targetPosition);this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));this._initStep(true)}.bind(this);this.Slider.makeDraggable(E,N,H)}if(this.Position){this.Position.setLabel=function(O){O=this._checkIndex(Math.round(O));if(this.items&&this.items[O].label){this.Position.innerHTML=this.items[O].label.innerHTML}else{this.Position.innerHTML=O+1}}.bind(this)}this.globalCaption=this.Container.getChildrenByClassName("globalCaption")[0];this.loadIndicator=this.Container.getChildrenByClassName("loadIndicator")[0]},_initSizes:function(A){this._initMaxHeight();var E=this._initScrollbarSize();if(!this.conf.verticalFlow&&this.Container.style.height&&this.Container.style.height!="auto"){this.maxHeight-=E}if(!this._activeItem){return }var D=this._findBiggestItem();var F=this.Flow.findPos();if(this.conf.verticalFlow){this.Flow.style.width=D.width.width+"px";this.Flow.style.height=3*D.width.width*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}else{this.Flow.style.height=D.height.height+(D.height.top-F.top)+"px"}var C=this.conf.verticalFlow?D.width.width:D.height.height;var B=C/(1+this.conf.reflectionHeight+this.conf.reflectionGap);this.Flow.style.marginBottom=-(C-B)+"px";this.Flow.dimensions=this.Flow.getDimensions();if(!this.Browser.IE6){if(this.conf.verticalFlow&&this.Container.clientWidth<this.Flow.dimensions.width){}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:D.width.width/2}}else{this.Flow.center={x:this.Flow.dimensions.width/2,y:D.height.height/2}}},_initScrollbarSize:function(){var C;var I;var F;if(C=this.Scrollbar){C.setDimensions();var B=C.dimensions.height;if(I=this.Slider){I.setDimensions();B+=I.dimensions.height;if(F=this.Position){var K=F.innerHTML;var G=maxW=0;F.style.width="auto";if(this.items){for(var D=0;D<this.items.length;D++){var J=this.items[D];if(J.label){F.innerHTML=J.label.innerHTML}else{F.innerHTML=J.index}var E=F.clientHeight;var H=F.clientWidth;if(E>G){G=E}if(H>maxW){maxW=H}}}else{F.innerHTML="&nbsp;";G=F.clientHeight;maxW=F.clientWidth}F.innerHTML=K;F.setDimensions();F.style.width=maxW+"px";F.style.left=(I.dimensions.width-maxW)/2+"px";var A=F.position.top-I.position.top;if(A>0){A+=-C.dimensions.height+G;C.style.marginBottom=A+"px"}else{A*=-1;C.style.marginTop=A+"px"}B+=A}}}else{B=0}return B},_initMaxHeight:function(){if(this.conf.verticalFlow){var G=screen.width/screen.height;var D=this.Container.style.width;var E=this.Container.clientWidth;var C=this.Flow.style.width;var F=this.Flow.clientWidth;var A=this.Flow.clientHeight}else{var G=screen.height/screen.width;var D=this.Container.style.height;var E=this.Container.clientHeight;var C=this.Flow.style.height;var F=this.Flow.clientHeight;var A=this.Flow.clientWidth}if(this.ContainerOldDim){D=this.ContainerOldDim}if(this.FlowOldDim){C=this.FlowOldDim}this.ContainerOldDim="auto";this.FlowOldDim="auto";if(this.conf.maxItemHeight<=0){this.maxHeight=A/3*G/1*this.conf.scaleFactor;if(this.conf.verticalFlow&&(this.maxHeight==0||this.maxHeight>F)){this.maxHeight=F}if(D&&D!="auto"){var H=this.conf.verticalFlow?0:this.conf.reflectionGap;var B=this.conf.verticalFlow?0:this.conf.reflectionHeight;this.maxHeight=E/(this.conf.scaleFactor*(1+B+H));this.ContainerOldDim=D}else{if(C&&C!="auto"){var H=this.conf.verticalFlow?0:this.conf.reflectionGap;this.maxHeight=F/(this.conf.scaleFactor*(1+this.conf.reflectionHeight+H));this.FlowOldDim=C}}}else{this.maxHeight=this.conf.maxItemHeight}},_findBiggestItem:function(){var G=this._activeItem;var A=G.pre;var B=G.next;var E=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 F=function(N,J){var M=N.element;M.style.display="block";var O=M.findPos();var L=M.clientHeight;var K=M.clientWidth;if(L+O.top>=E.height.height+E.height.top){E.height.height=L;E.height.top=O.top;E.height.item=N;E.height.rI=J}if(K+O.left>=E.width.width+E.width.left){E.width.width=K;E.width.left=O.left;E.width.item=N;E.width.rI=J}M.style.display="none"};var H=this._currentPosition;this._currentPosition=this.conf.visibleItems+1;for(var C=-this.conf.visibleItems;C<=this.conf.visibleItems;C++){G.element.style.display="none";this._positionItem(G,C);F(G,C)}var D=E.height.rI;for(var C=0;C<this.items.length;C++){var I=this.items[C];I.element.style.display="none";this._positionItem(I,D);F(I,D)}this._currentPosition=H;return E},_keyStroke:function(A){if(!A){var A=window.event}if(A.which){var B=A.which}else{if(A.keyCode){var B=A.keyCode}}if(this.conf.keys[B]){this.conf.keys[B].bind(this)();return Event.stop(A)}else{return true}},_wheel:function(A){if(!A){var A=window.event}var C=0;if(A.wheelDelta){C=A.wheelDelta/120}else{if(A.detail){C=-A.detail/3}}if(C){var B=this._targetPosition;if(C<0){B+=(1*this.conf.scrollWheelSpeed)}else{B-=(1*this.conf.scrollWheelSpeed)}this.moveToPosition(Math.round(B))}return Event.stop(A)},_setGlobalCaption:function(){if(this.globalCaption){this.globalCaption.innerHTML="";if(this._activeItem&&this._activeItem.caption){this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true))}}},_initStep:function(B,A){if(this.Slider){if(B){this.Slider.locked=true}else{this.Slider.locked=false}}this._holdPos=A==true?true:false;if(!this._stepLock){this._stepLock=true;this._step()}},_step:function(){var D=this._targetPosition-this._currentPosition;var C=Math.abs(D);if(C>0.001){this._currentPosition+=this.conf.flowSpeedFactor*this.conf.calcStepWidth(D,C,this.items.length,this.conf.visibleItems);var A=this.items[(this._getIndexByPosition(this._currentPosition))];if(A&&A!=this._activeItem){if(this._activeItem){this._activeItem.makeInactive()}this._activeItem=A;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 B=this._step.bind(this);window.setTimeout(B,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)}},_positionItems:function(){if(this._lastStart){var E=this._lastStart;while(E){E.element.style.display="none";E=E.next;if(E==this._lastStart){break}if(E&&E.pre==this._lastEnd){break}}}else{this._lastStart=this._activeItem}if(!this._activeItem){return }var C=this._activeItem;var B=C.pre;var D=C.next;this._positionItem(C,0);for(var A=1;A<=this.conf.visibleItems&&2*A<this.items.length;A++){if(B){this._positionItem(B,-A);this._lastStart=B;B=B.pre}if(D){this._positionItem(D,A);this._lastEnd=D;D=D.next}}},_positionItem:function(S,A){var I=this.conf;var N=I.verticalFlow;var E=S.element.style;var L=S.position=this._currentPosition+A;var M=S.relativePosition=Math.round(L)-this._currentPosition;var Q=S.relativePositionNormed=I.visibleItems>0?M/I.visibleItems:0;var B=M<0?-1:1;B*=M==0?0:1;S.side=B;var J=I.calcSize(S);J.height=Math.max(J.height,0);J.width=Math.max(J.width,0);if(S.content.origProportion){J=this._scaleImageSize(S,J)}S.size=J;var P=S.coordinates=I.calcCoordinates(S);var H=S.relativeItemPosition=I.calcRelativeItemPosition(S);var K=S.zIndex=I.calcZIndex(S);var C=S.fontSize=I.calcFontSize(S);var D=S.opacity=I.calcOpacity(S);J.height*=this.maxHeight;J.width*=this.maxHeight;var R=N?J.height:J.width;var O=N?J.width:J.height;var G=this.Flow.center.x*(1+P.x)+(H.x-1)*R/2;var F=this.maxHeight/2*(1+P.y)+(H.y-1)*O/2;E.left=(N?F:G)+"px";E.top=(N?G:F)+"px";this._setItemSize(S,J);if(I.endOpacity!=1){this._setItemOpacity(S)}if(!this.Browser.IE){E.fontSize=(C*100)+"%"}E.zIndex=32768+Math.round(K*this.items.length);I.onDrawItem(S);E.visibility="visible";E.display="block"},_scaleImageSize:function(N,P,I){var E=this.conf.scaleFactorLandscape;var D=this.conf.scaleFactorPortrait;var M=this.conf.verticalFlow;var B=N.content.origProportion;var C=P.width;var L=P.height;var H=N.content;if(M){if(B<=1){if(E!="max"&&E!=1){L*=E;C=Math.min(L*B,I?I:1)}L=C/B}else{if(B>1){if(D=="max"){L=I?I:1}else{if(D!=1){C*=D;L=Math.min(C/B,I?I:1)}else{L=C/B}}C=L*B}}}else{if(B>1){if(E!="max"&&E!=1){C*=E;L=Math.min(C/B,I?I:1)}C=L*B}else{if(B<=1){if(D=="max"){C=I?I:1}else{if(D!=1){L*=D;C=Math.min(L*B,I?I:1)}else{C=L*B}}L=C/B}}}L=isNaN(L)?0:L;C=isNaN(C)?0:C;if(!I&&this.conf.fixItemSize){var A=P.width/P.height;var I=Math.max(P.width,P.height);var O=this._scaleImageSize(N,{width:I,height:I},I);if(A<1){L=O.height/P.height;C=L*B/A}else{C=O.width/P.width;L=C/B*A}var G=L*100;var K=C*100;var J=(1-C)/2*100;var F=(1-L)/A*100*(M?0.5:1);H.style.height=G+"%";if(N.reflection){N.reflection.style.height=G*this.conf.reflectionHeight+"%"}H.style.width=K+"%";if(N.reflection){N.reflection.style.width=K+"%"}H.style.marginLeft=J+"%";if(N.reflection){N.reflection.style.marginLeft=J+"%"}H.style.marginTop=F+"%";N.element.style.overflow="hidden";return P}else{return{width:C,height:L}}},_setItemSize:(function(){if(ContentFlowGlobal.Browser.IE){var A=function(E,C){if(!this.conf.fixItemSize){E.content.style.height=C.height+"px"}else{if(ContentFlowGlobal.Browser.IE6){var D=parseInt(E.content.style.height)/100;E.content.style.height=C.height*D+"px";var B=parseInt(E.content.style.marginTop)/100;E.content.style.marginTop=C.height*B+"px"}}if(E.reflection){var D=parseInt(E.content.style.height);E.reflection.style.height=D*this.conf.reflectionHeight+"px";E.reflection.style.marginTop=D*this.conf.reflectionGap+"px"}E.element.style.width=C.width+"px";E.element.style.height=C.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}}else{var A=function(C,B){if(C.reflection){C.element.style.height=B.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px";C.reflection.style.marginTop=B.height*this.conf.reflectionGap+"px"}else{if(this._reflectionWithinImage){C.element.style.height=B.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}else{C.element.style.height=B.height+"px"}}C.element.style.width=B.width+"px"}}return A})(),_setItemOpacity:(function(){if(ContentFlowGlobal.Browser.IE6){var A=function(C){if(C.content.origSrc&&C.content.origSrc.match(/\.png$/)){var B=C.content.src;C.content.src=C.content.origSrc;C.content.style.filter=C.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")";C.content.src=B}else{C.content.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")"}if(C.reflection){C.reflection.style.filter=C.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")"}}}else{if(ContentFlowGlobal.Browser.IE){var A=function(B){B.element.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity="+B.opacity+")"}}else{var A=function(B){B.element.style.opacity=B.opacity}}}return A})()};if(!Function.bind){Function.prototype.bind=function(A){var B=this;return function(){return B.apply(A,arguments)}}}if(!Math.erf2){Math.erf2=function(A){var B=-(8*(Math.PI-3)/(3*Math.PI*(Math.PI-4)));var C=A*A;var D=1-Math.pow(Math.E,-C*(4/Math.PI+B*C)/(1+B*C));return D}}if(!Math._2PI05){Math._2PI05=Math.sqrt(2*Math.PI)}if(!Math.normDist){Math.normDist=function(A,C,B){if(!C){var C=1}if(!B){var B=0}if(!A){var A=-B}return 1/(C*Math._2PI05)*Math.pow(Math.E,-(A-B)*(A-B)/(2*C*C))}}if(!Math.normedNormDist){Math.normedNormDist=function(A,C,B){return this.normDist(A,C,B)/this.normDist(B,C,B)}}if(!Math.exp){Math.exp=function(A){return Math.pow(Math.E,A)}}if(!Math.ln){Math.ln=Math.log}if(!Math.log2){Math.log2=function(A){return Math.log(A)/Math.LN2}}if(!Math.log10){Math.log10=function(A){return Math.log(A)/Math.LN10}}if(!Math.logerithm){Math.logerithm=function(B,A){if(!A||A==Math.E){return Math.log(B)}else{if(A==2){return Math.log2(B)}else{if(A==10){return Math.log10(B)}else{return Math.log(B)/Math.log(A)}}}}}if(!Event){var Event={}}if(!Event.stop){Event.stop=function(A){A.cancelBubble=true;if(A.preventDefault){A.preventDefault()}if(A.stopPropagation){A.stopPropagation()}return false}}if(document.all&&!window.opera){window.$CF=function(A){if(typeof A=="string"){return window.$CF(document.getElementById(A))}else{if(CFElement.prototype.extend&&A&&!A.extend){CFElement.prototype.extend(A)}}return A}}else{window.$CF=function(A){return A}}if(!window.HTMLElement){CFElement={};CFElement.prototype={};CFElement.prototype.extend=function(A){for(var B in this){if(!A[B]){A[B]=this[B]}}}}else{CFElement=window.HTMLElement}if(!CFElement.findPos){CFElement.prototype.findPos=function(){var B=this;var C=curtop=0;try{if(B.offsetParent){C=B.offsetLeft;curtop=B.offsetTop;while(B=B.offsetParent){C+=B.offsetLeft;curtop+=B.offsetTop}}}catch(A){}return{left:C,top:curtop}}}if(!CFElement.getDimensions){CFElement.prototype.getDimensions=function(){return{width:this.clientWidth,height:this.clientHeight}}}if(!CFElement.hasClassName){CFElement.prototype.hasClassName=function(A){return(new RegExp("\\b"+A+"\\b").test(this.className))}}if(!CFElement.addClassName){CFElement.prototype.addClassName=function(A){if(!this.hasClassName(A)){this.className+=(this.className?" ":"")+A}}}if(!CFElement.removeClassName){CFElement.prototype.removeClassName=function(A){this.className=this.className.replace(new RegExp("\\b"+A+"\\b"),"").replace(/\s\s/g," ")}}if(!CFElement.toggleClassName){CFElement.prototype.toggleClassName=function(A){if(this.hasClassName(A)){this.removeClassName(A)}else{this.addClassName(A)}}}if(!CFElement.getChildrenByClassName){CFElement.prototype.getChildrenByClassName=function(C){var B=new Array();for(var A=0;A<this.childNodes.length;A++){var D=this.childNodes[A];if(D.nodeType==1&&$CF(D).hasClassName(C)){B.push(D)}}return B}}if(!CFElement.addEvent){CFElement.prototype.addEvent=function(B,C,A){if(this.addEventListener){this.addEventListener(B,C,A)}else{this.attachEvent("on"+B,C)}}}if(!CFElement.removeEvent){CFElement.prototype.removeEvent=function(B,C,A){if(this.removeEventListener){this.removeEventListener(B,C,A)}else{this.detachEvent("on"+B,C)}}}if(!window.addEvent){window.addEvent=function(B,C,A){if(this.addEventListener){this.addEventListener(B,C,A)}else{if(B!="load"&&B!="resize"){document.attachEvent("on"+B,C)}else{this.attachEvent("on"+B,C)}}}}if(!window.removeEvent){window.removeEvent=function(B,C,A){if(this.removeEventListener){this.removeEventListener(B,C,A)}else{if(B!="load"&&B!="resize"){document.detachEvent("on"+B,C)}else{this.detachEvent("on"+B,C)}}}}ContentFlowGlobal.init();
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.css (+250 lines)
Line 0 Link Here
1
2
/* ========== ContentFlow ========== */
3
/*
4
 * default style to look nice
5
 */
6
7
.ContentFlow {
8
}
9
    .ContentFlow .flow {
10
        /*border: 1px solid green;*/
11
    }
12
    .ContentFlow .flow * {
13
    }
14
15
    .ContentFlow .flow .item {
16
            /*border: 1px solid red;*/
17
    }
18
        .ContentFlow .flow .item canvas.content {
19
            height: 100%;
20
            width: 100%;
21
            /*border: 1px solid yellow;*/
22
        }
23
        .ContentFlow .flow .item img.content {
24
            /*border: 1px solid yellow;*/
25
            width: 100%;
26
        }
27
        .ContentFlow .flow .item img.reflection, 
28
        .ContentFlow .flow .item canvas.reflection {
29
            width: 100%;
30
        }
31
    /* ----- styling of items ----- */
32
    .ContentFlow .flow .item.active {
33
        cursor: pointer;
34
    }
35
        .ContentFlow .flow .item .caption {
36
            font-size: 100%;
37
            font-weight: bold;
38
            text-align: center;
39
            color: white;
40
            max-height: 30%;
41
            bottom: 10%;
42
            background: url(img/1x1_0.5_black.png);
43
            width: 100%;
44
        }
45
        * html .ContentFlow .flow .item .caption {
46
            background-image: none;
47
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
48
        }
49
            .ContentFlow .flow .item .caption a,
50
            .ContentFlow .flow .item .caption a:link,
51
            .ContentFlow .flow .item .caption a:visited,
52
            .ContentFlow .flow .item .caption a:active,
53
            .ContentFlow .flow .item .caption a:hover {
54
                text-decoration: none;
55
                color: white;
56
                font-style: italic;
57
                font-size: 0.8em;
58
            }
59
            .ContentFlow .flow .item .caption a:hover {
60
                text-decoration: underline;
61
            }
62
        .ContentFlow .flow .item.active .caption {
63
            /*display: block;*/ /* uncomment to show caption inside item */
64
        }
65
66
    /* ----- scrollbar ----- */
67
    .ContentFlow .scrollbar {
68
        width: 50%;
69
        margin: 0px auto;
70
        margin-top: 10px;
71
        height: 16px;
72
        background: url(img/scrollbar_white.png) left center repeat-x;
73
        position: relative;
74
        overflow: visible;
75
    }
76
77
        .ContentFlow .scrollbar .slider {
78
            width: 16px;
79
            height: 16px;
80
            background: url(img/slider_white.png) center center no-repeat;
81
            cursor: move;
82
        }
83
        
84
        /* only for IE <= 6 and a alphatransparent slider image */
85
        * html .ContentFlow .scrollbar .slider { background-image: none; }
86
        * html .ContentFlow .scrollbar .slider .virtualSlider {
87
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
88
        }
89
            .ContentFlow .scrollbar .slider .position {
90
                top: 120%;
91
                font-size: 16px;
92
                font-weight: bold;
93
                color: silver
94
            }
95
96
    /* ----- global caption ----- */
97
    .ContentFlow .globalCaption {
98
        text-align: center;
99
        font-weight: bold;
100
        color: white;
101
        font-size: 14px;
102
        height: 20px;
103
        margin: 2em auto;
104
    }
105
        .ContentFlow .globalCaption .caption {
106
        }
107
            .ContentFlow .globalCaption .caption a,
108
            .ContentFlow .globalCaption .caption a:link,
109
            .ContentFlow .globalCaption .caption a:visited,
110
            .ContentFlow .globalCaption .caption a:active,
111
            .ContentFlow .globalCaption .caption a:hover {
112
                text-decoration: none;
113
                color: white;
114
                font-style: italic;
115
                font-size: 0.8em;
116
            }
117
118
            .ContentFlow .globalCaption .caption a:hover {
119
                text-decoration: underline;
120
            }
121
122
    /* ----- load indicator ----- */
123
    .ContentFlow .loadIndicator {
124
        width: 100%;
125
        height: 100%;
126
        top: 0px;
127
        left: 0px;
128
        background: black;
129
    }
130
        .ContentFlow .loadIndicator .indicator {
131
            background: url(img/loader.gif) center center no-repeat;
132
            width: 100%;
133
            height: 100%;
134
        }
135
        * html .ContentFlow .loadIndicator .indicator {
136
            height: 100px;
137
        }
138
139
/* ================================= */
140
141
142
143
144
/* ========== ContentFlow ========== */
145
/* 
146
 * This is the basic CSS file needed for the correct functioning of ContentFlow.
147
 * DON'T CHANGE IT.
148
 *
149
 */
150
.ContentFlow {
151
    position: relative;  /* needed so overlay dimensions are constrained to the ContentFlow */
152
    overflow: hidden;
153
}
154
.ContentFlow * {
155
    margin: 0px;
156
    padding: 0px;
157
    /*border: none;*/
158
}
159
.ContentFlow img {
160
    -ms-interpolation-mode: bicubic;
161
}
162
163
.ContentFlow .mouseoverCheckElement {
164
    position: absolute;
165
    width: 0px;
166
    height: 0px;
167
    left: 0px;
168
    /*display: none;*/
169
    visibility: hidden;
170
}
171
.ContentFlow:hover .mouseoverCheckElement {
172
    left: 1px;
173
    /*width: 1px;*/
174
    /*left: -1px;*/
175
    /*background-color: red;*/
176
}
177
.ContentFlow .flow {
178
    position: relative; /* needed  so that items can be positioned relative to flow*/
179
    z-index: 0;         /* need so every item has a z-index relative to the flow-box */
180
    visibility: hidden; /* needed so that content is hidden while loading */
181
    width: 100%;        /* needed for IE6 */
182
    margin: 0 auto;
183
}
184
.ContentFlow .flow.hidden {
185
    visibility: hidden;
186
}
187
188
.ContentFlow .flow .item {
189
    position: absolute; /* needed */
190
    visibility: hidden;
191
    top: 0px;
192
    left: 0px;
193
}
194
.ContentFlow .flow .item.active {
195
}
196
.ContentFlow .flow .item .content {
197
    display: block;
198
}
199
.ContentFlow .flow .item div.content {
200
    width: 100%;
201
    height: 100%;
202
}
203
.ContentFlow .flow .item .label {
204
    display: none;
205
}
206
.ContentFlow .flow .item .reflection {
207
    display: block;
208
}
209
.ContentFlow .flow .item canvas.reflection {
210
    margin-top: -1px; /* for FF */
211
}
212
.ContentFlow .flow .item .caption {
213
    position: absolute; /* needed */
214
    display: none;      /* needed to hide it on inactive items */
215
}
216
.ContentFlow .flow .item.active .caption {
217
    /*display: block;*/ /* uncomment to show caption inside item */
218
}
219
220
/* ----- scrollbar ----- */
221
222
.ContentFlow .scrollbar {
223
    position: relative; /* needed for z-index */
224
    z-index: 1;         /* set above flow */
225
    visibility: hidden;
226
}
227
228
.ContentFlow .scrollbar .slider {
229
    position: absolute; /* needed */
230
}
231
* html .ContentFlow .scrollbar .slider .virtualSlider {
232
    height: 100%;
233
}
234
.ContentFlow .scrollbar .slider .position {
235
    position: absolute; /* needed */
236
    text-align: center;
237
}
238
239
/* ----- global caption ----- */
240
.ContentFlow .globalCaption {
241
    position: relative; /* needed for z-index */
242
    z-index: 1;         /* set above flow */
243
}
244
/* ----- load indicator ----- */
245
.ContentFlow .loadIndicator {
246
    position: absolute; /* needed */
247
    z-index: 65000;     /* set above everything */
248
}
249
250
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.js (+2550 lines)
Line 0 Link Here
1
/*  ContentFlow, version 1.0.0 
2
 *  (c) 2007 - 2010 Sebastian Kutsch
3
 *  <http://www.jacksasylum.eu/ContentFlow/>
4
 *
5
 *  ContentFlow is distributed under the terms of the MIT license.
6
 *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
7
 *
8
 *--------------------------------------------------------------------------*/
9
/* 
10
 * ============================================================
11
 * Global configutaion and initilization object
12
 * ============================================================
13
 */
14
var ContentFlowGlobal = {
15
    Flows: new Array,
16
    AddOns: {}, 
17
    scriptName: 'contentflow.js',
18
    scriptElement:  null,
19
    Browser: new (function () {
20
        this.Opera = window.opera ? true : false;
21
        this.IE = document.all && !this.Opera ? true : false;
22
        this.IE6 = this.IE && typeof(window.XMLHttpRequest) == "undefined" ? true : false;
23
        this.IE8 = this.IE && typeof(document.querySelectorAll) != "undefined" ? true : false;
24
        this.IE7 = this.IE && ! this.IE6 && !this.IE8 ? true : false;
25
        this.WebKit = /WebKit/i.test(navigator.userAgent) ? true : false, 
26
        this.iPhone = /iPhone|iPod/i.test(navigator.userAgent)? true : false;
27
        this.Chrome = /Chrome/i.test(navigator.userAgent) ? true : false;
28
        this.Safari = /Safari/i.test(navigator.userAgent) && !this.Chrome ? true : false;
29
        this.Konqueror = navigator.vendor == "KDE" ? true : false;
30
        this.Konqueror4 = this.Konqueror && /native code/.test(document.getElementsByClassName) ? true : false;
31
        this.Gecko = !this.WebKit && navigator.product == "Gecko" ? true : false;
32
        this.Gecko19 = this.Gecko && Array.reduce ? true : false;
33
    })(),
34
35
    getAddOnConf: function(name) {
36
        if(this.AddOns[name])
37
            return this.AddOns[name].conf;
38
        else
39
            return {};
40
    },
41
42
    setAddOnConf: function (name, conf) {
43
        this.AddOns[name].setConfig(conf);
44
    },
45
46
    getScriptElement:function (scriptName) {
47
        var regex = new RegExp(scriptName);
48
        var scripts = document.getElementsByTagName('script');
49
        for (var i=0; i<scripts.length; i++) {
50
            if (scripts[i].src && regex.test(scripts[i].src))
51
                return scripts[i];
52
        }
53
        return '';
54
    },
55
56
    getScriptPath: function (scriptElement, scriptName) {
57
        var regex = new RegExp(scriptName+".*");
58
        return scriptElement.src.replace(regex, '');
59
    },
60
61
    addScript: function  (path) {
62
        if (this.Browser.IE || this.Browser.WebKit || this.Browser.Konqueror) {
63
            document.write('<script type="text/javascript" src="'+path+'"><\/script>');
64
        }
65
        else {
66
            var script = document.createElement('script');
67
            script.src = path;
68
            script.setAttribute('type', 'text/javascript');
69
            document.getElementsByTagName('head')[0].appendChild(script);
70
        }
71
    },
72
73
    addScripts: function  (basePath, filenames) {
74
        for (var i=0; i<filename.length; i++)
75
            this.addScript(basepath+filenames[i]);
76
    },
77
78
    addStylesheet: function (path) {
79
        if (this.Browser.Gecko19) {
80
            var link = document.createElement('link');
81
            link.setAttribute('rel', 'stylesheet');
82
            link.setAttribute('titel', 'Standard');
83
            link.setAttribute('href', path);
84
            link.setAttribute('type', 'text/css');
85
            link.setAttribute('media', 'screen');
86
            document.getElementsByTagName('head')[0].appendChild(link);
87
        }
88
        else {
89
            document.write('<link rel="stylesheet" title="Standard" href="'+path+'" type="text/css" media="screen" />');
90
        }
91
92
    },
93
94
    addStylesheets: function  (basePath, filenames) {
95
        for (var i=0; i<filename.length; i++)
96
            this.addStylesheet(basepath+filenames[i]);
97
    },
98
99
    initPath: function () {
100
        /* get / set basic values */
101
        this.scriptElement = this.getScriptElement(this.scriptName);
102
        if (!this.scriptElement) {
103
            this.scriptName = 'contentflow_src.js';
104
            this.scriptElement = this.getScriptElement(this.scriptName);
105
        }
106
107
        this.BaseDir = this.getScriptPath(this.scriptElement, this.scriptName) ;
108
        if (!this.AddOnBaseDir) this.AddOnBaseDir = this.BaseDir;
109
        if (!this.CSSBaseDir) this.CSSBaseDir = this.BaseDir;
110
    },
111
112
    init: function () {
113
        /* add default stylesheets */
114
        this.addStylesheet(this.CSSBaseDir+'contentflow.css');
115
        this.addStylesheet(this.CSSBaseDir+'mycontentflow.css');    // FF2: without adding a css-file FF2 hangs on a reload.
116
                                                                    //      I don't have the slidest idea why
117
                                                                    //      Could be timing problem
118
        this.loadAddOns = new Array();
119
        /* add AddOns scripts */
120
        if (this.scriptElement.getAttribute('load')) {
121
            var AddOns = this.loadAddOns = this.scriptElement.getAttribute('load').replace(/\ +/g,' ').split(' ');
122
            for (var i=0; i<AddOns.length; i++) {
123
                if (AddOns[i] == '') continue;
124
                //if (AddOns[i] == 'myStyle') {
125
                    //this.addStylesheet(this.BaseDir+'mycontentflow.css');
126
                    //continue;
127
                //}
128
                this.addScript(this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js');
129
            }
130
        }
131
132
        /* ========== ContentFlow auto initialization on document load ==========
133
         * thanks to Dean Edwards
134
         * http://dean.edwards.name/weblog/2005/02/order-of-events/
135
         */
136
        var CFG = this;
137
138
        /* for Mozilla, Opera 9, Safari */
139
        if (document.addEventListener) {
140
            /* for Safari */
141
            if (this.Browser.WebKit) {
142
                var _timer = setInterval(function() {
143
                    if (/loaded|complete/.test(document.readyState)) {
144
                        clearInterval(_timer);
145
                        CFG.onloadInit(); // call the onload handler
146
                    }
147
                }, 10);
148
            }
149
            else {
150
              document.addEventListener("DOMContentLoaded", CFG.onloadInit, false);
151
            }
152
        }
153
        else if (this.Browser.IE) {
154
            document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>");
155
            var script = document.getElementById("__ie_cf_onload");
156
            script.onreadystatechange = function() {
157
                if (this.readyState == "complete") {
158
                    CFG.onloadInit(); // call the onload handler
159
                }
160
            };
161
        }
162
163
        /* for all other browsers */
164
        window.addEvent('load', CFG.onloadInit, false);
165
166
        /* ================================================================== */
167
168
    },
169
170
    onloadInit: function () {
171
        // quit if this function has already been called
172
        if (arguments.callee.done) return;
173
        for (var i=0; i< ContentFlowGlobal.loadAddOns.length; i++) {
174
            var a = ContentFlowGlobal.loadAddOns[i];
175
            if (!ContentFlowGlobal.AddOns[a]) {
176
                var CFG = ContentFlowGlobal;
177
                window.setTimeout( CFG.onloadInit, 10);
178
                return;
179
            }
180
        }
181
        // flag this function so we don't do the same thing twice
182
        arguments.callee.done = true;
183
        
184
        /* fix for mootools */
185
        if (window.Element && Element.implement && document.all && !window.opera) {
186
            for (var prop in window.CFElement.prototype) {
187
                if(!window.Element.prototype[prop]) {
188
                    var implement = {};
189
                    implement[prop] = window.CFElement.prototype[prop];
190
                    Element.implement(implement);
191
                }
192
            }
193
        }
194
195
        /* init all manualy created flows */
196
        for (var i=0; i< ContentFlowGlobal.Flows.length; i++) {
197
            ContentFlowGlobal.Flows[i].init(); 
198
        }
199
200
        /* init the rest */
201
        var divs = document.getElementsByTagName('div');
202
        DIVS: for (var i = 0; i < divs.length; i++) {
203
            if (divs[i].className.match(/\bContentFlow\b/)) {
204
                for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
205
                    if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
206
                }
207
                var CF = new ContentFlow(divs[i],{}, false);
208
                CF.init();
209
            }
210
        }
211
    }
212
213
};
214
215
ContentFlowGlobal.initPath();
216
217
218
/*
219
 * ============================================================
220
 * ContentFlowAddOn
221
 * ============================================================
222
 */
223
var ContentFlowAddOn = function (name, methods, register) {
224
    if (typeof register == "undefined" || register != false)
225
        ContentFlowGlobal.AddOns[name] = this;
226
        
227
    this.name = name;
228
    if (!methods) methods = {};
229
    this.methods = methods;
230
    this.conf = {};
231
    if (this.methods.conf) {
232
       this.setConfig(this.methods.conf);
233
       delete this.methods.conf;
234
    }
235
236
237
    this.scriptpath = ContentFlowGlobal.AddOnBaseDir;
238
    if (methods.init) {
239
        var init = methods.init.bind(this);
240
        init(this);
241
    }
242
};
243
244
ContentFlowAddOn.prototype = {
245
    Browser: ContentFlowGlobal.Browser,
246
247
    addScript: ContentFlowGlobal.addScript,
248
    addScripts: ContentFlowGlobal.addScripts,
249
250
    addStylesheet: function (path) {
251
        if (!path)
252
            path = this.scriptpath+'ContentFlowAddOn_'+this.name+'.css';
253
        ContentFlowGlobal.addStylesheet(path);
254
    },
255
    addStylesheets: ContentFlowGlobal.addStylesheets,
256
257
    setConfig: function (conf) {
258
        for (var c in conf) {
259
            this.conf[c] = conf[c];
260
        }
261
    },
262
263
    _init: function (flow) {
264
        if (this.methods.ContentFlowConf) {
265
            flow.setConfig(this.methods.ContentFlowConf);
266
        }
267
    }
268
269
270
};
271
272
273
274
/* 
275
 * ============================================================
276
 * ContentFlowGUIElement
277
 * ============================================================
278
 */
279
280
var ContentFlowGUIElement = function (CFobj, element) {
281
    element.setDimensions = function () {
282
        this.dimensions = this.getDimensions();
283
        this.center = {x: this.dimensions.width/2, y:this.dimensions.height/2};
284
        this.position = this.findPos();
285
    };
286
    element.addObserver = function (eventName, method) {
287
        var m = this.eventMethod = method.bind(CFobj);
288
        this.observedEvent = eventName;
289
        this.addEvent(eventName, m, false);
290
    };
291
    
292
    element.makeDraggable = function (onDrag, beforeDrag, afterDrag) {
293
294
        this.stopDrag = function(event) {
295
            if (!event) var event = window.event;
296
            if (this.Browser.iPhone)  {
297
                window.removeEvent('touchemove', onDrag, false);
298
                if (!this.ontochmove) {
299
                    var t = event.target;
300
                    if (t.firstChild) t = t.firstChild;
301
                    var e = document.createEvent('MouseEvents');
302
                    e.initEvent('click', true, true);
303
                    t.dispatchEvent(e);
304
                }
305
            }
306
            else {
307
                window.removeEvent('mousemove', onDrag, false);
308
            }
309
            afterDrag(event); 
310
        }.bind(this);
311
312
        this.initDrag = function (event) {
313
            if (!event) var event = window.event;
314
            var e = event;
315
            if (event.touches) e = event.touches[0];
316
317
            this.mouseX = e.clientX; 
318
            this.mouseY = e.clientY; 
319
320
            beforeDrag(event);
321
322
        }.bind(this);
323
324
        this.startDrag = function (event) {
325
            if (!event) var event = window.event;
326
327
            var stopDrag = this.stopDrag;
328
329
            if (this.Browser.iPhone)  {
330
                var s = this;
331
                s.ontouchmove = false
332
                window.addEvent('touchmove', function (e) {
333
                        s.ontouchmove = true; 
334
                        onDrag(e);
335
                }, false);
336
                event.preventDefault();
337
                window.addEvent('touchend', stopDrag, false);
338
            }
339
            else {
340
                window.addEvent('mousemove', onDrag, false);
341
                window.addEvent('mouseup', stopDrag, false);
342
            }
343
            if(event.preventDefault) { event.preventDefault() }
344
345
        }.bind(this);
346
347
        var startDrag = this.startDrag;
348
        var xxx = function (ev) {
349
            var e = ev.touches[0];
350
            document.getElementById('info').innerHTML = e.clientX;
351
            ev.preventDefault();
352
        }
353
        if (this.Browser.iPhone)  {
354
            this.addEventListener('touchstart', startDrag, false);
355
        }
356
        else {
357
            this.addEvent('mousedown', startDrag, false); 
358
        }
359
        
360
    };
361
362
    element.Browser = ContentFlowGlobal.Browser;
363
    $CF(element).setDimensions();
364
    return element;
365
};
366
367
368
/* 
369
 * ============================================================
370
 * ContentFlowItem
371
 * ============================================================
372
 */
373
var ContentFlowItem  = function (CFobj, element, index) {
374
    this.CFobj = CFobj;
375
    this._activeElement = CFobj.conf.activeElement;
376
    this.pre = null;
377
    this.next = null;
378
    /*
379
     * ==================== item click events ====================
380
     * handles the click event on an active and none active item
381
     */
382
383
    this.clickItem = function (event) {
384
        if(!event) var event = window.event;
385
        var el = event.target ? event.target : event.srcElement;
386
        var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex;
387
        var item = this.items[index];
388
        if (this._activeItem == item) {
389
            this.conf.onclickActiveItem(item);
390
        }
391
        else {
392
            if (this.conf.onclickInactiveItem(item) != false ) this.moveToIndex(index);
393
        }
394
    }.bind(CFobj),
395
396
    this.setIndex = function (index) {
397
        this.index = index;
398
        this.element.itemIndex = index;
399
    };
400
    this.getIndex = function () {
401
        return this.index;
402
    };
403
404
405
    /* generate deault HTML structure if item is an image */
406
    if ($CF(element).nodeName == "IMG") {
407
        var el = document.createElement('div');
408
        el.className = "item";
409
410
        var cont = element.parentNode.replaceChild( el, element);
411
        cont.className = "content";
412
        el.appendChild(cont);
413
414
        if (element.title) {
415
            var cap = document.createElement('div');
416
            cap.className = "caption";
417
            cap.innerHTML = element.title;
418
            el.appendChild(cap);
419
        }
420
        element = el;
421
    }
422
    /* create item object */
423
    this.element = $CF(element);
424
    this.item = element;
425
    if (typeof index != "undefined") this.setIndex(index);
426
    this.content = this.element.getChildrenByClassName('content')[0];
427
    this.caption = this.element.getChildrenByClassName('caption')[0];
428
    this.label = this.element.getChildrenByClassName('label')[0];
429
430
    /* if content is image set properties */
431
    if (this.content.nodeName == "IMG") {
432
        CFobj._imagesToLoad++;
433
434
        var foobar = function () { 
435
            CFobj._imagesToLoad--;
436
            this.image = this.content;
437
            this.setImageFormat(this.image);
438
            if ( CFobj.conf.reflectionHeight > 0) {
439
                this.addReflection();
440
            }
441
            this.initClick();
442
        }.bind(this);
443
444
        if (this.content.complete && this.content.width > 0)
445
            foobar();
446
        else
447
            this.content.onload = foobar;
448
    }
449
    else {
450
        this.initClick();
451
    }
452
453
};
454
455
ContentFlowItem.prototype = {
456
    
457
    Browser: ContentFlowGlobal.Browser,
458
459
    makeActive: function () {
460
        this.element.addClassName('active');
461
        this.CFobj.conf.onMakeActive(this);
462
    },
463
    
464
    makeInactive: function () {
465
        this.element.removeClassName('active');
466
        this.CFobj.conf.onMakeInactive(this);
467
    },
468
469
    initClick: function () {
470
        var cItem = this.clickItem;
471
        this[this._activeElement].addEvent('click', cItem, false);
472
    },
473
    
474
    setImageFormat: function (img) {
475
        if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "auto";
476
        img.origProportion =  img.width / img.height;
477
        img.setAttribute('origProportion', img.width / img.height);
478
        if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "";
479
        //img.origWidth = img.width;
480
        //img.origHeight = img.height;
481
        if (img.origProportion <= 1)
482
            img.addClassName('portray');
483
        else
484
            img.addClassName('landscape');
485
    },
486
487
    /*
488
     * add reflection to item
489
     */
490
    addReflection: function() {
491
        var CFobj = this.CFobj;
492
        var reflection;
493
        var image = this.content;
494
495
496
        if (this.Browser.IE) {
497
            var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
498
            if (CFobj._reflectionColorRGB) {
499
                // transparent gradient
500
                if (CFobj.conf.reflectionColor == "transparent") {
501
                    var RefImg = reflection = this.reflection = document.createElement('img');
502
                    reflection.src = image.src;
503
                }
504
                // color gradient
505
                else {
506
                    reflection = this.reflection = document.createElement('div');
507
                    var RefImg = document.createElement('img');
508
                    RefImg.src = image.src;
509
                    reflection.width = RefImg.width;
510
                    reflection.height = RefImg.height;
511
                    RefImg.style.width = '100%';
512
                    RefImg.style.height = '100%';
513
                    var color = CFobj._reflectionColorRGB;
514
                    reflection.style.backgroundColor = '#'+color.hR+color.hG+color.hB;
515
                    reflection.appendChild(RefImg);
516
                }
517
                filterString += ' progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY='+CFobj.conf.reflectionHeight*100+' finishY=0)';
518
            } else {
519
                var RefImg = reflection = this.reflection = document.createElement('img');
520
                reflection.src = image.src;
521
            }
522
            // crop image (streches and crops (clip on default dimensions), original proportions will be restored through CSS)
523
            filterString += ' progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22='+1/CFobj.conf.reflectionHeight+')';
524
525
            if (ContentFlowGlobal.Browser.IE6) {
526
                if (image.src.match(/\.png$/) ) {
527
                    image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
528
                    image.filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
529
                    filterString += " progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )";
530
                    image.origSrc = image.src;
531
                    image.src='img/blank.gif';
532
                    RefImg.src="img/blank.gif";
533
                }
534
            }
535
536
            reflection.filterString = filterString;
537
            RefImg.style.filter = filterString;
538
539
        } else {
540
            if (CFobj._reflectionWithinImage)
541
                var canvas = this.canvas = $CF(document.createElement('canvas'));
542
            else 
543
                var canvas = reflection = this.reflection = document.createElement('canvas');
544
545
            if (canvas.getContext) {
546
                if (CFobj._reflectionWithinImage) {
547
                    for (var i=0; i <image.attributes.length; i++) {
548
                        canvas.setAttributeNode(image.attributes[i].cloneNode(true));
549
                    }
550
                }
551
552
                var context = canvas.getContext("2d");
553
554
                /* calc image size */
555
                var max = CFobj.maxHeight;
556
                var size = CFobj._scaleImageSize(this, {width: max, height: max }, max)
557
                var width = size.width;
558
                var height = size.height;
559
560
                // overwrite default height and width
561
                if (CFobj._reflectionWithinImage) {
562
                    canvas.width = width;
563
                    canvas.height = height; 
564
                    this.setImageFormat(canvas);
565
                    canvas.height = height * (1 + CFobj.conf.reflectionHeight + CFobj.conf.reflectionGap);
566
567
                }
568
                else {
569
                    canvas.width = width;
570
                    canvas.height = height * CFobj.conf.reflectionHeight;
571
                }
572
                    
573
                context.save(); /* save default context */
574
575
                /* draw image into canvas */
576
                if (CFobj._reflectionWithinImage) {
577
                    context.drawImage(image, 0, 0, width, height);
578
                }
579
580
                /* mirror image by transformation of context and image drawing */
581
                if (CFobj._reflectionWithinImage) {
582
                    var contextHeight = height * ( 1 + CFobj.conf.reflectionGap/2) * 2;
583
                }
584
                else {
585
                    var contextHeight = image.height;
586
                }
587
                // -1 for FF 1.5
588
                contextHeight -= 1;
589
                
590
                context.translate(0, contextHeight);
591
                context.scale(1, -1);
592
                /* draw reflection image into canvas */
593
                context.drawImage(image, 0, 0, width, height);
594
595
                /* restore default context for simpler further canvas manupulation */
596
                context.restore();
597
                    
598
                if (CFobj._reflectionColorRGB) {
599
                    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
600
601
                    var alpha = [0, 0.5, 1];
602
                    if (CFobj._reflectionColor == "transparent") {
603
                        context.globalCompositeOperation = "destination-in";
604
                        alpha = [1, 0.5, 0];
605
                    }
606
607
                    var red = CFobj._reflectionColorRGB.iR;
608
                    var green = CFobj._reflectionColorRGB.iG;
609
                    var blue = CFobj._reflectionColorRGB.iB;
610
                    if (CFobj._reflectionWithinImage) {
611
                        gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
612
                        gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')');
613
                        gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
614
                    }
615
                    else {
616
                        gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[1]+')');
617
                    }
618
                    gradient.addColorStop(1, 'rgba('+red+','+green+','+blue+','+alpha[2]+')');
619
620
                    context.fillStyle = gradient;
621
                    context.fillRect(0, 0, canvas.width, canvas.height);
622
                    
623
                }
624
625
                if (CFobj._reflectionWithinImage) {
626
                    image.parentNode.replaceChild(canvas, image);
627
                    this.content = canvas;
628
                    this.origContent = canvas;
629
                    delete this.image;// = true;
630
631
                }
632
                
633
            } else {
634
                CFobj._reflectionWithinImage = false;
635
                delete this.reflection;
636
            }
637
638
        }
639
        if (reflection) {
640
            reflection.className = "reflection";
641
            this.element.appendChild(reflection);
642
643
            /* be shure that caption is last child */
644
            if (this.caption) this.element.appendChild(this.caption);
645
        } 
646
647
    }
648
649
650
 };
651
652
/*
653
 * ============================================================
654
 * ContentFlow
655
 * ============================================================
656
 */
657
var ContentFlow = function (container, config) {
658
659
    if (container) {
660
        ContentFlowGlobal.Flows.push(this);
661
        this.Container = container;
662
        this._userConf = config?config:{};
663
        this.conf = {};
664
        this._loadedAddOns = new Array();
665
    } else {
666
        throw ('ContentFlow ERROR: No flow container node or id given');
667
    }
668
669
};
670
671
ContentFlow.prototype = {
672
    _imagesToLoad: 0,
673
    _activeItem: 0,
674
    _currentPosition: 0,
675
    _targetPosition: 0,
676
    _stepLock: false,
677
    _millisecondsPerStep: 40, 
678
    _reflectionWithinImage: true,
679
    Browser: ContentFlowGlobal.Browser,
680
    
681
    _defaultConf: { 
682
        /* pre conf */
683
        useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN]
684
685
        biggestItemPos: 0,
686
        loadingTimeout: 30000, //milliseconds
687
        activeElement: 'content', // item or content
688
689
        maxItemHeight: 0,
690
        scaleFactor: 1,
691
        scaleFactorLandscape: 1.33,
692
        scaleFactorPortrait: 1.0,
693
        fixItemSize: false,
694
        relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate
695
696
        circularFlow: true,
697
        verticalFlow: false,
698
        visibleItems: -1,
699
        endOpacity: 1,
700
        startItem:  "center",
701
        scrollInFrom: "pre",
702
703
        flowSpeedFactor: 1.0,
704
        flowDragFriction: 1.0,
705
        scrollWheelSpeed: 1.0,
706
        keys: {
707
            13: function () { this.conf.onclickActiveItem(this._activeItem) },
708
            37: function () { this.moveTo('pre') }, 
709
            38: function () { this.moveTo('visibleNext') },
710
            39: function () { this.moveTo('next') },
711
            40: function () { this.moveTo('visiblePre') }
712
        },
713
714
        reflectionColor: "transparent", // none, transparent or hex RGB CSS style #RRGGBB
715
        reflectionHeight: 0.5,          // float (relative to original image height)
716
        reflectionGap: 0.0,
717
718
        /* ==================== actions ==================== */
719
720
        onInit: function () {},
721
722
        onclickInactiveItem: function (item) {},
723
724
        onclickActiveItem: function (item) {
725
            var url, target;
726
727
            if (url = item.content.getAttribute('href')) {
728
                target = item.content.getAttribute('target');
729
            }
730
            else if (url = item.element.getAttribute('href')) {
731
                target = item.element.getAttribute('target');
732
            }
733
            else if (url = item.content.getAttribute('src')) {
734
                target = item.content.getAttribute('target');
735
            }
736
737
            if (url) {
738
                if (target)
739
                    window.open(url, target).focus();
740
                else
741
                    window.location.href = url;
742
            }
743
        },
744
745
        onMakeInactive: function (item) {},
746
747
        onMakeActive: function (item) {},
748
749
        onReachTarget: function(item) {},
750
751
        onMoveTo: function(item) {},
752
753
        //onDrawItem: function(item, relativePosition, relativePositionNormed, side, size) {},
754
        onDrawItem: function(item) {},
755
        
756
        onclickPreButton: function (event) {
757
            this.moveToIndex('pre');
758
            return Event.stop(event);
759
        },
760
        
761
        onclickNextButton: function (event) {
762
            this.moveToIndex('next');
763
            return Event.stop(event);
764
        },
765
766
        /* ==================== calculations ==================== */
767
768
        calcStepWidth: function(diff) {
769
            var vI = this.conf.visibleItems;
770
            var items = this.items.length;
771
            items = items == 0 ? 1 : items;
772
            if (Math.abs(diff) > vI) {
773
                if (diff > 0) {
774
                    var stepwidth = diff - vI;
775
                } else {
776
                    var stepwidth = diff + vI;
777
                }
778
            } else if (vI >= this.items.length) {
779
                var stepwidth = diff / items;
780
            } else {
781
                var stepwidth = diff * ( vI / items);
782
                //var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length);
783
                //var stepwidth = this.flowSpeedFactor * diff / this.visibleItems;
784
                //var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length)
785
                //var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed
786
            }
787
            return stepwidth;
788
        },
789
        
790
        calcSize: function (item) {
791
            var rP = item.relativePosition;
792
            //var rPN = relativePositionNormed;
793
            //var vI = this.conf.visibleItems; 
794
795
            var h = 1/(Math.abs(rP)+1);
796
            var w = h;
797
            return {width: w, height: h};
798
        },
799
800
        calcCoordinates: function (item) {
801
            var rP = item.relativePosition;
802
            //var rPN = item.relativePositionNormed;
803
            var vI = this.conf.visibleItems; 
804
805
            var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
806
            var x =  item.side * vI/(vI+1)* f; 
807
            var y = 1;
808
809
            return {x: x, y: y};
810
        },
811
812
        /*
813
        calcRelativeItemPosition: function (item) {
814
            var x = 0;
815
            var y = -1;
816
            return {x: x, y: y};
817
        },
818
        */
819
820
        calcZIndex: function (item) {
821
            return -Math.abs(item.relativePositionNormed);
822
        },
823
824
        calcFontSize: function (item) {
825
            return item.size.height;
826
        },
827
   
828
        calcOpacity: function (item) {
829
            return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity);
830
        }
831
    },
832
833
    /* ---------- end of defaultConf ---------- */
834
835
    
836
    /*
837
     * ==================== index helper methods ====================
838
     */
839
840
    /*
841
     * checks if index is within the index range of the this.items array
842
     * returns a value that is within this range
843
     */
844
    _checkIndex: function (index) {
845
        index = Math.max(index, 0);
846
        index = Math.min(index, this.itemsLastIndex);
847
        return index;
848
    },
849
850
    /*
851
     * sets the object property itemsLastIndex
852
     */
853
    _setLastIndex: function () {
854
        this.itemsLastIndex = this.items.length - 1;
855
    },
856
857
    /*
858
*/
859
    _getItemByIndex: function (index) {
860
        return this.items[this._checkIndex(index)];
861
    },
862
863
    _getItemByPosition: function (position) {
864
        return this._getItemByIndex(this._getIndexByPosition(position));
865
    },
866
867
    /* returns the position of an item-index relative to current position */
868
    _getPositionByIndex: function(index) {
869
        if (!this.conf.circularFlow) return this._checkIndex(index);
870
        var cI = this._getIndexByPosition(this._currentPosition);
871
        var dI = index - cI;
872
        if (Math.abs(dI) > dI+this.items.length)
873
            dI += this.items.length;
874
        else if (Math.abs(dI) > (Math.abs(dI-this.items.length)))
875
            dI -= this.items.length;
876
877
        return this._currentPosition + dI;
878
879
    },
880
881
    /* returns the index an item at position p would have */
882
    _getIndexByPosition: function (position) {
883
        if (position < 0) var mod = 0;
884
        else var mod = 1;
885
886
        var I = (Math.round(position) + mod) % this.items.length;
887
        if (I>0) I -= mod;
888
        else if(I<0) I += this.items.length - mod;
889
        else if(position<0) I = 0;
890
        else I = this.items.length - 1;
891
892
        return I;
893
    },
894
895
    _getIndexByKeyWord: function (keyword, relativeTo, check) {
896
        if (relativeTo)
897
            var index = relativeTo;
898
        else if (this._activeItem)
899
            var index = this._activeItem.index;
900
        else
901
            var index = 0;
902
903
        if (isNaN(keyword)) {
904
            switch (keyword) {
905
                case "first":
906
                case "start":
907
                    index = 0;
908
                    break;
909
                case "last":
910
                case "end":
911
                    index = this.itemsLastIndex;
912
                    break;
913
                case "middle":
914
                case "center":
915
                    index = Math.round(this.itemsLastIndex/2);
916
                    break;
917
                case "right":
918
                case "next":
919
                    index += 1;
920
                    break;
921
                case "left":
922
                case "pre":
923
                case "previous":
924
                    index -= 1;
925
                    break;
926
                case 'visible':
927
                case 'visiblePre':
928
                case 'visibleLeft':
929
                    index -= this.conf.visibleItems;
930
                    break;
931
                case 'visibleNext':
932
                case 'visibleRight':
933
                    index += this.conf.visibleItems;
934
                    break;
935
                default:
936
                    index = index;
937
            }
938
        }
939
        else {
940
            index = keyword;
941
        }
942
        if (check != false)
943
            index = this._checkIndex(index);
944
        
945
        return index;
946
    },
947
948
949
    _setCaptionLabel: function (index) {
950
        if(this.Position && !this.Slider.locked)
951
            this.Position.setLabel(index);
952
        this._setGlobalCaption();
953
    },
954
955
956
    /*
957
     * ==================== public methods ==================== 
958
     */
959
    getAddOnConf: function(name) {
960
          return ContentFlowGlobal.getAddOnConf(name);
961
    },
962
963
    setAddOnConf: function(name, conf) {
964
          ContentFlowGlobal.setAddOnConf(name, conf);
965
    },
966
967
968
    /*
969
     * calls _init() if ContentFlow has not been initialized before
970
     * needed if ContentFlow is not automatically initialized on window.load
971
     */
972
    init: function () {
973
        if(this.isInit) return;
974
        this._init();
975
    },
976
977
    /*
978
     * parses configuration object and initializes configuration values
979
     */
980
    setConfig: function(config) {
981
        if (!config) return;
982
        var dC = this._defaultConf;
983
        for (var option in config) {
984
            if (dC[option] == "undefined" ) continue;
985
            switch (option) {
986
                case "scrollInFrom":
987
                case "startItem":
988
                    if (typeof(config[option]) == "number"  || typeof(config[option]) == "string") {
989
                        //this["_"+option] = config[option];
990
                        this.conf[option] = config[option];
991
                    }
992
                    break;
993
                default:
994
                    if (typeof(dC[option] == config[option])) {
995
                        //this["_"+option] = config[option];
996
                        if (typeof config[option] == "function") {
997
                            this.conf[option] = config[option].bind(this);
998
                        }
999
                        else {
1000
                            this.conf[option] = config[option];
1001
                        }
1002
                    }
1003
            }
1004
        }
1005
        switch (this.conf.reflectionColor) {
1006
            case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.conf.reflectionColor:this.conf.reflectionColor+"x":
1007
                this._reflectionColorRGB = {
1008
                    hR: this.conf.reflectionColor.slice(1,3),
1009
                    hG: this.conf.reflectionColor.slice(3,5),
1010
                    hB: this.conf.reflectionColor.slice(5,7),
1011
                    iR: parseInt(this.conf.reflectionColor.slice(1,3), 16),
1012
                    iG: parseInt(this.conf.reflectionColor.slice(3,5), 16),
1013
                    iB: parseInt(this.conf.reflectionColor.slice(5,7), 16)
1014
                };
1015
                break;
1016
            case "none":
1017
            case "transparent":
1018
            default:
1019
                this._reflectionColor = "transparent"; 
1020
                this._reflectionColorRGB = {
1021
                    hR: 0, hG: 0, hB:0,
1022
                    iR: 0, iG: 0, iB:0
1023
                };
1024
                break;
1025
        }
1026
        if (this.items) {
1027
            if (this.conf.visibleItems <  0)
1028
                this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
1029
            this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
1030
        }
1031
1032
        if (this.conf.relativeItemPosition) {
1033
            var calcRP = {
1034
                x: {
1035
                    left: function(size) { return -1 },
1036
                    center: function(size) { return 0 },
1037
                    right: function(size) { return 1 }
1038
                },
1039
                y: {
1040
                    top: function(size) { return -1 },
1041
                    center: function(size) { return 0 },
1042
                    bottom: function(size) { return 1 }
1043
                }
1044
            };
1045
1046
            var iP = this.conf.relativeItemPosition;
1047
            iP = iP.replace(/above/,"top").replace(/below/,"bottom");
1048
            var x, y = null;
1049
            x = iP.match(/left|right/);
1050
            y = iP.match(/top|bottom/);
1051
            c = iP.match(/center/);
1052
            if (!x) {
1053
                if (c) x = "center";
1054
                else x = "center";
1055
            }
1056
            if (!y) {
1057
                if (c) y = "center";
1058
                else y = "top";
1059
            }
1060
            var calcX = calcRP.x[x];
1061
            var calcY = calcRP.y[y];
1062
            this.conf.calcRelativeItemPosition = function (item) {
1063
                var x = calcX(item.size);
1064
                var y = calcY(item.size);
1065
                return {x: x, y: y};
1066
            };
1067
            this.conf.relativeItemPosition = null;
1068
        }
1069
1070
        if (this._reflectionType && this._reflectionType != "clientside") {
1071
            this.conf.reflectionHeight = 0;
1072
        }
1073
1074
    },
1075
1076
    getItem: function (index) {
1077
        return this.items[this._checkIndex(Math.round(index))]; 
1078
    },
1079
1080
    /*
1081
     * returns the index number of the active item
1082
     */
1083
    getActiveItem: function() {
1084
        return this._activeItem;
1085
    },
1086
1087
    /*
1088
     * returns the number of items the flow contains
1089
     */
1090
    getNumberOfItems: function () {
1091
        return this.items.length;
1092
    },
1093
1094
    /*
1095
     * reinitializes sizes.
1096
     * called on window.resize
1097
     */
1098
    resize: function () {
1099
        this._initSizes();
1100
        this._initStep();
1101
    }, 
1102
1103
    /*
1104
     * scrolls flow to item i
1105
     */
1106
    moveToPosition: function (p, holdPos) {
1107
        if (!this.conf.circularFlow) p = this._checkIndex(p);
1108
        this._targetPosition = p;
1109
        this.conf.onMoveTo(this._getItemByPosition(p));
1110
        this._initStep(false, holdPos);
1111
    },
1112
    moveToIndex: function (index) {
1113
        this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.conf.circularFlow)));
1114
        this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
1115
        this._initStep();
1116
    },
1117
    moveToItem: function (item) {
1118
        var i;
1119
        if (item.itemIndex) i = item.itemIndex;
1120
        else i = item.index;
1121
        this.moveToIndex(i);
1122
    },
1123
    moveTo: function (i) {
1124
        if (typeof i == "object") this.moveToItem(i);
1125
        else if (isNaN(i) || (i == Math.floor(i) && i < this.items.length) ) this.moveToIndex(i);
1126
        else this.moveToPosition(i);
1127
    }, 
1128
1129
    /*
1130
     * initializes item and adds it at index position
1131
     */
1132
    addItem: function(el, index) {
1133
        if (typeof index == "string") {
1134
            switch (index) {
1135
                case "first":
1136
                case "start":
1137
                    index = 0;
1138
                    break;
1139
                case "last":
1140
                case "end":
1141
                    index = this.itemsLastIndex + 1;
1142
                    break;
1143
                default:
1144
                    index = this._getIndexByKeyWord(index);
1145
            }
1146
        }
1147
1148
        index = Math.max(index, 0);
1149
        index = Math.min(index, this.itemsLastIndex + 1);
1150
        
1151
        this.Flow.appendChild(el);
1152
1153
        /* init item after insertion. that way it's part of the document and all styles are applied */
1154
        var item = new ContentFlowItem(this, el, index);
1155
        if (this.items.length == 0 ) {
1156
            if (this.conf.circularFlow) {
1157
                item.pre = item;
1158
                item.next = item;
1159
            }
1160
        }
1161
        else {
1162
            if (index == this.itemsLastIndex + 1) {
1163
                item.pre = this.items[this.itemsLastIndex];
1164
                item.next = item.pre.next;
1165
            }
1166
            else {
1167
                item.next = this.items[index];
1168
                item.pre = item.next.pre;
1169
            }
1170
            if (item.pre) item.pre.next = item;
1171
            if (item.next) item.next.pre = item;
1172
        }
1173
        this.items.splice(index,0, item);
1174
1175
        /* adjust item indices */
1176
        for (var i = index; i < this.items.length; i++) {
1177
            this.items[i].setIndex(i);
1178
        }
1179
        this._setLastIndex();
1180
1181
        /* adjust targetItem, currentPos so that current view does not change*/
1182
        if (Math.round(this._getPositionByIndex(index)) <= Math.round(this._targetPosition)) {
1183
            this._targetPosition++;
1184
            if (!this.conf.circularFlow)
1185
                this._targetPosition = Math.min(this._targetPosition, this.itemsLastIndex);
1186
        } 
1187
        if (this._getPositionByIndex(index) <= this._currentPosition) {
1188
            this._currentPosition++;
1189
            if (!this.conf.circularFlow)
1190
                this._currentPosition = Math.min(this._currentPosition, this.itemsLastIndex);
1191
        }
1192
        
1193
        // avoid display errors (wrong sizing)
1194
        var CF = this;
1195
        window.setTimeout(function () {
1196
            if(CF.items.length == 1 ) {
1197
                CF._currentPosition = -0.01;
1198
                CF._targetPosition = 0;
1199
                CF.resize(); 
1200
            }
1201
            else {
1202
                CF._initStep();
1203
            }
1204
        }, 100);
1205
1206
        return index;
1207
        
1208
    },
1209
        
1210
    /*
1211
     * removes item at index position, cleans it up and returns it
1212
     */
1213
    rmItem: function(index) {
1214
        if  (index == "undefined") index = this._activeItem.index;
1215
        index = this._getIndexByKeyWord(index);
1216
        if (!this.items[index]) return null;
1217
1218
        var item = this.items[index];
1219
1220
        if (item.pre) item.pre.next = item.next;
1221
        if (item.next) item.next.pre = item.pre;
1222
        this.items.splice(index,1);
1223
1224
        /* adjust item indices */
1225
        for (var i = index ; i < this.items.length; i++) {
1226
            this.items[i].setIndex(i);
1227
        }
1228
        this._setLastIndex();
1229
        
1230
        /* adjust targetItem, currentPos and activeItem so that current view does not change*/
1231
        if (Math.round(this._getPositionByIndex(index)) < Math.round(this._targetPosition)) {
1232
            this._targetPosition--;
1233
            if (!this.conf.circularFlow)
1234
                this._targetPosition = this._checkIndex(this._targetPosition);
1235
        }
1236
        if (this._getPositionByIndex(index) < this._currentPosition) {
1237
            this._currentPosition--;
1238
            if (!this.conf.circularFlow)
1239
                this._currentPosition = this._checkIndex(this._currentPosition);
1240
        }
1241
        this._activeItem = this._getItemByPosition(this._currentPosition);
1242
1243
        /* remove item from DOM tree, take the next step and return removed item  */
1244
        var removedItem = item.element.parentNode.removeChild(item.element);
1245
        // avoid display errors (wrong sizing)
1246
        var CF = this;
1247
        window.setTimeout(function () { CF._initStep() }, 10);
1248
        return removedItem;
1249
1250
    },
1251
1252
1253
    /*
1254
     * ==================== initialization ====================
1255
     */
1256
    
1257
1258
    /* -------------------- main init -------------------- */
1259
    _init: function () {
1260
1261
        if (typeof(this.Container) == 'string') { // no node
1262
            var container = document.getElementById(this.Container);
1263
            if (container) {
1264
                this.Container = container;
1265
            } else {
1266
                throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!');
1267
                return;
1268
            }
1269
        }
1270
        
1271
        /* ----------  reserve CSS namespace */
1272
1273
        $CF(this.Container).addClassName('ContentFlow');
1274
1275
        /* ---------- detect GUI elements */
1276
        var flow = $CF(this.Container).getChildrenByClassName('flow')[0];
1277
        if (!flow) {
1278
            throw ('ContentFlow ERROR: No element with class\'flow\' found!');
1279
            return;
1280
        }
1281
        this.Flow = new ContentFlowGUIElement(this, flow);
1282
1283
        var scrollbar = this.Container.getChildrenByClassName('scrollbar')[0];
1284
        if (scrollbar) {
1285
            this.Scrollbar = new ContentFlowGUIElement(this, scrollbar);
1286
            var slider = this.Scrollbar.getChildrenByClassName('slider')[0];
1287
            if (slider) {
1288
                this.Slider = new ContentFlowGUIElement(this, slider);
1289
                var position = this.Slider.getChildrenByClassName('position')[0];
1290
                if (position) {
1291
                    this.Position = new ContentFlowGUIElement(this, position);
1292
                }
1293
            }
1294
1295
        }
1296
1297
        /* ----------  init configuration */ 
1298
        this.setConfig(this._defaultConf);
1299
        this._initAddOns(); /* init AddOns */
1300
        this.setConfig(this._userConf);
1301
        
1302
        this._initSizes(); // ......
1303
1304
1305
        /* ---------- init item lists ---------- */
1306
        var items = this.Flow.getChildrenByClassName('item');
1307
1308
        this.items = new Array();
1309
        for (var i=0; i<items.length; i++) {
1310
            var item = this.items[i] = new ContentFlowItem(this, items[i], i);
1311
            if (i > 0) { 
1312
                item.pre = this.items[i-1];
1313
                item.pre.next = item;
1314
            }
1315
        }
1316
        this._setLastIndex();
1317
        if (this.conf.circularFlow && this.items.length > 0) {
1318
            var s = this.items[0];
1319
            s.pre = this.items[this.items.length-1];
1320
            s.pre.next = s;
1321
        }
1322
1323
        /* ----------  init GUI */
1324
        this._initGUI();
1325
1326
        /* ---------- init start parameters ---------- */
1327
        if (this._activeElement != "content")
1328
            this._activeElement = "element";
1329
1330
        if (this.conf.visibleItems < 0)
1331
            this.conf.visibleItems = Math.round(Math.sqrt(this.items.length));
1332
        this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1);
1333
1334
        this._targetPosition = this._getIndexByKeyWord(this.conf.startItem, 0);
1335
1336
        var index = this._getIndexByKeyWord(this.conf.scrollInFrom, this._targetPosition);
1337
        switch (this.conf.scrollInFrom) {
1338
            case "next":
1339
            case "right":
1340
                index -= 0.5;
1341
                break;
1342
            case "pre":
1343
            case "previous":
1344
            case "left":
1345
                index += 0.5;
1346
                break;
1347
        } 
1348
        this._currentPosition = index;
1349
        
1350
1351
        /* ---------- wait till all images are loaded or 
1352
         * grace time is up to show all and take the first step  
1353
        */
1354
        var now = new Date();
1355
        var cf = this;
1356
        var timer = window.setInterval (
1357
            function() {
1358
                if ( cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout ) {
1359
                    clearInterval(timer);
1360
1361
                    cf._activeItem = cf.getItem(cf._currentPosition);
1362
                    if (cf._activeItem) {
1363
                        cf._activeItem.makeActive();
1364
                        cf._setCaptionLabel(cf._activeItem.index);
1365
                    }
1366
                    
1367
                    cf.Flow.style.visibility = "visible"; // show flow after images are loaded
1368
                    if (cf.loadIndicator) cf.loadIndicator.style.display = "none";
1369
                    if (cf.Scrollbar) cf.Scrollbar.style.visibility = "visible";
1370
1371
                    cf.resize();
1372
                    for (var i=0; i < cf._loadedAddOns.length; i++) {
1373
                        var a = ContentFlowGlobal.AddOns[cf._loadedAddOns[i]];
1374
                        if (a.methods.afterContentFlowInit)
1375
                            a.methods.afterContentFlowInit(cf);
1376
                    }
1377
                    cf.conf.onInit();
1378
                }
1379
            }, 10
1380
        );
1381
        
1382
        this.isInit = true;
1383
1384
    },
1385
    
1386
    /* ---------- init AddOns ---------- */ 
1387
    _initAddOns: function () {
1388
1389
        // get an array of names of all AddOns that should be used
1390
        var loadAddOns = [];
1391
        if (this._userConf.useAddOns) {
1392
            if (typeof this._userConf.useAddOns == "string") {
1393
                loadAddOns = this._userConf.useAddOns.split(" ");
1394
            }
1395
            else if (typeof this._userConf.useAddOns == "array") {
1396
                loadAddOns = this._userConf.useAddOns;
1397
            }
1398
        }
1399
        else if (this.Container.getAttribute("useAddOns")) {
1400
            loadAddOns = this.Container.getAttribute("useAddOns").split(" ");
1401
        }
1402
        else {
1403
            loadAddOns = this.conf.useAddOns.split(' ');
1404
        }
1405
1406
1407
        // check the names for keywords
1408
        for (var i=0; i<loadAddOns.length; i++) {
1409
            if (loadAddOns[i] == "none") {
1410
                loadAddOns = new Array();
1411
                break;
1412
            }
1413
            else if (loadAddOns[i] == "all") {
1414
                loadAddOns = new Array();
1415
                for (var AddOn in ContentFlowGlobal.AddOns)
1416
                    loadAddOns.push(AddOn);
1417
                break;
1418
            }
1419
        }
1420
1421
        // init all AddOns that should be used and exist
1422
        for (var i=0; i<loadAddOns.length; i++) {
1423
            var AddOn = ContentFlowGlobal.AddOns[loadAddOns[i]];
1424
            if (AddOn) {
1425
                this._loadedAddOns.push(loadAddOns[i]);
1426
                AddOn._init(this);
1427
                this.Container.addClassName('ContentFlowAddOn_'+AddOn.name);
1428
                if (AddOn.methods.onloadInit)
1429
                    AddOn.methods.onloadInit(this);
1430
            }
1431
        }
1432
1433
    },
1434
1435
1436
    _initGUI: function () {
1437
        
1438
        // resize
1439
        //if (!this.Browser.iPhone) {
1440
            var resize = this.resize.bind(this);
1441
            window.addEvent('resize', resize, false);
1442
        //}
1443
        //else {
1444
            //var g = this;
1445
            //window.addEvent('resize', function () {
1446
                //g._initSizes();
1447
                //g._initStep();
1448
            //} , false);
1449
        //}
1450
        
1451
        // pre and next buttons
1452
        var divs = this.Container.getElementsByTagName('div');
1453
        for (var i = 0; i < divs.length; i++) {
1454
            if ($CF(divs[i]).hasClassName('preButton')) {
1455
                var pre = divs[i];
1456
                var mt = this.conf.onclickPreButton;
1457
                pre.addEvent('click', mt, false);
1458
            }
1459
            else if (divs[i].hasClassName('nextButton')) {
1460
                var next = divs[i];
1461
                var mt = this.conf.onclickNextButton;
1462
                next.addEvent('click', mt, false);
1463
            }
1464
        }
1465
1466
        // Container object
1467
        // mousewheel
1468
        if (this.conf.scrollWheelSpeed != 0) {
1469
            var wheel = this._wheel.bind(this);
1470
            if(window.addEventListener) this.Container.addEventListener('DOMMouseScroll', wheel, false);
1471
            this.Container.onmousewheel = wheel;
1472
        }
1473
1474
        // key strokes
1475
        var key = this._keyStroke.bind(this);
1476
        if (this.conf.keys && !this.Browser.iPhone) {
1477
            if (document.addEventListener) {
1478
                if (!this.Browser.Opera) {
1479
                    var mouseoverCheck = document.createElement('div');
1480
                    mouseoverCheck.addClassName('mouseoverCheckElement');
1481
                    this.Container.appendChild(mouseoverCheck);
1482
1483
                    if (this.Browser.WebKit) {
1484
                        document.body.addEvent('keydown',  function (event) {
1485
                            if (mouseoverCheck.offsetLeft > 0) key(event) ;
1486
                        });
1487
                    } else {
1488
                        window.addEvent('keydown',  function (event) {
1489
                            if (mouseoverCheck.offsetLeft > 0) key(event) ;
1490
                        });
1491
                    }
1492
                } 
1493
                else {
1494
                    this.Container.addEvent('keydown', key);
1495
                }
1496
            }
1497
            else {
1498
               this.Container.onkeydown = key;
1499
            }
1500
        }
1501
1502
1503
        // Flow object
1504
        if (this.conf.flowDragFriction > 0) {
1505
            var onDrag = function (event) {
1506
                var e = event;
1507
                if (event.touches) e = event.touches[0];
1508
                var mouseX = e.clientX;
1509
                var mouseY = e.clientY;
1510
                
1511
                if (this.conf.verticalFlow) {
1512
                    var dist = mouseY - this.Flow.mouseY; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
1513
                    var dim = this.Flow.dimensions.height;
1514
                }
1515
                else {
1516
                    var dist = mouseX - this.Flow.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast
1517
                    var dim = this.Flow.dimensions.width;
1518
                }
1519
                var itemDist = (dist / dim )* (2*this.conf.visibleItems +1); // items
1520
                var target = this._currentPosition - itemDist * 2*this.conf.visibleItems / this.conf.flowDragFriction ;
1521
1522
                this.Flow.mouseX = mouseX; 
1523
                this.Flow.mouseY = mouseY; 
1524
1525
                this.moveToPosition(target, true);
1526
            }.bind(this);
1527
1528
            var beforeDrag = function () {};
1529
1530
            var afterDrag = function (event) {
1531
                var t = Math.round(this._targetPosition);
1532
                if (Math.abs( t - this._currentPosition) > 0.001 )
1533
                    this.moveToPosition(t);
1534
            }.bind(this);
1535
1536
1537
            this.Flow.makeDraggable(onDrag, beforeDrag, afterDrag);
1538
        }
1539
1540
        // Scrollbar Object
1541
        if (this.Scrollbar) {
1542
            var click = function(event) {
1543
                if (!event) var event = window.event;
1544
1545
                if (!this.Scrollbar.clickLocked) {
1546
                    var mouseX = event.clientX; 
1547
                    var positionOnScrollbar = mouseX - this.Scrollbar.position.left;
1548
                    var targetIndex = Math.round(positionOnScrollbar/this.Scrollbar.dimensions.width * this.itemsLastIndex);
1549
                    this.moveToIndex(targetIndex);
1550
                }
1551
                else
1552
                    this.Scrollbar.clickLocked = false;
1553
            }.bind(this);
1554
            this.Scrollbar.addObserver('click', click);
1555
        }
1556
1557
        // Slider Object
1558
        if (this.Slider) {
1559
1560
            if (this.Browser.IE6) {
1561
                var virtualSlider = document.createElement('div');
1562
                virtualSlider.className = 'virtualSlider';
1563
                this.Slider.appendChild(virtualSlider);
1564
            }
1565
1566
            // position slider on scrollbar
1567
            this.Slider.setPosition = function (relPos) {
1568
                relPos = relPos - Math.floor(relPos) + this._getIndexByPosition(Math.floor(relPos));
1569
                if (Math.round(relPos) < 0)
1570
                    relPos = this.itemsLastIndex;
1571
                else if (relPos <= 0)
1572
                    relPos = 0;
1573
                else if (Math.round(relPos) > this.itemsLastIndex)
1574
                    relPos = 0;
1575
                else if (relPos >= this.itemsLastIndex)
1576
                    relPos = this.itemsLastIndex;
1577
1578
1579
                if (this.items.length > 1) {
1580
                    var sPos = (relPos / this.itemsLastIndex)* this.Scrollbar.dimensions.width;
1581
                } else {
1582
                    var sPos = 0.5 * this.Scrollbar.dimensions.width;
1583
                }
1584
                this.Slider.style.left = sPos - this.Slider.center.x+ "px";
1585
                this.Slider.style.top = this.Scrollbar.center.y - this.Slider.center.y +"px";
1586
1587
            }.bind(this);
1588
1589
            // make slider draggable
1590
            var beforeDrag = function (event) {
1591
                this.Scrollbar.clickLocked = true;
1592
            }.bind(this);
1593
1594
            var onDrag = function (event) {
1595
                var e = event;
1596
                if (event.touches) e = event.touches[0];
1597
                var selectedIndex = this._checkIndex((e.clientX - this.Scrollbar.position.left) / this.Scrollbar.dimensions.width * this.itemsLastIndex);
1598
                this._targetPosition = this._getPositionByIndex(selectedIndex);
1599
                this.Slider.setPosition(selectedIndex);
1600
                if (this.Position) this.Position.setLabel(selectedIndex);
1601
                this._initStep(true, true);
1602
            }.bind(this);
1603
1604
            var afterDrag = function (event) {
1605
                this._targetPosition = Math.round(this._targetPosition);
1606
                this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));
1607
                this._initStep(true);
1608
            }.bind(this);
1609
1610
            this.Slider.makeDraggable(onDrag, beforeDrag, afterDrag);
1611
        }
1612
1613
                
1614
        // Position object
1615
        if (this.Position) {
1616
            this.Position.setLabel = function (index) {
1617
                index = this._checkIndex(Math.round(index));
1618
                if (this.items && this.items[index].label)
1619
                    this.Position.innerHTML = this.items[index].label.innerHTML;
1620
                else
1621
                    this.Position.innerHTML = index + 1;
1622
            }.bind(this);
1623
        }
1624
1625
1626
        this.globalCaption = this.Container.getChildrenByClassName('globalCaption')[0];
1627
        this.loadIndicator = this.Container.getChildrenByClassName('loadIndicator')[0];
1628
    },
1629
1630
    /* ---------- init element sizes ---------- */ 
1631
    _initSizes: function (x) {
1632
        //if (this.Browser.Konqueror4 && x != true) {
1633
            //var t = this;
1634
            //window.setTimeout( function () { t._initSizes(true) }, 0);
1635
            //return;
1636
        //}
1637
1638
        // sets this.maxHeight
1639
        this._initMaxHeight();
1640
1641
        var scrollbarHeight = this._initScrollbarSize();
1642
1643
        // reduce maxHeit if container has a fixed height
1644
        if (!this.conf.verticalFlow && this.Container.style.height && this.Container.style.height != "auto")
1645
            this.maxHeight -= scrollbarHeight; 
1646
1647
        if (!this._activeItem) return;
1648
1649
        var mFS = this._findBiggestItem();
1650
1651
        var pF = this.Flow.findPos();
1652
1653
        /* set height / width of flow */
1654
        if (this.conf.verticalFlow) {
1655
            this.Flow.style.width = mFS.width.width+"px";
1656
            this.Flow.style.height =3* mFS.width.width * (1 + this.conf.reflectionHeight + this.conf.reflectionGap) + "px";
1657
        } else {
1658
            this.Flow.style.height = mFS.height.height +(mFS.height.top - pF.top)+"px";
1659
        }
1660
1661
        /* remove gap */
1662
        var s = this.conf.verticalFlow ? mFS.width.width : mFS.height.height;
1663
        var cH = s /(1 + this.conf.reflectionHeight + this.conf.reflectionGap);
1664
        this.Flow.style.marginBottom = - (s - cH)+ "px";
1665
1666
        this.Flow.dimensions = this.Flow.getDimensions();
1667
1668
        if (!this.Browser.IE6) {
1669
            if (this.conf.verticalFlow && this.Container.clientWidth < this.Flow.dimensions.width) {
1670
                //this.Container.style.width = this.Flow.dimensions.width+"px";
1671
            }
1672
            else if (this.Container.clientHeight < this.Flow.dimensions.height) {
1673
                this.Container.style.height = this.Flow.dimensions.height+"px";
1674
            }
1675
        }
1676
1677
        if (this.conf.verticalFlow) {
1678
           this.Flow.center = {x: this.Flow.dimensions.height/2, y:mFS.width.width/2};
1679
        } else {
1680
           this.Flow.center = {x: this.Flow.dimensions.width/2, y:mFS.height.height/2};
1681
        }
1682
1683
    },
1684
1685
    /* -------------------------------------------------------------------------------- */
1686
1687
    _initScrollbarSize: function () {
1688
        var SB;
1689
        var SL;
1690
        var PO;
1691
        if (SB = this.Scrollbar) {
1692
            SB.setDimensions();
1693
            var scrollbarHeight = SB.dimensions.height;
1694
1695
            if (SL = this.Slider) {
1696
                SL.setDimensions();
1697
                scrollbarHeight += SL.dimensions.height;
1698
1699
                if (PO = this.Position) {
1700
                    
1701
                    var oldLabel = PO.innerHTML;
1702
                    var maxH = maxW = 0;
1703
                    PO.style.width = "auto";
1704
1705
                    if (this.items) {
1706
                        for (var i=0; i < this.items.length; i++) {
1707
                            var item = this.items[i];
1708
                            if (item.label) {
1709
                                PO.innerHTML = item.label.innerHTML;
1710
                            }
1711
                            else {
1712
                                PO.innerHTML = item.index;
1713
                            }
1714
                            var h = PO.clientHeight;
1715
                            var w = PO.clientWidth;
1716
                            if ( h >  maxH) maxH = h;
1717
                            if ( w >  maxW) maxW = w;
1718
                        }
1719
                    }
1720
                    else {
1721
                        PO.innerHTML = "&nbsp;";
1722
                        maxH = PO.clientHeight;
1723
                        maxW = PO.clientWidth;
1724
                    }
1725
1726
                    PO.innerHTML = oldLabel;
1727
1728
                    PO.setDimensions();
1729
1730
                    PO.style.width = maxW +"px";
1731
                    PO.style.left = (SL.dimensions.width - maxW)/2 + "px";
1732
1733
                    var extraSpace = PO.position.top - SL.position.top;
1734
                    if (extraSpace > 0) {
1735
                        extraSpace += -SB.dimensions.height + maxH;
1736
                        SB.style.marginBottom = extraSpace + "px";
1737
                    }
1738
                    else {
1739
                        extraSpace *= -1;
1740
                        SB.style.marginTop = extraSpace + "px";
1741
                    }
1742
                    scrollbarHeight += extraSpace;
1743
                }
1744
            }
1745
        }
1746
        else {
1747
            scrollbarHeight = 0;
1748
        }
1749
1750
        return scrollbarHeight;
1751
1752
    },
1753
1754
    /* -------------------------------------------------------------------------------- */
1755
1756
    _initMaxHeight: function () {
1757
1758
        if (this.conf.verticalFlow) {
1759
            var proportion = screen.width/screen.height;
1760
            var Csd = this.Container.style.width;
1761
            var Cdim = this.Container.clientWidth;
1762
            var Fsd = this.Flow.style.width;
1763
            var Fdim = this.Flow.clientWidth;
1764
            var Fdim_o = this.Flow.clientHeight;
1765
        } else {
1766
            var proportion = screen.height/screen.width;
1767
            var Csd = this.Container.style.height;
1768
            var Cdim = this.Container.clientHeight;
1769
            var Fsd = this.Flow.style.height;
1770
            var Fdim = this.Flow.clientHeight;
1771
            var Fdim_o = this.Flow.clientWidth;
1772
        }
1773
1774
        // set height of container and flow
1775
        if (this.ContainerOldDim) 
1776
            Csd = this.ContainerOldDim;
1777
        if (this.FlowOldDim) 
1778
            Fsd = this.FlowOldDim;
1779
1780
        this.ContainerOldDim = "auto";
1781
        this.FlowOldDim = "auto";
1782
        
1783
1784
        /* calc maxHeight */
1785
        if (this.conf.maxItemHeight <= 0) {
1786
1787
            this.maxHeight = Fdim_o / 3 * proportion/1 * this.conf.scaleFactor;  // divided by 3 because of left/center/right, yes it's a magic number
1788
1789
            if (this.conf.verticalFlow && (this.maxHeight == 0 || this.maxHeight > Fdim)) {
1790
                this.maxHeight = Fdim;
1791
            }
1792
1793
            if (Csd && Csd != "auto") {
1794
                var gap = this.conf.verticalFlow  ? 0 : this.conf.reflectionGap;
1795
                var rH = this.conf.verticalFlow  ? 0 : this.conf.reflectionHeight;
1796
                this.maxHeight = Cdim/ (this.conf.scaleFactor* (1 + rH + gap)); 
1797
                this.ContainerOldDim = Csd;
1798
            }
1799
            else if (Fsd && Fsd != "auto") {
1800
                var gap = this.conf.verticalFlow  ? 0 : this.conf.reflectionGap;
1801
                this.maxHeight = Fdim / (this.conf.scaleFactor* (1 + this.conf.reflectionHeight + gap));
1802
                this.FlowOldDim = Fsd;
1803
            }
1804
        }
1805
        else {
1806
            this.maxHeight = this.conf.maxItemHeight;
1807
        }
1808
    },
1809
1810
    /* -------------------------------------------------------------------------------- */
1811
1812
    _findBiggestItem: function () {
1813
1814
        var currentItem = this._activeItem;
1815
1816
        var itemP = currentItem.pre;
1817
        var itemN = currentItem.next;
1818
        var mFS = maxFlowSize = {
1819
            width: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 },
1820
            height: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 }
1821
        }
1822
1823
1824
        var checkMax = function (item, rI) {
1825
            var el = item.element;
1826
            el.style.display = "block";
1827
            var p = el.findPos();
1828
            var h =  el.clientHeight;
1829
            var w = el.clientWidth;
1830
            if (h + p.top >= mFS.height.height + mFS.height.top) {
1831
                mFS.height.height = h;
1832
                mFS.height.top = p.top;
1833
                mFS.height.item = item;
1834
                mFS.height.rI = rI;
1835
            }
1836
            if (w + p.left >= mFS.width.width + mFS.width.left) {
1837
                mFS.width.width = w;
1838
                mFS.width.left = p.left;
1839
                mFS.width.item = item;
1840
                mFS.width.rI = rI;
1841
            }
1842
            el.style.display = "none";
1843
        }
1844
1845
        var ocp = this._currentPosition;
1846
        this._currentPosition = this.conf.visibleItems+1;
1847
1848
        // find the position with highest y-value
1849
        for (var i=-this.conf.visibleItems; i <= this.conf.visibleItems; i++) {
1850
            currentItem.element.style.display = "none";
1851
            this._positionItem(currentItem, i);
1852
            checkMax(currentItem, i);
1853
        }
1854
1855
        // find the biggest item
1856
        var index = mFS.height.rI;
1857
        for (var i=0; i < this.items.length; i++) {
1858
            var item = this.items[i];
1859
            item.element.style.display = "none";
1860
            this._positionItem(item, index);
1861
            checkMax(item, index);
1862
        }
1863
1864
        this._currentPosition = ocp;
1865
1866
        return mFS
1867
    },
1868
1869
1870
1871
    /*
1872
     * ==================== Key strok ====================
1873
     */
1874
1875
    /*
1876
     * handles keystroke events
1877
     */
1878
    _keyStroke: function(event) {
1879
        if(!event) var event = window.event;
1880
1881
        if (event.which) {
1882
            var keyCode = event.which;
1883
        } else if (event.keyCode) {
1884
            var keyCode = event.keyCode;
1885
        }
1886
1887
        if (this.conf.keys[keyCode]) {
1888
            this.conf.keys[keyCode].bind(this)();
1889
            return Event.stop(event);
1890
        }
1891
        else {
1892
            return true;
1893
        }
1894
    },
1895
    
1896
    /*
1897
     * ==================== mouse wheel ====================
1898
     * Event handler for mouse wheel event
1899
     * http://adomas.org/javascript-mouse-wheel/
1900
     */
1901
1902
    _wheel: function (event) {
1903
        if (!event) var event = window.event; // MS
1904
        
1905
        var delta = 0;
1906
        if (event.wheelDelta) {
1907
            delta = event.wheelDelta/120; 
1908
        } else if (event.detail) {
1909
            delta = -event.detail/3;
1910
        }
1911
1912
        if (delta) {
1913
            var target = this._targetPosition ;
1914
            if (delta < 0 ) {
1915
                target += (1 * this.conf.scrollWheelSpeed);
1916
            } else {
1917
                target -= (1 * this.conf.scrollWheelSpeed);
1918
            } 
1919
            this.moveToPosition(Math.round(target));
1920
        }
1921
1922
        return Event.stop(event);
1923
    },
1924
1925
1926
    /*
1927
     * ==================== set global Caption ====================
1928
     */
1929
    _setGlobalCaption: function () {
1930
        if (this.globalCaption) {
1931
            this.globalCaption.innerHTML = '';
1932
            if(this._activeItem && this._activeItem.caption)
1933
                this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true));
1934
        }
1935
    },
1936
1937
    /*
1938
     * ==================== move items ====================
1939
     */
1940
1941
    /*
1942
     * intend to make a step 
1943
     */
1944
    _initStep: function (holdSlider, holdPos) {
1945
        if (this.Slider) {
1946
            if(holdSlider) {
1947
                this.Slider.locked = true;
1948
            } else {
1949
                this.Slider.locked = false;
1950
            }
1951
        }
1952
        this._holdPos = holdPos == true ? true : false;
1953
        if (!this._stepLock) {
1954
            this._stepLock = true;
1955
            this._step();
1956
        }
1957
    },
1958
1959
    /*
1960
     * make a step
1961
     */
1962
    _step: function () {
1963
1964
        var diff = this._targetPosition - this._currentPosition; 
1965
        var absDiff = Math.abs(diff);
1966
        if ( absDiff > 0.001) { // till activeItem is nearly at position 0
1967
1968
            this._currentPosition += this.conf.flowSpeedFactor * this.conf.calcStepWidth(diff, absDiff, this.items.length, this.conf.visibleItems);
1969
1970
            var AI = this.items[(this._getIndexByPosition(this._currentPosition))];
1971
1972
            if (AI && AI != this._activeItem) {
1973
                if (this._activeItem) this._activeItem.makeInactive();
1974
                this._activeItem = AI;
1975
                this._activeItem.makeActive();
1976
                this._setCaptionLabel(this._activeItem.index);
1977
                if (Math.abs(this._targetPosition - this._currentPosition) <= 0.5 ) this.conf.onReachTarget(this._activeItem);
1978
            }
1979
            
1980
            this._positionItems();
1981
1982
            var st = this._step.bind(this);
1983
            window.setTimeout(st,this._millisecondsPerStep);
1984
1985
        } else if (!this._holdPos) {
1986
            if (this.Slider) this.Slider.locked = false;
1987
            this._currentPosition = Math.round(this._currentPosition);
1988
            if(this.Position && !this.Slider.locked && this._activeItem) {
1989
                this._setCaptionLabel(this._activeItem.index);
1990
            }
1991
            this._positionItems();
1992
            this._stepLock = false;
1993
        } else {
1994
            this._stepLock = false;
1995
        }
1996
1997
        if (this.Slider && !this.Slider.locked) {
1998
            this.Slider.setPosition(this._currentPosition);
1999
        }
2000
    },
2001
    
2002
2003
2004
/* ------------------------------------------------------------------------------------------------------ */
2005
    
2006
    /*
2007
     * position items
2008
     */
2009
    _positionItems: function () {
2010
2011
        if (this._lastStart) {
2012
            var item = this._lastStart;
2013
            while (item) {
2014
                item.element.style.display="none";
2015
                item = item.next;
2016
                if (item == this._lastStart) break;
2017
                if (item && item.pre == this._lastEnd) break;
2018
            }
2019
        }
2020
        else {
2021
            this._lastStart = this._activeItem;
2022
        }
2023
2024
        if (!this._activeItem) return;
2025
        var currentItem = this._activeItem;
2026
        var itemP = currentItem.pre;
2027
        var itemN = currentItem.next;
2028
2029
        this._positionItem(currentItem, 0);
2030
        for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) {
2031
            if (itemP) {
2032
                this._positionItem(itemP, -i);
2033
                this._lastStart = itemP;
2034
                itemP = itemP.pre;
2035
            }
2036
            if (itemN) {
2037
                this._positionItem(itemN, i);
2038
                this._lastEnd = itemN;
2039
                itemN = itemN.next;
2040
            }
2041
        }
2042
2043
    },
2044
2045
    _positionItem: function (item, relativeIndex) {
2046
2047
        var conf = this.conf;
2048
        var vF = conf.verticalFlow;
2049
2050
        var els = item.element.style;
2051
        //els.display =" none";
2052
        //if (els.display != "none") return;
2053
2054
        /* Index and position relative to activeItem */
2055
        var p = item.position = this._currentPosition + relativeIndex;
2056
        var relativePosition = item.relativePosition = Math.round(p) - this._currentPosition;
2057
        var relativePositionNormed = item.relativePositionNormed = conf.visibleItems > 0 ? relativePosition/conf.visibleItems : 0;
2058
        var side = relativePosition < 0 ? -1 : 1;
2059
        side *= relativePosition == 0 ? 0 : 1;
2060
        item.side = side;
2061
2062
        var size = conf.calcSize(item);
2063
        size.height = Math.max(size.height, 0);
2064
        size.width = Math.max(size.width, 0);
2065
        if (item.content.origProportion) size = this._scaleImageSize(item, size);
2066
        item.size = size;
2067
2068
        var coords = item.coordinates = conf.calcCoordinates (item);
2069
        var relItemPos = item.relativeItemPosition = conf.calcRelativeItemPosition(item);
2070
        var zIndex = item.zIndex = conf.calcZIndex (item);
2071
        var fontSize = item.fontSize = conf.calcFontSize (item);
2072
        var opacity = item.opacity = conf.calcOpacity(item);
2073
2074
        size.height *= this.maxHeight;
2075
        size.width *= this.maxHeight;
2076
2077
        /* set position */
2078
        var sA = vF ? size.height : size.width;
2079
        var sB = vF ? size.width : size.height;
2080
        var pX = this.Flow.center.x * ( 1 + coords.x )  + (relItemPos.x - 1)  * sA/2;
2081
        var pY = this.maxHeight/2 * ( 1 + coords.y ) + (relItemPos.y - 1 )* sB/2;
2082
        els.left = (vF ? pY : pX)+"px";
2083
        els.top = (vF ? pX : pY)+"px";
2084
        
2085
        this._setItemSize(item, size);
2086
2087
        /* set opacity */
2088
        if (conf.endOpacity != 1) {
2089
            this._setItemOpacity(item);
2090
        }
2091
2092
        /* set font size */
2093
        if (!this.Browser.IE) els.fontSize = (fontSize * 100) +"%";
2094
2095
        /* set z-index */
2096
        els.zIndex = 32768 + Math.round(zIndex * this.items.length); // just for FF
2097
2098
        conf.onDrawItem(item);
2099
2100
        els.visibility = "visible";
2101
        els.display = "block";
2102
    },
2103
2104
    _scaleImageSize: function (item, size, max) {
2105
        var sFL = this.conf.scaleFactorLandscape;
2106
        var sFP = this.conf.scaleFactorPortrait;
2107
        var vF = this.conf.verticalFlow;
2108
        var prop = item.content.origProportion;
2109
        var width = size.width;
2110
        var height = size.height;
2111
        var c = item.content;
2112
2113
        if (vF) {
2114
            if (prop <= 1) {
2115
                if (sFL != "max" && sFL != 1) {
2116
                    height *= sFL;
2117
                    width = Math.min(height * prop, max ? max : 1 );
2118
                }
2119
                height = width / prop;
2120
            }
2121
            else if (prop > 1) {
2122
                if (sFP == "max") {
2123
                    height = max ? max : 1;
2124
                }
2125
                else if (sFP != 1) {
2126
                    width *= sFP;
2127
                    height = Math.min(width/prop, max ? max : 1) 
2128
                }
2129
                else {
2130
                    height = width / prop;
2131
                }
2132
                width = height * prop;
2133
            }
2134
        }
2135
        else {
2136
            if (prop > 1) {
2137
                if (sFL != "max" && sFL != 1) {
2138
                    width *= sFL;
2139
                    height = Math.min(width / prop, max ? max : 1);
2140
                }
2141
                width = height * prop;
2142
            }
2143
            else if (prop <= 1) {
2144
                if (sFP == "max") {
2145
                    width = max ? max : 1;
2146
                } 
2147
                else if (sFP != 1) {
2148
                    height *= sFP;
2149
                    width = Math.min(height*prop, max ? max : 1);
2150
                }
2151
                else {
2152
                    width = height * prop;
2153
                }
2154
                height = width / prop;
2155
            }
2156
        }
2157
2158
        height = isNaN(height) ? 0 : height;
2159
        width = isNaN(width) ? 0 : width;
2160
2161
        if (!max && this.conf.fixItemSize) {
2162
2163
            var propS = size.width / size.height;
2164
2165
            var max = Math.max(size.width, size.height);
2166
            var s = this._scaleImageSize(item, {width: max, height: max}, max);
2167
2168
            if (propS < 1) {
2169
                height = s.height/size.height;
2170
                width = height * prop / propS;
2171
            }
2172
            else {
2173
                width = s.width/size.width;
2174
                height = width / prop * propS;
2175
            }
2176
2177
            var h = height * 100;
2178
            var w = width * 100;
2179
            var mL= (1 - width)/2 * 100;
2180
            var mT= ( 1 - height ) / propS * 100 * (vF ? 0.5 : 1 );
2181
            c.style.height = h+"%";
2182
            if (item.reflection) item.reflection.style.height = h*this.conf.reflectionHeight+"%";
2183
            c.style.width = w+"%";
2184
            if (item.reflection) item.reflection.style.width = w+"%";
2185
            c.style.marginLeft = mL+"%";
2186
            if (item.reflection) item.reflection.style.marginLeft = mL+"%";
2187
            c.style.marginTop = mT+"%";
2188
2189
            item.element.style.overflow = "hidden";
2190
2191
            return size;
2192
        }
2193
        else {
2194
            return {width: width, height: height};
2195
        }
2196
2197
    },
2198
2199
    _setItemSize: (function () {
2200
        if (ContentFlowGlobal.Browser.IE) {
2201
            var _setItemSize = function (item, size) {
2202
                if (!this.conf.fixItemSize) {
2203
                    item.content.style.height = size.height+"px";
2204
                }
2205
                else if (ContentFlowGlobal.Browser.IE6) {
2206
                    var h = parseInt(item.content.style.height)/100;
2207
                    item.content.style.height = size.height*h+"px"; 
2208
                    var mT = parseInt(item.content.style.marginTop)/100;
2209
                    item.content.style.marginTop = size.height*mT+"px";
2210
                }
2211
                if (item.reflection) {
2212
                    var h = parseInt(item.content.style.height);
2213
                    item.reflection.style.height = h*this.conf.reflectionHeight+"px";
2214
                    item.reflection.style.marginTop = h * this.conf.reflectionGap + "px";
2215
                }
2216
                item.element.style.width = size.width +"px";
2217
                item.element.style.height = size.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px";
2218
            }
2219
        }
2220
        else {
2221
            var _setItemSize = function (item, size) {
2222
                if (item.reflection) {
2223
                    item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
2224
                    item.reflection.style.marginTop = size.height * this.conf.reflectionGap + "px";
2225
                }
2226
                else if (this._reflectionWithinImage) {
2227
                    item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px";
2228
                }
2229
                else {
2230
                    item.element.style.height = size.height +"px";
2231
                }
2232
                item.element.style.width = size.width +"px";
2233
            }
2234
        }
2235
        return _setItemSize;
2236
2237
    })(),
2238
2239
    _setItemOpacity: (function () {
2240
            if (ContentFlowGlobal.Browser.IE6) {
2241
                var _setItemOpacity = function (item) { 
2242
                    if (item.content.origSrc && item.content.origSrc.match(/\.png$/) ) {
2243
                        var s = item.content.src;
2244
                        item.content.src = item.content.origSrc;
2245
                        item.content.style.filter = item.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
2246
                        item.content.src = s;
2247
                    }
2248
                    else {
2249
                        item.content.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")";
2250
                    }
2251
                    if (item.reflection) item.reflection.style.filter = item.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; 
2252
                }
2253
            }
2254
            else if (ContentFlowGlobal.Browser.IE) {
2255
                var _setItemOpacity = function (item) { item.element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; }
2256
            }
2257
            else {
2258
                var _setItemOpacity = function (item) { item.element.style.opacity = item.opacity; }
2259
            }
2260
            return  _setItemOpacity;
2261
    })()
2262
2263
2264
};
2265
2266
2267
/* ==================== extendig javascript/DOM objects ==================== */
2268
2269
/*
2270
 *  adds bind method to Function class
2271
 *  http://www.digital-web.com/articles/scope_in_javascript/
2272
 */
2273
2274
if (!Function.bind) {
2275
    Function.prototype.bind = function(obj) {
2276
        var method = this;
2277
        return function () {
2278
            return method.apply(obj, arguments);
2279
        };
2280
    };
2281
}
2282
2283
2284
/*
2285
 * extending Math object
2286
 */
2287
if (!Math.erf2) {
2288
    // error function (http://en.wikipedia.org/wiki/Error_function), implemented as erf(x)^2
2289
    Math.erf2 = function (x) {
2290
        var a = - (8*(Math.PI -3)/(3*Math.PI*(Math.PI -4)));
2291
        var x2 = x*x;
2292
        var f = 1 - Math.pow(Math.E, -x2 * (4/Math.PI + a*x2)/(1+a*x2));
2293
        return f;
2294
    };
2295
}
2296
2297
if (!Math._2PI05) {
2298
    Math._2PI05 = Math.sqrt(2*Math.PI);
2299
}
2300
2301
if (!Math.normDist) {
2302
    // normal distribution
2303
    Math.normDist = function (x, sig, mu) {
2304
        if (!sig) var sig = 1;
2305
        if (!mu) var mu = 0;
2306
        if (!x) var x = - mu;
2307
        return 1/(sig * Math._2PI05) * Math.pow(Math.E, - (x-mu)*(x-mu)/(2*sig*sig) );
2308
    };
2309
}
2310
2311
if (!Math.normedNormDist) {
2312
    Math.normedNormDist = function (x, sig, mu) {
2313
        return this.normDist(x, sig, mu)/this.normDist(mu, sig, mu);
2314
    };
2315
}
2316
2317
if (!Math.exp) {
2318
    Math.exp = function(x) {
2319
        return Math.pow(Math.E, x);
2320
    };
2321
}
2322
2323
if (!Math.ln) {
2324
    Math.ln = Math.log;
2325
}
2326
2327
if (!Math.log2) {
2328
    Math.log2 = function (x) {
2329
        return Math.log(x)/Math.LN2;
2330
    };
2331
}
2332
2333
if (!Math.log10) {
2334
    Math.log10 = function (x) {
2335
        return Math.log(x)/Math.LN10;
2336
    };
2337
}
2338
2339
if (!Math.logerithm) {
2340
    Math.logerithm = function (x, b) {
2341
        if (!b || b == Math.E)
2342
            return Math.log(x);
2343
        else if (b == 2)
2344
            return Math.log2(x);
2345
        else if (b == 10)
2346
            return Math.log10(x);
2347
        else
2348
            return Math.log(x)/Math.log(b);
2349
    };
2350
}
2351
2352
2353
/*
2354
 * extending Event object
2355
 */
2356
if (!Event) var Event = {};
2357
2358
if (!Event.stop) {
2359
    Event.stop = function (event) {
2360
        event.cancelBubble = true;
2361
        if (event.preventDefault) event.preventDefault();
2362
        if (event.stopPropagation) event.stopPropagation();
2363
        return false;
2364
    };
2365
}
2366
2367
/*
2368
 * extending Element object
2369
 */
2370
if (document.all && !window.opera) {
2371
    window.$CF = function (el) {
2372
        if (typeof el == "string") {
2373
            return window.$CF(document.getElementById(el));
2374
        }
2375
        else {
2376
            if (CFElement.prototype.extend && el && !el.extend) CFElement.prototype.extend(el);
2377
        }
2378
        return el;
2379
    };
2380
} else {
2381
    window.$CF = function (el) {
2382
        return el;
2383
    };
2384
}
2385
2386
if (!window.HTMLElement) {
2387
    CFElement = {};
2388
    CFElement.prototype = {};
2389
    CFElement.prototype.extend = function (el) {
2390
        for (var method in this) {
2391
            if (!el[method]) el[method] = this[method];
2392
        }
2393
    };
2394
}
2395
else {
2396
    CFElement = window.HTMLElement;
2397
}
2398
2399
2400
/*
2401
 * Thanks to Peter-Paul Koch
2402
 * http://www.quirksmode.org/js/findpos.html
2403
 */
2404
if (!CFElement.findPos) {
2405
    CFElement.prototype.findPos = function() {
2406
        var obj = this;
2407
        var curleft = curtop = 0;
2408
        try {
2409
            if (obj.offsetParent) {
2410
                curleft = obj.offsetLeft;
2411
                curtop = obj.offsetTop;
2412
                while (obj = obj.offsetParent) {
2413
                    curleft += obj.offsetLeft;
2414
                    curtop += obj.offsetTop;
2415
                }
2416
            }
2417
        }
2418
        catch (ex) {}
2419
        return {left:curleft, top:curtop};
2420
    };
2421
}
2422
2423
if (!CFElement.getDimensions) {
2424
    CFElement.prototype.getDimensions = function() {
2425
        return {width: this.clientWidth, height: this.clientHeight};
2426
    };
2427
}
2428
2429
/*
2430
 * checks if an element has the class className
2431
 */
2432
if (!CFElement.hasClassName) {
2433
    CFElement.prototype.hasClassName = function(className) {
2434
        return (new RegExp('\\b'+className+'\\b').test(this.className));
2435
    };
2436
}
2437
2438
/*
2439
 * adds the class className to the element
2440
 */ 
2441
if (!CFElement.addClassName) {
2442
    CFElement.prototype.addClassName = function(className) {
2443
        if(!this.hasClassName(className)) {
2444
           this.className += (this.className ? ' ':'') + className ;
2445
        }
2446
    };
2447
}
2448
2449
/*
2450
 * removes the class className from the element el
2451
 */ 
2452
if (!CFElement.removeClassName) {
2453
    CFElement.prototype.removeClassName = function(className) {
2454
        this.className = this.className.replace(new RegExp('\\b'+className+'\\b'), '').replace(/\s\s/g,' ');
2455
    };
2456
}
2457
2458
/*
2459
 * removes or adds the class className from/to the element el
2460
 * depending if the element has the class className or not.
2461
 */
2462
if (!CFElement.toggleClassName) {
2463
    CFElement.prototype.toggleClassName = function(className) {
2464
        if(this.hasClassName(className)) {
2465
            this.removeClassName(className);
2466
        } else {
2467
            this.addClassName(className);
2468
        }
2469
    };
2470
}
2471
2472
/*
2473
 * returns all children of element el, which have the class className
2474
 */
2475
if (!CFElement.getChildrenByClassName) {
2476
    CFElement.prototype.getChildrenByClassName = function(className) {
2477
        var children = new Array();
2478
        for (var i=0; i < this.childNodes.length; i++) {
2479
            var c = this.childNodes[i];
2480
            if (c.nodeType == 1 && $CF(c).hasClassName(className)) {
2481
                children.push(c);
2482
            }
2483
        }
2484
        return children;
2485
    };
2486
}
2487
2488
/*
2489
 * Browser independent event handling method.
2490
 * adds the eventListener  eventName to element el and attaches the function method to it.
2491
 */
2492
if (!CFElement.addEvent) {
2493
    CFElement.prototype.addEvent = function(eventName, method, capture) {
2494
        if (this.addEventListener)
2495
            this.addEventListener(eventName, method, capture);
2496
        else
2497
            this.attachEvent('on'+eventName, method);
2498
    };
2499
}
2500
   
2501
/*
2502
 * Browser independent event handling method.
2503
 * removes the eventListener  eventName with the attached function method from element el.
2504
 */
2505
if (!CFElement.removeEvent) {
2506
    CFElement.prototype.removeEvent = function(eventName, method, capture) {
2507
        if (this.removeEventListener)
2508
            this.removeEventListener(eventName, method, capture);
2509
        else
2510
            this.detachEvent('on'+eventName, method);
2511
    };
2512
}
2513
2514
/*
2515
 * Browser independent event handling method.
2516
 * adds the eventListener  eventName to element el and attaches the function method to it.
2517
 */
2518
if (!window.addEvent) {
2519
    window.addEvent = function(eventName, method, capture) {
2520
        if (this.addEventListener) {
2521
            this.addEventListener(eventName, method, capture);
2522
        } else {
2523
            if (eventName != 'load' && eventName != 'resize')
2524
                document.attachEvent('on'+eventName, method);
2525
            else
2526
                this.attachEvent('on'+eventName, method);
2527
        }
2528
    };
2529
}
2530
   
2531
/*
2532
 * Browser independent event handling method.
2533
 * removes the eventListener  eventName with the attached function method from element el.
2534
 */
2535
if (!window.removeEvent) {
2536
    window.removeEvent = function(eventName, method, capture) {
2537
        if (this.removeEventListener) {
2538
            this.removeEventListener(eventName, method, capture);
2539
        } else {
2540
            if (eventName != 'load' && eventName != 'resize')
2541
                document.detachEvent('on'+eventName, method);
2542
            else
2543
                this.detachEvent('on'+eventName, method);
2544
        }
2545
    };
2546
}
2547
2548
/* ==================== start it all up ==================== */
2549
ContentFlowGlobal.init();
2550
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/docu.html (+1018 lines)
Line 0 Link Here
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4
<head>
5
    <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
6
</head>
7
<body>
8
9
    <h1 id="title"><img src="title.png"/></h1>
10
    <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3>
11
12
    <ul id="menu">
13
        <li><a href="index.html">start</a></li>
14
        <li><a href="docu.html">documentation</a></li>
15
        <li><a href="changelog.html">changelog</a></li>
16
        <li><a href="license.html">license</a></li>
17
        <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li>
18
    </ul>
19
20
    <div class="maincontent">
21
22
<style>
23
    .tab {
24
        padding: 10px;
25
        border: 1px solid #222;
26
        float: left;
27
        font-size: 18px;
28
        background-color: #222;
29
        margin-right: 5px;
30
    }
31
32
    .tabItem {
33
        display: none; 
34
        border: 1px solid #222; 
35
        padding: 2em; 
36
        margin-bottom: 2em;
37
    }
38
</style>
39
<script>
40
    window.activeTab = null;
41
    window.activeTabs = [];
42
    function toggleTab(tabblock, tab) {
43
        var at = window.activeTabs[tabblock]
44
45
        at.style.borderBottomColor = "#222";
46
        at.style.backgroundColor = "#222";
47
        at.content.style.display = "none";
48
49
        window.activeTabs[tabblock] = tab;
50
        at = window.activeTabs[tabblock]
51
52
        at.style.borderBottomColor = "#000";
53
        at.style.backgroundColor = "#000";
54
        at.content.style.display = "block";
55
    }
56
    window.initTabs = [];
57
</script>
58
59
60
61
    <div class="maincontent">
62
63
    
64
        <div class="totop">
65
    <a href="" id="usageSub" onclick="return switchBlock('usage')">Usage</a>
66
    <a href="" id="optionsSub" onclick="return switchBlock('options')">Options</a>
67
    <a href="" id="methodsSub" onclick="return switchBlock('methods')">Methods</a>
68
    <a href="" id="objectsSub" onclick="return switchBlock('objects')">Objects</a>
69
    <a href="" id="keywordsSub" onclick="return switchBlock('keywords')">position Keywords</a>
70
</div>
71
72
            <div id="usageBlock" class="block">
73
        <div id="Usage" name="Usage"></div>
74
        
75
            <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;">
76
<a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="basicTab" class="tab" >Basic usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="advancedTab" class="tab" >Advanced usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="linksTab" class="tab" >Items as links</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="fullTab" class="tab" >Full usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="confTab" class="tab" >Configuration</div></a>        <div class="clear"></div>
77
    </div>
78
    <script>
79
       window.initTabs.push( function initTabs () {
80
            var t = ["basic","advanced","links","full","conf"];
81
            var tabs = [];
82
            for (var i=0; i<t.length; i++) {
83
                tabs[i] = document.getElementById(t[i]+"Tab");
84
                tabs[i].content = document.getElementById(t[i]);
85
            }
86
87
            if (tabs[0].content) {
88
                //window.activeTab = tabs[0];
89
                //toggleTab(tabs[0]);
90
                window.activeTabs['usage'] = tabs[0];
91
                toggleTab('usage', tabs[0]);
92
            }
93
       }
94
    );
95
96
    </script>
97
98
        <!-- BASIC USAGE -->
99
        <div id="basic" class="tabItem">
100
                    <ol>
101
                <li>
102
                    First extract all files in the same directory.
103
                    <ul>
104
                        <li>To run ContentFlow you only need : 'contentflow.js', 'contentflow.css' and the 'img' directory.</li>
105
                    </ul>
106
                </li>
107
108
                <div name="init" id="init"></div>
109
                <li>
110
                    Now load the ContentFlow script by adding the following code to the head of your html file:
111
                    <pre><code>
112
        &lt;script language="JavaScript" type="text/javascript" src="PATH/contentflow.js"&gt;&lt;/script&gt;
113
                    </code></pre>
114
                    Where PATH is the path to the directory where you extracted ContentFlow to.
115
                </li>
116
117
                <li>
118
                Create the needed (X)HTML structure. The minimal (X)HTML structure needed is something like this:
119
                <pre><code>
120
        &lt;div class="ContentFlow"&gt;
121
            &lt;div class="loadIndicator"&gt;&lt;div class="indicator"&gt;&lt;/div&gt;&lt;/div&gt;
122
            &lt;div class="flow"&gt;
123
                &lt;img class="item" src="someImageFile.jpg" title="Your_Image_Title"/&gt;
124
                <b>&lt;!-- <i>Add as many items as you like.</i> --&gt;</b>
125
            &lt;/div&gt;
126
            &lt;div class="globalCaption"&gt;&lt;/div&gt;
127
            &lt;div class="scrollbar"&gt;&lt;div class="slider"&gt;&lt;div class="position"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
128
        &lt;/div&gt;
129
                </code></pre>
130
            </li>
131
132
            <li>
133
                That's it. Nothing more to do.
134
            </li>
135
            </ol>
136
        </div>
137
138
        <!-- ITEMS AS LINKS -->
139
        <div id="links" class="tabItem">
140
                    <p>To utilize an item as a link just add an href attribute to the item or the content tag like this:</p>
141
                <pre><code>
142
        &lt;div class="ContentFlow"&gt;
143
            &lt;div class="flow"&gt;
144
                &lt;div class="item" <b>href="YOUR_URL"</b>&gt;&lt;img class="content" src="someImageFile.jpg"/&gt;&lt;/div&gt;
145
            &lt;/div&gt;
146
        &lt;/div&gt;
147
                </code></pre>
148
149
                or even
150
151
                <pre><code>
152
        &lt;div class="ContentFlow"&gt;
153
            &lt;div class="flow"&gt;
154
                &lt;img class="item" <b>href="YOUR_URL"</b> src="someImageFile.jpg"/&gt;
155
            &lt;/div&gt;
156
        &lt;/div&gt;
157
                </code></pre>
158
159
            <p>To be standard compliant just use an anker-tag as the item tag:</p>  
160
                <pre><code>
161
        &lt;div class="ContentFlow"&gt;
162
            &lt;div class="flow"&gt;
163
                &lt;<b>a</b> class="item" href="YOUR_URL"&gt;&lt;img class="content" src="someImageFile.jpg"/&gt;&lt;/<b>a</b>&gt;
164
            &lt;/div&gt;
165
        &lt;/div&gt;
166
                </code></pre>
167
            <p><u>Beware:</u> <i><a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.2" target="_blank">In this case no element within the item may contain any ankors !!!</a></i></p>
168
169
            <p>You can even use the target attribute to open the link in a new window:</p>  
170
                <pre><code>
171
        &lt;div class="ContentFlow"&gt;
172
            &lt;div class="flow"&gt;
173
                &lt;a class="item" href="YOUR_URL" <b>target="_blank"</b> &gt;&lt;img class="content" src="someImageFile.jpg"/&gt;&lt;/a&gt;
174
            &lt;/div&gt;
175
        &lt;/div&gt;
176
                </code></pre>
177
        </div>
178
179
        <!-- ADVANCED USAGE -->
180
        <div id="advanced" class="tabItem">
181
                        <h3>Basic principles</h3>
182
                The direct usage of an image tag as an item is a simplified form of the default HTML structure and will be converted internally.
183
                <pre><code>
184
        &lt;img class="item" src="someImageFile.jpg" title="Your_Image_Title"/&gt;
185
                </code></pre>
186
                
187
                corresponds to
188
189
                <pre><code>
190
        &lt;div class="item"&gt;
191
            &lt;img class="content" src="someImageFile.jpg"/&gt;
192
            &lt;div class="caption"&gt;Your_Image_Title&lt;/div&gt;
193
        &lt;/div&gt;
194
                </code></pre>
195
196
                Not only images can be used as a content, but basicly any HTML elements you like.
197
198
                <p>
199
                ContentFlow is very flexible, so if you don't like having the <b>loadIndicator</b>, the <b>globalCaption</b> or the <b>scrollbar</b> just remove them.
200
                ContentFlow will utilize them if it detects them.<br/>
201
                So the very basic HTML structure is something like this:
202
                
203
                </p>
204
                <pre><code>
205
        &lt;div class="ContentFlow"&gt;
206
            &lt;div class="flow"&gt;
207
                &lt;img class="item" src="someImageFile.jpg"/&gt;
208
            &lt;/div&gt;
209
        &lt;/div&gt;
210
                </code></pre>
211
212
                <h3>What about styling?</h3>
213
                <p>
214
                    If you want to change some styling you can do this globaly. Just rename the file '<b>mycontentflow.css.example</b>' to '<b>mycontentflow.css</b>', make the changes you like and you are ready to go.<br/>
215
                    For example, if you have a white background, I already have done the work for you. Just use the  <a href="        addons.php        ">'<b>white</b>' AddOn</a>. To utilze it just download it, extract it into the same directory as '<b>contentflow.js</b>' and add the <b>load</b> attribute to the script tag:
216
                </p>
217
                    <code><pre>
218
219
        &lt;script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js" <b>load="<i>white</i>"</b>&gt;&lt;/script&gt;
220
                    </pre></code>
221
222
                    <h3>Configuration</h3>
223
                    <p>It's quite easy to change the <a href="            javascript: switchBlock('config','');
224
        ">configuration</a> of ContentFlow. 
225
                        If you just want to fiddle with the configuration the fastest way is to create a new ContentFlow object in javascript:
226
                    </p>
227
                    <pre><code>
228
        &lt;script&gt;
229
            var myNewFlow = new ContentFlow('myFantasicFlow', { OPTION_1: value_1, OPTION_2: value_2, ... , OPTION_N: value_N } ) ;
230
        &lt;/script&gt;
231
                    </code></pre>
232
233
                    <p>
234
                    So let's say you want to disable the reflection (set reflectionHeight to 0) and don't want the flow to wrap around at the end (set circularFlow to false).
235
                    You have to give the ContentFlow tag an id (let's call it 'myFantasicFlow') and insert the following script tag somewhere in your page:
236
                    </p>
237
                    <pre><code>
238
        &lt;script&gt;
239
            var myNewFlow = new ContentFlow('myFantasicFlow', { reflectionHeight: 0, circularFlow: false } ) ;
240
        &lt;/script&gt;
241
                    </code></pre>
242
        </div>
243
244
        <!-- FULL USAGE -->
245
        <div id="full" class="tabItem">
246
        
247
            <h3>Files</h3>
248
            <dl>
249
                <dt>mycontentflow.css.example</dt>
250
                <dd>This is an example file which will help you to style your ContentFlow globaly. Rename it to 'mycontentflow.css' to utilize it.  </dd>
251
                <dt>ContentflowAddOn_DEFAULT.js &amp; ContentflowAddOn_DEFAULT.css</dt>
252
                <dd>This are example files from which you can build your own <a href="        addons.php        ">AddOn</a>.</dt>
253
            </dl>
254
255
            <h3>Script tag</h3>
256
            <p>
257
                By adding the 'load' attribute to the script tag you can load one or more <a href="        addons.php        ">AddOn</a>. 
258
                The AddOns have to be given in the form of a space separated list and are loaded in the same order as given.
259
            </p>
260
261
            <pre><code>
262
        &lt;script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="SomeAddOnName SomeOtherAddOnName"</b> &gt;&lt;/script&gt;
263
            </code></pre>
264
265
            <p style="font-size:0.9em">
266
                Where PATH is the path to the directory where you extracted ContentFlow to.<br/>
267
                <i>'contentflow.js'</i> is a compressed (using <a href="http://developer.yahoo.com/yui/compressor/">yuicompressor</a>) version of <i>'contentflow_src.js'</i>. 
268
                If you run in any problem with the compressed version, just change <i>'contentflow.js'</i> to <i>'contentflow_src.js'</i> (and drop me note).
269
            </p>
270
271
272
            <h3>(X)HTML</h3>
273
            <div name="loader" id="loader"></div>
274
            <p>
275
                This code example shows all (X)HTML elements and element attributes ContentFlow knows about:
276
            </p>
277
            <pre><code>
278
        &lt;div id="myFantasticFlow" class="ContentFlow" useAddOns="AddOns1 AddOn2 ..."&gt;
279
            &lt;div class="loadIndicator"&gt;&lt;div class="indicator"&gt;&lt;/div&gt;&lt;/div&gt;
280
            
281
            &lt;div class="flow"&gt;
282
                &lt;div class="item" href="URL" target="TARGET" &gt;
283
                    &lt;img class="content" src="someImageFile.jpg" href="URL" target="TARGET" /&gt; 
284
                    &lt;div class="caption"&gt;foobar&lt;/div&gt;
285
                    &lt;div class="label"&gt;Slider Label&lt;/div&gt;
286
                &lt;/div&gt;
287
                <b>(<i>Add as many items as you like.</i>)</b>
288
            &lt;/div&gt;
289
290
            &lt;div class="globalCaption"&gt;&lt;/div&gt;
291
            &lt;div class="scrollbar"&gt;
292
                &lt;div class="preButton"&gt;&lt;/div&gt;
293
                &lt;div class="nextButton"&gt;&lt;/div&gt;
294
                &lt;div class="slider"&gt;&lt;div class="position"&gt;&lt;/div&gt;&lt;/div&gt;
295
            &lt;/div&gt;
296
        &lt;/div&gt;
297
            </code></pre>
298
            <p>
299
                The '<u>loadIndicator</u>', '<u>caption</u>', '<u>label</u>', '<u>globalCaption</u>', '<u>scrollbar</u>', '<u>preButton</u>', '<u>nextButton</u>', '<u>slider</u> and '<u>position</u>' elements are <u>optional</u>.
300
                ContentFlow will auto detect and utilize them if they exist.
301
            </p>
302
            <dl>
303
                <div name="useAddOns" id="useAddOns"></div>
304
                <dt>ContentFlow</dt>
305
                <dd>Main ContentFlow wrapper. All elements of class 'ContentFlow' will be initialized.<br/>
306
                    If style attribute 'height' is set, maxItemHeight will be set accordingly.<br/>
307
                    <i><b>If the attribute 'useAddOns' is given only the listed AddOns will be used for this ContentFlow.</b></i>
308
                </dd>
309
310
                <dt>flow</dt>
311
                <dd>Wrapper around all flow items.<br/>
312
                    If style attribute 'height' is set, maxItemHeight will be set accordingly.
313
                </dd> 
314
                <dl>
315
                    <div name="item" id="item"></div>
316
                    <dt>item</dt>
317
                    <dd>
318
                        If you want to use an item as a <b>link</b>, just add an <b>'href'</b> attribute to the <u>item</u> or it's <u>content</u>. A <b>'target'</b> attribute will be taken into account.
319
                    </dd>
320
                    <dl>
321
                        <dt>content</dt>
322
                        <dd>The actual content of an item. Can be anything.<br/>
323
                            If the content element is not an image, beware that the item itself will be scaled and <u>not</u> the content!
324
                        </dd>
325
                        <div name="caption" id="caption"></div>
326
                        <dt>caption<dt>
327
                        <dd>If exists will be used as the caption text of the item.<br/>
328
                            By default it is hidden and will be used for the global caption.<br/>
329
                            Can contain any HTML content.<br/>
330
                            To utilize the caption as a link, just make the whole caption a link (use an a-tag instead of a div-tag) or put a link inside it.
331
                        </dd>
332
                        <dt>label<dt>
333
                        <dd>
334
                            If exists and <u>position</u> element exists, it will be used as the position text label.<br/>
335
                            It's great to use the scrollbar as a timeline.
336
                        </dd>
337
                    </dl>
338
                </dl>
339
340
                <dt>loadIndicator<dt>
341
                <dd>If exists will show a loading indicator, while images are loaded.</dd>
342
343
                <dt>globalCaption<dt>
344
                <dd>If exists and caption element of active item exists will show the caption of the active item.</dd>
345
346
                <div name="scrollbar" id="scrollbar"></div>
347
                <dt>scrollbar<dt>
348
                <dd>If exists will show a clickable scrollbar.</dd>
349
                <dl>
350
                    <dt>slider<dt>
351
                    <dd>If exists will show a dragable  button on the slider.</dd>
352
                    <dl>
353
                        <dt>position<dt>
354
                        <dd>If exists will show position label. Defaults to the item number.</dd>
355
                    </dl>
356
                </dl>
357
358
                <div name="buttons" id="buttons"></div>
359
                <dt>preButton<dt>
360
                <dd>This element can be anywhere within the ContentFlow. If exists it will fire the onclickPreButton method.<br/>
361
                    By default it will move the flow to the previous item.
362
                </dd>
363
                <dt>nextButton<dt>
364
                <dd>This element can be anywhere within the ContentFlow. If exists it will fire the onclickNextButton method.<br/>
365
                    By default it will move the flow to the next item.
366
                </dd>
367
            </dl>
368
369
370
            <h3>Configuration</h3>
371
            <p>
372
                You can configure each ContentFlow independently or globally. Take a look at the 
373
                <a href="            javascript: switchBlock('config','');
374
        ">configuration</a>  and <a href="            javascript: switchBlock('options','');
375
        ">options</a> 
376
                descriptions for an explanation.
377
            </p>
378
379
        </div>
380
381
        <div id="conf" class="tabItem">
382
            
383
        <p>
384
        If you want to adjust ContentFlow to your needs you have two possibilities. First you can use an <a href="        addons.php        ">AddOn</a> or you can use a runtime configuration.
385
        </p>
386
387
        <!-- addon conf -->
388
        <h3>AddOn configuration</h3>
389
        I think, that is the more convenient method.
390
        <ol>
391
            <li>Copy the file 'ContentFlowAddOn_DEAFULT.js' to 'ContentFlowAddOn_MyAddOn.js'</li>
392
            <li>Change the name of the AddOn (first line of code in the AddOn file) to 'MyAddOn'</li>
393
            <li>Make the changes you like.</li>
394
            <li>
395
            Add the 'load' attribute to the script-tag which loads ContentFlow. Now add any AddOns you would like to use as a space separated list.<br/>
396
            It should now look like this:
397
            <pre><code>
398
    &lt;script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="MyAddOn"</b> &gt;&lt;/script&gt;
399
            </code></pre>
400
            </li>
401
            <li>Reload your page :-)</li>
402
        </ol>
403
404
        <!-- runtime conf -->
405
        <div name="runtime" id="runtime"></div>
406
        <h3>Runtime configuration</h3>
407
        <p>
408
            Create a new Object from the Class ContentFlow and pass the element containing the flow as its parameter, like this:
409
        </p>
410
        <pre><code>
411
    &lt;script language="JavaScript" type="text/javascript"&gt;
412
        var myNewFlow = new ContentFlow('myFantasicFlow'[, OPTIONS ]);
413
    &lt;/script&gt;
414
        </code></pre>
415
        <dl>
416
            <dt>OPTIONS</dt>
417
            <dd>is an optional <a href="            javascript: switchBlock('objects','#confObj');
418
        ">configuration data object</a> where co can define the <a href="            javascript: switchBlock('options','#options');
419
        ">options.</a></dd>
420
            <!--<dt>initOnLoad</dt>-->
421
            <!--<dd>is optional. If set to 'false' no auto initialization on 'window.load' will happen. You have to use the public method init() instead. <u>Default:</u> true</dd>-->
422
        </dl>
423
        </div>
424
425
426
    </div>
427
            <div id="configBlock" class="block">
428
        <h2>Configuration</h2>
429
        <p>
430
        If you want to adjust ContentFlow to your needs you have two possibilities. First you can use a <a href="        addons.php        ">AddOn</a> or you can use a runtime configuration.
431
        </p>
432
433
        <!-- addon conf -->
434
        <h3>AddOn configuration</h3>
435
        I think, that is the more convenient method.
436
        <ol>
437
            <li>Copy the file 'ContentFlowAddOn_DEAFULT.js' to 'ContentFlowAddOn_MyAddOn.js'</li>
438
            <li>Change the name of the AddOn (first line of code in the AddOn file) to 'MyAddOn'</li>
439
            <li>Make the changes you like.</li>
440
            <li>
441
            Add the 'load' attribute to the script-tag which loads ContentFlow. Now add any AddOns you would like to use as a space separated list.<br/>
442
            It should now look like this:
443
            <pre><code>
444
    &lt;script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="MyAddOn"</b> &gt;&lt;/script&gt;
445
            </code></pre>
446
            </li>
447
            <li>Reload your page :-)</li>
448
        </ol>
449
450
        <!-- runtime conf -->
451
        <div name="runtime" id="runtime"></div>
452
        <h3>Runtime configuration</h3>
453
        <p>
454
            Create a new Object from the Class ContentFlow and pass the element containing the flow as its parameter, like this:
455
        </p>
456
        <pre><code>
457
    var myNewFlow = new ContentFlow('myFantasicFlow'[, OPTIONS ]);
458
        </code></pre>
459
        <dl>
460
            <dt>OPTIONS</dt>
461
            <dd>is an optional <a href="            javascript: switchBlock('objects','#confObj');
462
        ">configuration data object</a> where you can define the <a href="            javascript: switchBlock('options','#options');
463
        ">options.</a></dd>
464
            <!--<dt>initOnLoad</dt>-->
465
            <!--<dd>is optional. If set to 'false' no auto initialization on 'window.load' will happen. You have to use the public method init() instead. <u>Default:</u> true</dd>-->
466
        </dl>
467
    </div>
468
            <div id="optionsBlock" class="block">
469
        
470
            <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;">
471
<a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="genericTab" class="tab" >Generic</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="itemsTab" class="tab" >Items</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="flowTab" class="tab" >Flow interaction</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="eventsTab" class="tab" >Events</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="calcTab" class="tab" >Calculations</div></a>        <div class="clear"></div>
472
    </div>
473
    <script>
474
       window.initTabs.push( function initTabs () {
475
            var t = ["generic","items","flow","events","calc"];
476
            var tabs = [];
477
            for (var i=0; i<t.length; i++) {
478
                tabs[i] = document.getElementById(t[i]+"Tab");
479
                tabs[i].content = document.getElementById(t[i]);
480
            }
481
482
            if (tabs[0].content) {
483
                //window.activeTab = tabs[0];
484
                //toggleTab(tabs[0]);
485
                window.activeTabs['options'] = tabs[0];
486
                toggleTab('options', tabs[0]);
487
            }
488
       }
489
    );
490
491
    </script>
492
<!--
493
        <p>The options can be given on manual object creation in the form of a <a href="            javascript: switchBlock('objects','#conf');
494
        ">data object</a>, set with the <a href="            javascript: switchBlock('methods','');
495
        ">setConfig method</a> or set within an AddOn.</p>
496
497
        <p>The following options can be used:</p>
498
-->
499
        <div id="generic" class="tabItem">
500
        <dl id="options" style="font-family: sans-serif">
501
            <div name="useAddOns" id="useAddOns"></div>
502
            <dt><span>useAddOns</span> := string | array (default: all)</dt>
503
            <dd>Addons this ContentFlow should use (all, none, [AddOn1, ... , AddOnN])</dd>
504
            <dt><span>loadingTimeout</span> := int (default: 30000)</dt>
505
            <dd>Grace time in milliseconds for images to load.</dd>
506
507
            <div name="circularFlow" id="circularFlow"></div>
508
            <dt><span>circularFlow</span> := bool (default: true)</dt>
509
            <dd>Should the Flow wrap around?</dt>
510
            <dt><span>verticalFlow</span> := bool (default: false)</dt>
511
            <dd>Will turn the ContentFlow 90 degree counterclockwise.<br/>
512
                This will automatically swap calculated positions and sizes where needed. You do not have to adjust any calculations or sizes. Should work with any AddOn outof the box.
513
            </dd>
514
            <div name="opacity" id="opacity"></div>
515
            <dt><span>visibleItems</span> := int (default: 0)</dt>
516
            <dd>Number of items to show on either side of the active Item. If set to '0' it will be set to the square root of the number of items in the flow.</dd>
517
            <dt><span>endOpacity</span> := float (default: 1)</dt>
518
            <dd>The opacity of the last visible item on either side. The opacity of each item will be calculated by the 'calcOpacity' function.</dd>
519
            <dt><span>startItem</span> := string | int (default: center)</dt>
520
            <dd>Active Content item to start with. Can be either a <a href="            javascript: switchBlock('keywords','#pkw');
521
        ">position keyword</a> or an integer.</dd>
522
            <dt><span>scrollInFrom</span> := string | int (default: pre)</dt>
523
            <dd>Flow will start scrolling on load from this item. Can be either a <a href="            javascript: switchBlock('keywords','#pkw');
524
        ">position keyword</a>, "none" or an integer. If set to "none" the flow will not scroll in.</dd>
525
526
        </dl>
527
        </div>
528
        <div id="flow" class="tabItem">
529
        <dl>
530
            <dt><span>flowSpeedFactor</span> := float (default: 1.0)</dt>
531
            <dd>A flowSpeedFactor &gt; 1 will speedup the scrollspeed, while a factor between 0 and 1 will slow it down</dd>
532
            <div name="drag" id="drag"></div>
533
            <dt><span>flowDragFriction</span> := float (default: 1.0)</dt>
534
            <dd>Determines how hard it is to drag the flow.<br/>
535
                If set to '0' dragging of the flow is deactivated.
536
            </dd>
537
            <div name="wheel" id="wheel"></div>
538
            <dt><span>scrollWheelSpeed</span> := float (default: 1.0)</dt>
539
            <dd>Scales by how many items the flow will be moved with one usage of the mousewheel.<br/>
540
                Negative values will reverse the scroll direction.<br/>
541
                If set to '0' scrolling with the mouse wheel is deactivated.
542
            </dd>
543
            <div name="keys" id="keys"></div>
544
            <dt><span>keys</span> := object (default: see below)</dt>
545
            <dd>Defines the keyCodes and the functions, which are triggerd on a keydown event within the ContentFlow. All defined functions are bound to the ContentFlow object.</br/>
546
                To disable this functionality set keys = {} (empty object).<br/>
547
                Default setting:
548
                <code><pre style="font-family: monospace">
549
550
    {
551
        13: function () { this._onclickActiveItem(this._activeItem) }, // return/enter key
552
        37: function () { this.moveTo('pre') },         // left arrow
553
        38: function () { this.moveTo('visibleNext') }, // up arrow
554
        39: function () { this.moveTo('next') },        // right arrow
555
        40: function () { this.moveTo('visiblePre') }   // down arrow
556
    }
557
                </pre></code>
558
            </dd>
559
560
        </dl>
561
        </div>
562
        <div id="items" class="tabItem">
563
        <dl>
564
            <div name="reflection" id="reflection"></div>
565
566
            <dt><span>reflectionHeight</span> := float (default: 0.5)</dt>
567
            <dd>Set the size of the reflection image relative to the original image</dd>
568
569
            <dt><span>reflectionGap</span> := float (default: 0.0)</dt>
570
            <dd>Set the size of the gap between the image and the reflection image relative to the original image size</dd>
571
572
            <dt><span>reflectionColor</span> := string (default: transparent)</dt>
573
            <dd>Set the "surface"-color of the reflection. Can be "none", "transparent", or #RRGGBB (hex RGB values)<br/>
574
                If set to 'overlay' the image given by the option 'reflectionOverlaySrc' will be lain over the reflection.
575
            </dd>
576
577
            <dt><span>scaleFactor</span> := float (default: 1.0)</dt>
578
            <dd>Factor by which the <u>item</u> will be scaled.</dd>
579
580
            <dt><span>scaleFactorLandscape</span> := float | string (default: 1.0)</dt>
581
            <dd>float := Factor to scale <u>content images</u> in landscape format by.<br/>
582
                string := if set to 'max' the height of an landscape image content will be set to the height of the item.
583
            </dd>
584
            <dt><span>scaleFactorPortrait</span> := float | string (default: 1.0)</dt>
585
            <dd>float := Factor to scale <u>content images</u> in portrait format by.<br/>
586
                string := if set to 'max' the width of an portait image content will be set to the width of the item.
587
            </dd>
588
589
            <dt><span>fixItemSize</span> := bool (default: false)</dt>
590
            <dd>Fixes the item size, to the calculated size. No adjustments will be done. Images will be croped if bigger.</dd>
591
592
            <dt><span>maxItemHeight</span> := int (default: 0)</dt>
593
            <dd>Maximum item height in px. If set to a value greater than '0' the item size will be calculated from this value instead relative to the width of the ContentFlow.
594
595
            <dt><span>relativeItemPosition</span> := string (deafult: top center)</dt>
596
            <dd>Position of item relative to it's coordinate.<br/>
597
                It can contain the keywords top/above, bottom/below, left, right and center.<br/>
598
                So by default the item will be placed above the coordinate point and centered horizontally.<br/>
599
                If set this option overrides the calcRelativeItemPosition option!
600
            </dd>
601
602
603
604
605
606
<!--
607
            <dt><span>activeElement</span> := string (default: content)</dt>
608
            <dd>This determents which part of each item will be handle the click events<br/>
609
            can be 'content' or 'item'|'element'
610
            </dd>
611
-->
612
613
        </dl>
614
        </div>
615
        <div id="events" class="tabItem">
616
        <dl>
617
            <div style="background-color: #222; padding: 1em 0.5em; margin: 1em auto">
618
                These functions will be bound to the ContenFlow object, so 'this' refers to the ContentFlow!
619
            </div>
620
            <div name="caItem" id="caItem"></div>
621
            <dt><span>onclickInactiveItem</span> := function(obj item)</dt>
622
            <dd>called if an inactive item is clicked.</dd>
623
624
            <dt><span>onclickActiveItem</span> := function(obj item)</dt>
625
            <dd>called if the active item is clicked.</dd>
626
            
627
            <dt><span>onMakeInactive</span> := function(obj item)</dt>
628
            <dd>called if the active item becomes an inactive item.</dd>
629
630
            <dt><span>onMakeActive</span> := function(obj item)</dt>
631
            <dd>called if an item becomes the active item.</dd>
632
            
633
            <dt><span>onMoveTo</span> := function(obj item)</dt>
634
            <dd>called each time a new target is set i.e by calling the moveTo method.<br/>
635
            </dd>
636
637
            <dt><span>onReachTarget</span> := function(obj item)</dt>
638
            <dd>called if the target item becomes the active item.</dd>
639
            
640
            <dt><span>onclickPreButton</span> := function(event event)</dt>
641
            <dd>called if the 'pre' button item is clicked.</dd>
642
            
643
            <dt><span>onclickNextButton</span> := function(event event)</dt>
644
            <dd>called if the 'next' button item is clicked.</dd>
645
646
<!--            <dt><span>onDrawItem</span> := function(obj item, float relativePosition, float relativePositionNormed, int side, obj size)</dt>-->
647
            <dt><span>onDrawItem</span> := function(obj item)</dt>
648
            <dd>called when ever an item is redrawn. Use with caution, because this method is easily called many thousend times !</dd>
649
        </dl>
650
        </div>
651
652
        <div id="calc" class="tabItem">
653
        <dl>
654
            <div style="background-color: #222; padding: 1em 0.5em; margin: 1em auto">
655
                These functions will be bound to the ContenFlow object, so 'this' refers to the ContentFlow!
656
            </div>
657
658
            <dt><span>calcStepWidth</span> := function(float diff)</dt>
659
            <dd>called to set the calculation function of the width of each step to get the next position of the flow.<br/>
660
                The function will be bound to the ContenFlow object, so 'this' refers to the ContentFlow!<br/>
661
                float <b>'diff'</b> := targetItemPosition - currentPosition
662
                returns: float
663
            </dd>
664
665
            <dt><span>calcSize</span> :=function(obj item)</dt>
666
            <dd>called to set the calculation function of the size of a visible item<br/>
667
                returns an object of type size := {width: w, height: h}<br/>
668
            </dd>
669
            
670
            <dt><span>calcCoordinates</span> := function(obj item)</dt>
671
            <dd>called to calculate the position of an item element within the flow<br/>
672
                returns an object of type position := {x: x, y: y}<br/>
673
            </dd>
674
            
675
            <dt><span>calcRelativeItemPosition</span> := function(obj item)</dt>
676
            <dd>called to calculate the position of an item relative to it's coordinates<br/>
677
                Beware: this function will be overridden by the 'relativeItemPosition' option!<br/>
678
                returns an object of type position := {x: x, y: y}<br/>
679
            </dd>
680
681
            <dt><span>calcZIndex</span> := function(obj item)</dt>
682
            <dd>called to set the calculation function of the z-index of each item. The z-index is only valid within the flow itself.<br/>
683
                returns: int z (-32768 &le; z &le; 32768)
684
            </dt>
685
686
            <dt><span>calcFontSize</span> := function(obj item)</dt>
687
            <dd>called to set the calculation function of the relative font-size of an item<br/>
688
                returns: float fs (0.0 &le; fs)
689
            </dt>
690
            <dt><span>calcOpacity</span> := function(obj item)</dt>
691
            <dd>called to calculate the opacity of each item.<br/>
692
                returns: float o (0.0 &le; opacity &le; 1.0)
693
            </dd>
694
        </dl>
695
</div>
696
    </div>
697
            <div id="methodsBlock" class="block">
698
        <h2 id="Methods" name="Methods"></h2>
699
            <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;">
700
<a href="#" onclick="toggleTab('methods', this.firstChild); return false;"><div id="methodsTab" class="tab" >Methods</div></a>        <div class="clear"></div>
701
    </div>
702
    <script>
703
       window.initTabs.push( function initTabs () {
704
            var t = ["methods"];
705
            var tabs = [];
706
            for (var i=0; i<t.length; i++) {
707
                tabs[i] = document.getElementById(t[i]+"Tab");
708
                tabs[i].content = document.getElementById(t[i]);
709
            }
710
711
            if (tabs[0].content) {
712
                //window.activeTab = tabs[0];
713
                //toggleTab(tabs[0]);
714
                window.activeTabs['methods'] = tabs[0];
715
                toggleTab('methods', tabs[0]);
716
            }
717
       }
718
    );
719
720
    </script>
721
        <div id="methods" class="tabItem">
722
        <p>The following object methods are public.</p>
723
        <dl>
724
            <dt>setConfig(obj OPTIONS)</dt>
725
            <dd>called to set options after object creation</dd>
726
727
            <dt>getItem(int index)</dt>
728
            <dd>returns the 'item' object at given index</dd>
729
730
            <dt>getActiveItem()</dt>
731
            <dd>called to get the currently active item.
732
                returns the 'item' object of the active item.
733
            </dd>
734
735
            <dt>getNumberOfItems()</dt>
736
            <dd>called to get the number of items currently in the flow</dd>
737
738
            <dt>moveTo(int index | float pos | string keyword | obj item)</dt>
739
            <dd>called to scroll to item.<br/>
740
                'index' := scroll to item with index 'index'<br/>
741
                'pos' := scroll to position 'pos'<br/>
742
                'keyword' := scroll to position given by <a href="#pkw">position keyword</a>
743
                'item' := scroll to item
744
            </dd>
745
746
            <dt>resize()</dt>
747
            <dd>called to reinitialize the size of the flow items, after the size of the flow has changed.<br/>Is called if window is resized.</dd>
748
            
749
            <div name="addItem" id="addItem"></div>
750
            <dt>addItem(DOMnode element, int|string index)</dt>
751
            <dd>called to add a new item 'element' to the flow at the position index. The element has to be a valid item element. So it must have at least this structure:<br/>
752
                &lt;div class="item"&gt;&lt;img class="content" src="url/to/image"/&gt;&lt;/div&gt;<br/>
753
                The index has to be an integer or one of the strings 'first', 'start', 'last' or 'end'.<br/>
754
                returns: int index (index position of added item)
755
            </dd>
756
757
            <dt>rmItem([int index])</dt>
758
            <dd>called to remove an item from the flow. If the parameter index is given the element at the index position 'index' will be removed, else the currently active item will be removed.
759
                returns: DOMnode el (cleaned item node) 
760
            </dd>
761
762
        </dl>
763
        </div>
764
    </div>
765
            <div id="keywordsBlock" class="block">
766
        <h2 id="pkw" name="pkw"></h2>
767
            <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;">
768
<a href="#" onclick="toggleTab('keywords', this.firstChild); return false;"><div id="keywordsTab" class="tab" >position keywords</div></a>        <div class="clear"></div>
769
    </div>
770
    <script>
771
       window.initTabs.push( function initTabs () {
772
            var t = ["keywords"];
773
            var tabs = [];
774
            for (var i=0; i<t.length; i++) {
775
                tabs[i] = document.getElementById(t[i]+"Tab");
776
                tabs[i].content = document.getElementById(t[i]);
777
            }
778
779
            if (tabs[0].content) {
780
                //window.activeTab = tabs[0];
781
                //toggleTab(tabs[0]);
782
                window.activeTabs['keywords'] = tabs[0];
783
                toggleTab('keywords', tabs[0]);
784
            }
785
       }
786
    );
787
788
    </script>
789
        <div id="keywords" class="tabItem">
790
        <dl>
791
            <dt>'start', 'first'</dt>
792
            <dd>first item</dd>
793
            <dt>'end', 'last'</dt>
794
            <dd>last item</dd>
795
            <dt>'middle', 'center'</dt>
796
            <dd>item in the middle</dd>
797
            <dt>'pre', 'previous', 'left'</dt>
798
            <dd>previous item</dd>
799
            <dt>'next', 'right'</dt>
800
            <dd>next item</dd>
801
            <dt>'visible', 'visiblePre' 'visibleLeft'</dt>
802
            <dd>leftmost visible item</dd>
803
            <dt>'visibleNext', 'visibleRight'</dt>
804
            <dd>rightmost visible item</dd>
805
        </dl>
806
        <p>Where ever you can use a position keyword you can also use an integer for an exact position. A sanity check will be done automatically.</p>
807
</div>
808
    </div>
809
            <div id="objectsBlock" class="block">
810
811
            <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;">
812
<a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="cfg_objTab" class="tab" >ContentFlowGlobal</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="cf_objTab" class="tab" >ContentFlow</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="item_objTab" class="tab" >Item</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="conf_objTab" class="tab" >Configuration</div></a>        <div class="clear"></div>
813
    </div>
814
    <script>
815
       window.initTabs.push( function initTabs () {
816
            var t = ["cfg_obj","cf_obj","item_obj","conf_obj"];
817
            var tabs = [];
818
            for (var i=0; i<t.length; i++) {
819
                tabs[i] = document.getElementById(t[i]+"Tab");
820
                tabs[i].content = document.getElementById(t[i]);
821
            }
822
823
            if (tabs[0].content) {
824
                //window.activeTab = tabs[0];
825
                //toggleTab(tabs[0]);
826
                window.activeTabs['objects'] = tabs[0];
827
                toggleTab('objects', tabs[0]);
828
            }
829
       }
830
    );
831
832
    </script>
833
834
        <div id="cfg_obj" class="tabItem">
835
        <p>ContentFlowGlobal is a globaly accessible object.
836
        <code><pre style="font-family: monospace">
837
838
        {
839
            Flows   := [
840
                          ContentFlowObj_0,
841
                          ContentFlowObj_1,
842
                          ...
843
                       ], 
844
845
            AddOns  := {
846
                         AddOnName: AddOnObj,
847
                         ...
848
                       },
849
850
            Browser := {
851
                        Opera := bool,
852
                        IE := bool,
853
                        IE6 := bool,
854
                        IE7 := bool,
855
                        IE8 := bool,
856
                        WebKit := bool,
857
                        iPhone := bool,
858
                        Chrome := bool,
859
                        Safari := bool,
860
                        Konqueror := bool,
861
                        Konqueror4 := bool,
862
                        Gecko := bool,
863
                        Gecko19 := bool
864
                       },
865
866
            getAddOnConf := function (AddOnName),
867
            
868
            setAddOnConf := function (AddOnName, confObj)
869
870
        }
871
        </pre></code>
872
        </div>
873
874
        <div id="cf_obj" class="tabItem">
875
        <p>This is the basic structure of a ContentFlow object.</p>
876
        <code><pre style="font-family: monospace">
877
878
        {
879
            Container       := DOM-Element      // DOM element of the '.ContentFlow' element
880
            Flow            := DOM-Element      // DOM element of the '.flow' element
881
            Scrollbar       := DOM-Element      // DOM element of the '.scrollbar' element
882
            Slider          := DOM-Element      // DOM element of the '.slider' element
883
            items           := Array            // [ item0, item1, ... , itemN ]
884
            conf            := conf obj         // object containing the configuration options
885
            Browser         := obj              // ContentFlowGlobal.Browser
886
        }
887
        </pre></code>
888
889
        </div>
890
<!--
891
        <div id="gui_obj" class="tabItem">
892
        <p>A GUI element is a extended DOM object, with the following attributes.</p>
893
        <code><pre style="font-family: monospace">
894
895
        {
896
            Dimensions := {
897
                            height: int, //px
898
                            width: int //px
899
                          },
900
            center := {
901
                        x: int, //px
902
                        y: int //px
903
                      }
904
        }
905
        </pre></code>
906
        </div>
907
908
-->
909
        <div id="conf_obj" class="tabItem">
910
        <div name="conf" id="conf"></div>
911
        <p>The <a href="            javascript: switchBlock('options','');
912
        ">options</a> can be passed to the ContentFlow on creation, 
913
            by the <a href="            javascript: switchBlock('methods','');
914
        ">setConfig method</a> or 
915
            by an  <a href="        addons.php        ">AddOn</a> in the form of a data object.</p>
916
        <div name="confObj" id="confObj"></div>
917
        <code><pre style="font-family: monospace">
918
919
        {
920
            option1: value,
921
            option2: value,
922
            .
923
            .
924
            .
925
            lastOption: value   // beware: last option must not end with a comma !
926
        }
927
        </pre></code>
928
        </div>
929
    
930
931
        <div id="item_obj" class="tabItem">
932
        <p>An 'item' object represents an item within the ContentFlow and has the following structure.</p>
933
        <code><pre style="font-family: monospace">
934
935
        {
936
            element             := DOM-ELEMENT  // DOM element of the item
937
            pre                 := item obj     // the previous item
938
            next                := item obj     // the next item
939
            content             := DOM-ELEMENT  // DOM element of the item content
940
            caption             := DOM-ELEMENT  // DOM element of the item caption
941
            label               := DOM-ELEMENT  // DOM element of the item label
942
            index               := int          // index of item
943
            position            := float        // position on the internel position axis  
944
            relativePosition    := float        // relative position of item 
945
                                                //     (-visibleItems &le; relativePosition &le; visibleItems)
946
            relativePositionNormed  := float    // normed relative position of item 
947
                                                //     (-1 &le; relativePosition &le; 1) 
948
            side                := int          // left,center,right (-1,0,1)
949
            size                := size obj     // size object as returned by calcSize 
950
                                                //     {width: float, height: float} (0 &le; width, height &le; 1)
951
           <!-- 
952
                                                //     {x: float, y: float} (0 &le; x,y &le; 1)
953
            coordinates         := position obj // relative coordinates within the Flow-element
954
                                                //     {x: float, y: float} (-1 &le; x,y &le; 1)
955
            relativeItemPosition := position obj// 
956
            zIndex              := int          // relative zIndex of the item
957
            fontSize            := float        // relative font size (0&le; fontSize &le; 1)
958
            opacity             := float        // opacity of the item (0&le; fontSize &le; 1)
959
-->
960
        }
961
        </pre></code>
962
        </div>
963
964
    </div>
965
966
        
967
    
968
969
    </div>
970
971
    
972
    <!-- last 23 lines -->
973
    <script>
974
        var activeBlock;
975
        var activeTab = null;
976
        function switchBlock(ID, hash) {
977
            if (!ID) ID = "usage";
978
            switch (show) {
979
            case 'usage':
980
            case 'config':
981
            case 'options':
982
            case 'methods':
983
            case 'keywords':
984
            case 'objects':
985
                IDSUB = ID+"Sub";
986
                ID = ID+"Block";
987
                break;
988
            default:
989
                IDSUB = "usageSub";
990
                ID = "usageBlock";
991
            }
992
            if (activeBlock) activeBlock.style.display = "none";
993
            if (activeTab) {
994
                activeTab.style.color = "silver";
995
                activeTab.style.fontSize = "100%";
996
            }
997
            activeBlock = document.getElementById(ID);
998
            activeTab = document.getElementById(IDSUB);
999
            if (activeBlock) activeBlock.style.display = "block";
1000
            if (activeTab) {
1001
                activeTab.style.color = "white";
1002
                activeTab.style.fontSize = "125%";
1003
                
1004
            }
1005
            if (hash)
1006
                window.location.hash = hash;
1007
1008
            return false;
1009
        }
1010
        if (!show) var show = "usage";
1011
        switchBlock(show);
1012
1013
        for (var i=window.initTabs.length; i>0; i--) {
1014
            window.initTabs[i-1]();
1015
        }
1016
    </script>
1017
</body>
1018
</html>
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/index.html (+113 lines)
Line 0 Link Here
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4
<head>
5
    <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
6
7
    <script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
8
    <script tyle="text/javascript">
9
        var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
10
    </script>
11
</head>
12
<body>
13
14
    <h1 id="title"><img src="title.png"/></h1>
15
    <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3>
16
    
17
    <ul id="menu">
18
        <li><a href="index.html">start</a></li>
19
        <li><a href="docu.html">documentation</a></li>
20
        <li><a href="changelog.html">changelog</a></li>
21
        <li><a href="license.html">license</a></li>
22
        <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li>
23
    </ul>
24
    
25
    <div class="maincontent">
26
27
        <p>
28
        ContentFlow is a flexible flow written in javascript, which can handle any kind of content.
29
        It's distributed under the <a href="licens.html">MIT License</a>.
30
        </p>
31
32
        <p>
33
        With ContentFlow it is now possible to have any number of flows within one web page.
34
        Each separately configurable, satisfying different visual needs.
35
        </p>
36
        <p>
37
        It's easy to implement and to extend. 
38
        You are free to define your own methods for displaying content and interacting with it.
39
        You can control all aspects of the flow without loosing the ease of use.
40
        </p>
41
        <p>
42
        ContentFlow can handle different kinds of control, like keyboard and mouse, and can be used with and without a reflection.
43
        For a complete list of features and compatibilities take a look at the <a href="http://www.jacksasylum.eu/ContentFlow/features.html">feature list</a>.
44
        </p>
45
46
    <!-- ===== FLOW ===== -->
47
    <div id="contentFlow" class="ContentFlow">
48
        <!-- should be place before flow so that contained images will be loaded first -->
49
        <div class="loadIndicator"><div class="indicator"></div></div>
50
51
        <div class="flow">
52
53
            <div class="item">
54
                <img class="content" src="pics/pic0.png"/>
55
                <div class="caption">pic0: some stripes</div>
56
            </div>
57
            <div class="item">
58
                <img class="content" src="pics/pic1.png"/>
59
                <div class="caption">pic1: some stripes</div>
60
            </div>
61
            <div class="item">
62
                <img class="content" src="pics/pic2.png"/>
63
                <div class="caption">pic2: some stripes</div>
64
            </div>
65
            <div class="item">
66
                <img class="content" src="pics/pic1.png"/>
67
                <div class="caption">pic1: some stripes</div>
68
            </div>
69
70
            <div class="item">
71
                <img class="content" src="pics/pic0.png"/>
72
                <div class="caption">pic0: some stripes</div>
73
            </div>
74
            <div class="item">
75
                <img class="content" src="pics/pic1.png"/>
76
                <div class="caption">pic1: some stripes</div>
77
            </div>
78
            <div class="item">
79
                <img class="content" src="pics/pic2.png"/>
80
                <div class="caption">pic2: some stripes</div>
81
            </div>
82
            <div class="item">
83
                <img class="content" src="pics/pic1.png"/>
84
                <div class="caption">pic1: some stripes</div>
85
            </div>
86
87
            <div class="item">
88
                <img class="content" src="pics/pic0.png"/>
89
                <div class="caption">pic0: some stripes</div>
90
            </div>
91
            <div class="item">
92
                <img class="content" src="pics/pic1.png"/>
93
                <div class="caption">pic1: some stripes</div>
94
            </div>
95
            <div class="item">
96
                <img class="content" src="pics/pic2.png"/>
97
                <div class="caption">pic2: some stripes</div>
98
            </div>
99
            <div class="item">
100
                <img class="content" src="pics/pic1.png"/>
101
                <div class="caption">pic1: some stripes</div>
102
            </div>
103
104
        </div>
105
        <div class="globalCaption"></div>
106
        <div class="scrollbar">
107
            <div class="slider"><div class="position"></div></div>
108
        </div>
109
110
    </div>
111
112
</body>
113
</html>
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/license.html (+50 lines)
Line 0 Link Here
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4
<head>
5
    <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" />
6
</head>
7
<body>
8
9
    <h1 id="title"><img src="title.png"/></h1>
10
    <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3>
11
12
    <ul id="menu">
13
        <li><a href="index.html">start</a></li>
14
        <li><a href="docu.html">documentation</a></li>
15
        <li><a href="changelog.html">changelog</a></li>
16
        <li><a href="license.html">license</a></li>
17
        <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li>
18
    </ul>
19
20
    <div class="maincontent">
21
        <div style="width: 80ex; margin: 0 auto;">
22
            <p>The MIT License</p>
23
24
            <p>Copyright (c) 2007 - 2010 Sebastian Kutsch</p>
25
26
            <p>
27
            Permission is hereby granted, free of charge, to any person obtaining a copy
28
            of this software and associated documentation files (the "Software"), to deal
29
            in the Software without restriction, including without limitation the rights
30
            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
31
            copies of the Software, and to permit persons to whom the Software is
32
            furnished to do so, subject to the following conditions:
33
            </p>
34
            <p>
35
            The above copyright notice and this permission notice shall be included in
36
            all copies or substantial portions of the Software.
37
            </p>
38
            <p style="font-family: monospace;">
39
            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
40
            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
41
            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
42
            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
43
            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
44
            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
45
            THE SOFTWARE.
46
            </p>
47
        </div>
48
    </div>
49
</body>
50
</html>
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css (+3 lines)
Line 0 Link Here
1
.ContentFlow .globalCaption {
2
    color: #333333;
3
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css.example (+120 lines)
Line 0 Link Here
1
/* ========== ContentFlow ========== */
2
/*
3
 * Within this file you can adjust the styling of ContentFlow
4
 * to your personal needs. The default styling is the same as found on the 
5
 * project page.
6
 *
7
 * To utilze this file for global styleing, rename it to 'mycontentflow.css'.
8
 */
9
10
.ContentFlow {
11
}
12
13
    /* ----- styling of items ----- */
14
    .ContentFlow .flow .item.active {
15
        cursor: pointer;
16
    }
17
        .ContentFlow .flow .item .caption {
18
            font-size: 100%;
19
            font-weight: bold;
20
            text-align: center;
21
            color: white;
22
            max-height: 30%;
23
            bottom: 10%;
24
            background: url(img/1x1_0.5_black.png);
25
            width: 100%;
26
        }
27
        * html .ContentFlow .flow .item .caption {
28
            background-image: none;
29
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
30
        }
31
            .ContentFlow .flow .item .caption a,
32
            .ContentFlow .flow .item .caption a:link,
33
            .ContentFlow .flow .item .caption a:visited,
34
            .ContentFlow .flow .item .caption a:active,
35
            .ContentFlow .flow .item .caption a:hover {
36
                text-decoration: none;
37
                color: white;
38
                font-style: italic;
39
                font-size: 0.8em;
40
            }
41
            .ContentFlow .flow .item .caption a:hover {
42
                text-decoration: underline;
43
            }
44
        .ContentFlow .flow .item.active .caption {
45
            /*display: block;*/ /* uncomment to show caption inside item */
46
        }
47
48
    /* ----- scrollbar ----- */
49
    .ContentFlow .scrollbar {
50
        width: 50%;
51
        margin: 0px auto;
52
        margin-top: 10px;
53
        height: 16px;
54
        background: url(img/scrollbar_white.png) left center repeat-x;
55
        position: relative;
56
    }
57
58
        .ContentFlow .scrollbar .slider {
59
            width: 16px;
60
            height: 16px;
61
            background: url(img/slider_white.png) center center no-repeat;
62
        }
63
        
64
        /* only for IE <= 6 and a alphatransparent slider image */
65
        * html .ContentFlow .scrollbar .slider {
66
            background-image: none;
67
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
68
        }
69
            .ContentFlow .scrollbar .slider .position {
70
                top: 120%;
71
                font-size: 16px;
72
                font-weight: bold;
73
                color: silver
74
            }
75
76
    /* ----- global caption ----- */
77
    .ContentFlow .globalCaption {
78
        text-align: center;
79
        font-weight: bold;
80
        color: white;
81
        font-size: 14px;
82
        height: 20px;
83
        margin: 2em auto;
84
    }
85
        .ContentFlow .globalCaption .caption {
86
        }
87
            .ContentFlow .globalCaption .caption a,
88
            .ContentFlow .globalCaption .caption a:link,
89
            .ContentFlow .globalCaption .caption a:visited,
90
            .ContentFlow .globalCaption .caption a:active,
91
            .ContentFlow .globalCaption .caption a:hover {
92
                text-decoration: none;
93
                color: white;
94
                font-style: italic;
95
                font-size: 0.8em;
96
            }
97
98
            .ContentFlow .globalCaption .caption a:hover {
99
                text-decoration: underline;
100
            }
101
102
    /* ----- load indicator ----- */
103
    .ContentFlow .loadIndicator {
104
        width: 100%;
105
        height: 100%;
106
        top: 0px;
107
        left: 0px;
108
        background: black;
109
    }
110
        .ContentFlow .loadIndicator .indicator {
111
            background: url(img/loader.gif) center center no-repeat;
112
            width: 100%;
113
            height: 100%;
114
        }
115
        * html .ContentFlow .loadIndicator .indicator {
116
            height: 100px;
117
        }
118
119
/* ================================= */
120
(-)a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/styles.css (+220 lines)
Line 0 Link Here
1
body {
2
    background: black;
3
    color: white;
4
    font-size: 10pt;
5
    font-family: sans-serif;
6
    margin: 0;
7
    padding: 0 7%; 
8
}
9
10
a,
11
a:link,
12
a:visited,
13
a:active,
14
a:hover {
15
    text-decoration: none;
16
    color: white;
17
    font-weight: bold;
18
}
19
a:hover {
20
    text-decoration: underline;
21
}
22
23
.clear { clear: both; }
24
25
img { border: none; }
26
27
h1 {
28
    text-align: center;
29
    text-decoration: underline;
30
    font-family: serif;
31
    color: white;
32
    font-size: 1.8em;
33
}
34
h2 {
35
    margin-top: 2.5em;
36
    font-size: 1.7em;
37
    text-decoration: underline;
38
}
39
h3 {
40
    margin-top: 2em;
41
    font-size: 1.3em;
42
    text-decoration: underline;
43
}
44
p {
45
    line-height: 150%;
46
    text-align: justify;
47
}
48
pre {
49
    font-family: sans-serif;
50
    background: #222;
51
}
52
.simpleBlack {
53
    background: black;
54
    width: 80ex;
55
    margin: 0 auto;
56
    font-family: sans-serif;
57
}
58
59
code {
60
    font-family: monospace;
61
    font-size: 0.9em;
62
    line-height: 150%;
63
}
64
65
dl {
66
    margin-left: 4ex;
67
}
68
69
    dl dt {
70
        font-size: 0.9em;
71
        font-weight: bold;
72
        color: #eee;
73
        font-family: monospace;
74
    }
75
        dl dd {
76
            margin-bottom: 1.5em;
77
            color: #ccc;
78
            font-size: 0.85em;
79
            line-height: 1.5em;
80
        }
81
82
83
ol {
84
}
85
    ol li {
86
        margin-bottom: 1em;
87
        line-height: 150%;
88
    }
89
90
ul {
91
}
92
    ul li {
93
        margin-bottom: 0;
94
    }
95
/* ------------------------------------------------------------------------- */
96
97
#title {
98
    margin: 0px auto;
99
}
100
101
#sponsor {
102
    position: absolute;
103
    right: 7%;
104
    font-size: 10px;
105
    height: 66px;
106
    line-height: 66px;
107
    padding: 0 20px;
108
}
109
110
div.maincontent {
111
    margin: 0px auto 20pt auto;
112
}
113
114
#menu {
115
    display: block;
116
    text-align: center;
117
    background: #222;
118
    padding: 1em;
119
    margin: 2em auto 4em auto;
120
}
121
122
    #menu li {
123
        display: inline;
124
        padding: 0px 20px;
125
    }
126
127
.totop {
128
    text-align: center;
129
    margin: 4em 10%;
130
    padding: 0.25em;
131
    background: #161616;
132
}
133
    .totop a {
134
        margin-right: 7%;
135
        color: silver;
136
    }
137
138
139
.block {
140
    display: none;
141
}
142
143
144
#browserComp {
145
    border-collapse: collapse;
146
    margin: 40px auto;
147
}
148
    #browserComp caption {
149
        text-align: center;
150
        margin: 20px auto;
151
        font-size: 1.1em;
152
        font-weight: bold;
153
    }
154
    #browserComp th {
155
        font-size: 10px;
156
        padding: 5px 10px;
157
        border-bottom: 1px solid silver;
158
    }
159
        #browserComp th img {
160
            width: 22px;
161
        }
162
        #browserComp td {
163
            text-align: center;
164
        }
165
            #browserComp th.feature,
166
            #browserComp td.feature {
167
                text-align: right;
168
                padding: 5px;
169
                padding-right: 10px;
170
                border-right: 1px solid silver;
171
            }
172
173
.addon {
174
    border: 1px solid #222;
175
    padding: 20px;
176
    margin-bottom: 20px;
177
    background: #222;
178
}
179
    .addon .flowBox {
180
        width: 500px;
181
        margin-right: 40px;
182
        float: left;
183
    }
184
    .addon .discription {
185
        margin-left: 540px;
186
    }
187
        .addon .title {
188
                line-height: 1.3em;
189
        }
190
            .addon .title h3 {
191
                margin: 0;
192
                display: inline;
193
            }
194
            .addon .title .by {
195
                margin-left: 2em;
196
                font-size: 0.8em;
197
                text-decoration: none;
198
            }
199
        .addon p {
200
            font-size: 0.9em;
201
        }
202
        .addon .comment {
203
            margin-top: 2em;
204
            font-style: italic;
205
        }
206
        .addon .download {
207
            font-size: 0.8em;
208
            float: right;
209
            margin: 0 0 2em 4em;
210
            line-height: 1.5em;
211
        }
212
            .addon .download a {
213
                font-weight: normal;
214
            }
215
216
#info { /* for example.php */
217
    color: white;
218
    /*display: none;*/
219
}
220

Return to bug 10756