API tools faq
paste
Advertisement
fruffl

gallery (cinema)

fruffl
Jul 16th, 2012
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 48.86 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * cinematic fullscreen gallery
  3.  * autoplayer with thumb-strip; json is optional
  4.  *
  5.  * dom input
  6.  *
  7.  *  <div id="target" />
  8.  *  <ul>
  9.  *      <li data-json='{"foo":"myfoo","bar":"mybar"}'><a href"link/to/hires-image,jpg" /></li>
  10.  *      <li><a href"http://youtube.com/foo" /></li>
  11.  *  </ul>
  12.  *
  13.  * optional attributes:
  14.  *  data-json: create additional divs in decorontwerp with object.key as class-suffix
  15.  *  data-css-bioscoop: css conditions for animation between images
  16.  *
  17.  * dom output;
  18.  *
  19.  *  <div id="target" class="tri4m-app-cinematic-bioscoop">
  20.  *      <div class="tri4m-app-cinematic-decorontwerp">
  21.  *          <img class="tri4m-app-cinematic-image" />
  22.  *          <div class="tri4m-app-cinematic-data">
  23.  *              <div class="tri4m-app-cinematic-data-foo">
  24.  *                  <span>myfoo</span>
  25.  *              </div>
  26.  *              <div class="tri4m-app-cinematic-data-bar">
  27.  *                  <span>mybar</span>
  28.  *              </div>
  29.  *          </div>
  30.  *      </div>
  31.  *  </div>
  32.  *  <div class="tri4m-ui-scrollroller-x tri4m-app-cinematics tri4m-ui-scrollroller">
  33.  *      <div class="tri4m-ui-scrollroller-wrapper">
  34.  *          <ul class="tri4m-app-cinematic-list tri4m-ui-scrollroller-list ui-helper-clearfix">
  35.  *              <li class="tri4m-ui-scrollroller-listitem tri4m-app-cinematic-resourceitem tri4m-app-cinematic-resourcehires-image tri4m-ui-scrollroller-listitem-active">
  36.  *                  <img src="link/to/thumb-image.jpg" />
  37.  *                  <a class="tri4m-app-cinematic-resourcelink" href="link/to/hires-image.jpg" />
  38.  *                  <a class="tri4m-app-cinematic-resourcethumb" href="link/to/thumb-image.jpg" />
  39.  *                  <div class="tri4m-app-cinematic-overlay" />
  40.  *              </li>
  41.  *              <li class="tri4m-ui-scrollroller-listitem tri4m-app-cinematic-resourceitem tri4m-app-cinematic-resourcehires-youtube tri4m-ui-scrollroller-listitem-active">
  42.  *                  <img src="http://youtube.com/link/to/thumb-image.jpg" />
  43.  *                  <a class="tri4m-app-cinematic-resourcelink" href="http://youtube.com/foo" />
  44.  *                  <a class="tri4m-app-cinematic-resourcethumb" href="http://youtube.com/link/to/thumb-image.jpg" />
  45.  *                  <div class="tri4m-app-cinematic-overlay" />
  46.  *              </li>
  47.  *          </ul>
  48.  *      </div>
  49.  *  </div>
  50.  *
  51.  * public api
  52.  *
  53.  * ul.tri4m-app-cinematic-list
  54.  *  tri4m.app.cinematic.container.insertItemAfter*
  55.  *  tri4m.app.cinematic.container.insertItemBefore*
  56.  *  tri4m.app.cinematic.container.appendItem
  57.  *  tri4m.app.cinematic.container.appendItems
  58.  *  tri4m.app.cinematic.container.prependItem*
  59.  *  tri4m.app.cinematic.container.prependItems*
  60.  *  tri4m.app.cinematic.container.removeItem
  61.  *  tri4m.app.cinematic.container.nextItem
  62.  *  tri4m.app.cinematic.container.firstItem
  63.  *  tri4m.app.cinematic.container.prevItem
  64.  *  tri4m.app.cinematic.container.play
  65.  *  tri4m.app.cinematic.container.stop
  66.  *  tri4m.app.cinematic.container.prev
  67.  *  tri4m.app.cinematic.container.next
  68.  *
  69.  * ul.tri4m-app-cinematic-list li.tri4m-app-cinematic-resourceitem
  70.  *  click
  71.  *  mouseover
  72.  *  mouseout
  73.  *  tri4m.app.cinematic.listitem.activate
  74.  *  tri4m.app.cinematic.listitem.deactivate
  75.  *  
  76.  * ul.tri4m-app-cinematic-list li.tri4m-app-cinematic-resourceitem a.tri4m-app-cinematic-resourcelink
  77.  *  tri4m.app.cinematic.reslink.preloadImage
  78.  *  
  79.  * ul.tri4m-app-cinematic-list li.tri4m-app-cinematic-resourceitem img.tri4m-app-cinematic-resourcethumb
  80.  *  tri4m.app.cinematic.thumblink.preloadImage
  81.  *  
  82.  * ul.tri4m-app-cinematic-list li.tri4m-app-cinematic-resourceitem div.tri4m-app-cinematic-overlay
  83.  *  tri4m.app.cinematic.listitem.overlay.show
  84.  *  tri4m.app.cinematic.listitem.overlay.hide
  85.  *  tri4m.app.cinematic.listitem.overlay.activate
  86.  *  tri4m.app.cinematic.listitem.overlay.complete
  87.  *  
  88.  * div.tri4m-app-cinematic-bioscoop div.tri4m-app-cinematic-decorontwerp
  89.  *  tri4m.app.cinematic.data.show
  90.  *  tri4m.app.cinematic.data.hide
  91.  *
  92.  * window
  93.  *  resize.resolutionchange
  94.  *
  95.  *
  96.  *
  97.  * @todo pagination not working for append.items correctly
  98.  *
  99.  *  static
  100.  *      sequence 1  0,1,2
  101.  *      sequence 2  3,4,5
  102.  *      sequence 3  6
  103.  *
  104.  *  dynamic
  105.  *      sequence 1  7,8,9
  106.  *      sequence 2  10
  107.  *
  108.  *
  109.  *
  110.  *  expected
  111.  *      sequence 1  0,1,2
  112.  *      sequence 2  3,4,5
  113.  *      sequence 3  6
  114.  *      sequence 4  7,8,9
  115.  *      sequence 5  10
  116.  *
  117.  *  actual
  118.  *      sequence 1  0,1,2
  119.  *      sequence 2  3,4,5
  120.  *      sequence 3  6,7,8,9
  121.  *      sequence 4  10
  122.  *
  123.  *
  124.  */
  125. cinematic : function(__SELF, SETTINGS)
  126. {
  127.     var regName = 'app-cinematic',
  128.     log =
  129.     {
  130.         n    : function(t, l)
  131.         {
  132.             $.tri4m.log('tri4m.app.cinematic: ' + t, l);
  133.         },
  134.         t    : function(t, l)
  135.         {
  136.             log.n('trigger: ' + t, l);
  137.         },
  138.         t107 : function(t, l)
  139.         {
  140.             log.t('preload-cinematic-thumb:' + t, l);
  141.         },
  142.         t108 : function(t, l)
  143.         {
  144.             log.t('preload-cinematic-image:' + t, l);
  145.         },
  146.         t109 : function(t, l)
  147.         {
  148.             log.t('-- event: ' + t, l);
  149.         },
  150.         t110 : function(t, l)
  151.         {
  152.             log.t('-- callback: ' + t, l);
  153.         },
  154.         t111 : function(t, l)
  155.         {
  156.             log.t('-- push: ' + t, l);
  157.         }
  158.     },
  159.     __settings = jQuery.extend
  160.     (
  161.         true,
  162.         {
  163.             bioscoop : null, // id or $(target)
  164.             timer    : null, // id or $(target)
  165.             autoplay :
  166.             {
  167.                 enabled   : true,
  168.                 interval  : 10000,
  169.                 autostart  : true
  170.             },
  171.             usekeys : true,
  172.             thumbs :
  173.             {
  174.                 preloadPerQueue      : 5,    // split queue in sequences; 0 = disabled; default: 5
  175.                 enabled              : true,  // false: bypass thumbs; default: true
  176.                 preloadAllBeforeShow : true,  // false: display; true: fetch -> display; default: true
  177.                 asCssBackgroundImage : false  // false: img-tag; default: false
  178.             },
  179.             images :
  180.             {
  181.                 asCssBackgroundImage : false,  // false: img-tag; default: false
  182.                 scaleAsInlineObject  : true    // true: resize Image by next parent props; false: by window; default: true
  183.             },
  184.             callback :
  185.             {
  186.                 thumbs :
  187.                 {
  188.                     ready       : function(list) { log.t110('thumbs.ready: ' + ILLI.fn.o2s(list)); },
  189.                     beforeShow  : function(item, index) { log.t110('thumbs.beforeShow: index ' + index); },
  190.                     afterShow   : function(item, index) { log.t110('thumbs.afterShow: index '  + index); }
  191.                 },
  192.                 images :
  193.                 {
  194.                     firstInit   : function() { log.t110('images.firstInit'); },
  195.                     beforeShow  : function() { log.t110('images.beforeShow'); },
  196.                     afterShow   : function() { log.t110('images.afterShow'); }
  197.                 }
  198.             },
  199.             loader :
  200.             {
  201.                 lines           : 16,
  202.                 length          : 50,
  203.                 width           : 1,
  204.                 radius          : 40,
  205.                 rotate          : 0,
  206.                 color           : '#00FF1A',
  207.                 speed           : 1.9,
  208.                 trail           : 100,
  209.                 shadow          : false,
  210.                 hwaccel         : true,
  211.                 className       : 'ddlsl',
  212.                 zIndex          : -1,//2e9,
  213.                 top             : 0,
  214.                 left            : 'auto'
  215.             }
  216.         },
  217.         SETTINGS
  218.     ),
  219.     __instance = function(element)
  220.     {
  221.         var  _element  = element, _queue = [], _removed = [], _reg = {}, _bnd = {},
  222.         _pagination =
  223.         {
  224.             perQueue  : __settings.thumbs.preloadPerQueue,
  225.             curQueue  : 0,
  226.             maxQueues : 0,
  227.             startItem : 0,
  228.             curItem   : 0,
  229.             length    : 0,
  230.             sliced    : [],
  231.             last      : true
  232.         },
  233.         _c =
  234.         {
  235.             w : function()
  236.             {
  237.                 var p = {width: $(window).width(), height: $(window).height()};
  238.                 return p;
  239.             },
  240.             t : function(t)
  241.             {
  242.                 var p = {width: 0, height: 0};
  243.                
  244.                 if(t.innerWidth() > 0)
  245.                 {
  246.                     p.width = t.innerWidth();
  247.                 }
  248.                 else
  249.                 if(t.innerWidth() === 0
  250.                 && t.parent().innerWidth() > 0)
  251.                 {
  252.                     p.width = t.parent().innerWidth();
  253.                 }
  254.                
  255.                 if(t.innerHeight() > 0)
  256.                 {
  257.                     p.height = t.innerHeight();
  258.                 }
  259.                 else
  260.                 if(t.innerHeight() === 0
  261.                 && t.parent().innerHeight() > 0)
  262.                 {
  263.                     p.height = t.parent().innerHeight();
  264.                 }
  265.                
  266.                 return p;
  267.             },
  268.             o : function(t)
  269.             {
  270.                 var p = {width: 0, height: 0}, w = _c.w(), t = _c.t(t);
  271.                
  272.                 p.width =  (t.width  === 0) ? w.width  : t.width;
  273.                 p.height = (t.height === 0) ? w.height : t.height;
  274.                
  275.                
  276.                 if(true === __settings.images.scaleAsInlineObject)
  277.                 {
  278.                     return t;
  279.                 }
  280.                
  281.                 return p;
  282.             },
  283.             p : function(iw, ih, ir, w, ww, wh, wr)
  284.             {
  285.                 var p = {width: 0, height: 0, left: 0, top: 0};
  286.                 if(wr > ir)
  287.                 {
  288.                     p.width  = Math.round(wh/ir);
  289.                     p.height = wh;
  290.                 }
  291.                 else
  292.                 {
  293.                     if($('body.fit-images').size())
  294.                     {  
  295.                         // allways fit
  296.                         var j = wh / ih;
  297.                         p.width  = Math.round(iw * j);
  298.                         p.height = wh;
  299.                     }
  300.                     else
  301.                     {
  302.                    
  303.                         if(ir > 1 || ir == 1)
  304.                         {  
  305.                             // portrait
  306.                             var j = wh / ih;
  307.                             p.width  = Math.round(iw * j);
  308.                             p.height = wh;
  309.                         }
  310.                         else
  311.                         {  
  312.                             // landscape
  313.                             p.height = Math.round( ww * ir );
  314.                             p.width = ww;
  315.                         }
  316.                     }
  317.                 }
  318.                
  319.                 p.left = Math.round((ww - p.width)  / 2);
  320.                 p.top  = Math.round((wh - p.height) / 2);
  321.                 return p;
  322.             },
  323.             i : function(image, target)
  324.             {
  325.  
  326.                 if(typeof image !== 'object'
  327.                 || typeof image.width === 'undefined'
  328.                 || typeof image.height === 'undefined') return p;
  329.  
  330.                 var iw = image.width, ih = image.height, ir = ih / iw,
  331.                     w = (true === __settings.images.scaleAsInlineObject) ? _c.t(target) : _c.w(),
  332.                     ww = w.width, wh = w.height, wr = wh / ww;
  333.                
  334.                 return _c.p(iw, ih, ir, w, ww, wh, wr);
  335.             },
  336.             l : function(image, target)
  337.             {
  338.  
  339.                 if(typeof image !== 'object'
  340.                 || typeof image.width === 'undefined'
  341.                 || typeof image.height === 'undefined') return p;
  342.  
  343.                 var iw = image.width, ih = image.height, ir = ih / iw,
  344.                     w = _c.t(target), ww = (w.width === 0) ? image.width : w.width,
  345.                     wh = (w.height === 0) ? image.height : w.height, wr = wh / ww;
  346.                
  347.                
  348.                 return _c.p(iw, ih, ir, w, ww, wh, wr);
  349.             },
  350.             f : function(frame, target)
  351.             {
  352.                 var p = {width: 0, height: 0, left: 0, top: 0};
  353.                 var c = _c.o(target);
  354.                
  355.                 p.width  = c.width;
  356.                 p.height = c.height;
  357.                
  358.                 return p;
  359.             }
  360.         },
  361.         _j =
  362.         {
  363.             __isw  : false,
  364.             window : function()
  365.             {
  366.                 var d = _reg.j.get('d'), wait = setInterval(function()
  367.                 {
  368.                     clearInterval(wait);
  369.                     _j.__isw = false;
  370.                    
  371.                     d.find('img:visible')
  372.                     .each(function()
  373.                     {
  374.                         $(this).animate(_c.i(
  375.                         {
  376.                             width  : $(this).width(),
  377.                             height : $(this).height()
  378.                         }, d), 500, 'easeOutCubic');
  379.                     });
  380.                    
  381.                     d.find('iframe')
  382.                     .each(function()
  383.                     {
  384.                         var p = _c.f(
  385.                         {
  386.                             width  : $(this).width(),
  387.                             height : $(this).height()
  388.                         }, d);
  389.                        
  390.                         $(this).animate(
  391.                         {
  392.                             width  : p.width,
  393.                             height : p.height
  394.                         }, 500, 'easeOutCubic', function()
  395.                         {
  396.                             $(this)
  397.                             .attr('width',  $(this).width())
  398.                             .attr('height', $(this).height());
  399.                         });
  400.                     });
  401.                 }, 600);
  402.  
  403.                 if(true === _j.__isw)
  404.                     clearInterval(wait);
  405.  
  406.                 _j.__isw = true;
  407.             }
  408.         },
  409.         _sequency = function(arr)
  410.         {
  411.             _pagination.length    = _pagination.sliced.length + _pagination.length;
  412.             _pagination.maxQueues = Math.ceil(_pagination.length / _pagination.perQueue);
  413.             _pagination.startItem = Math.ceil((_pagination.curQueue - 1) * _pagination.perQueue);
  414.             _pagination.sliced    = arr.slice(_pagination.startItem, _pagination.perQueue);
  415.            
  416.             log.t107(' -- paginas: ' + ILLI.fn.o2s(_pagination), 1);
  417.         },
  418.         _update = function()
  419.         {
  420.             var __i = 'li', __a = 'a', _a = '<a />', __d = 'div', _d = '<div />';
  421.            
  422.             var sequence = function()
  423.             {
  424.                
  425.                 log.t107(' -- sequence: ' + _pagination.curQueue, 1);
  426.                
  427.                 if(false === _reg.j.isset('x'))
  428.                 {
  429.                     log.t107(' -- sequence: -- nothing to do');
  430.                     return;
  431.                 }
  432.                 if(_reg.j.get('x').length === 0 || typeof _reg.j.get('x').length === 'undefined')
  433.                 {
  434.                     log.t107(' -- sequence: -- nothing to do');
  435.                     return;
  436.                 }
  437.                
  438.                 _sequency(_reg.j.get('x'));
  439.                 _pagination.curQueue++;
  440.                
  441.                 log.t107(' -- sequence: ' + _pagination.curQueue + ', x =' + ILLI.fn.o2s(_reg.j.get('x')));
  442.                    
  443.                 var arr = [], attr = [];
  444.                
  445.                 _pagination.last = false;
  446.                    
  447.                 _reg.j.get('x').each(function(index)
  448.                 {
  449.                     if(index < _pagination.perQueue)
  450.                     {
  451.                         $(this).removeClass('tri4m-app-cinematic-resourceitem-insert');
  452.                        
  453.                         var a = {};
  454.                         $.each(this.attributes, function(i, attrib){
  455.                             var name = attrib.name;
  456.                             var value = attrib.value;
  457.                             a[name] = value;
  458.                         });
  459.                        
  460.                         attr[index] = a;
  461.                         arr[index]  = $(this).html();
  462.                     }
  463.                 });
  464.                
  465.                 _reg.j.get('x').each(function(index)
  466.                 {
  467.                     if(index < _pagination.perQueue)
  468.                     {
  469.                         log.t107('sequence: ' + _pagination.curQueue + ', splice ' + index + ' with 0,1 for ' + _pagination.perQueue);
  470.                         _reg.j.get('x').splice(0, 1);
  471.                     }
  472.                 });
  473.                
  474.                 if(_reg.j.get('x').length === 0)
  475.                 {
  476.                     _pagination.curQueue  = 0;
  477.                     _pagination.maxQueues = 0;
  478.                     _pagination.startItem = 0;
  479.                     _pagination.curItem   = 0;
  480.                     //_pagination.sliced    = [];
  481.                     _pagination.last      = true;
  482.                 }
  483.                
  484.                 log.t107('sequence: ' + _pagination.curQueue + ', x = ' + ILLI.fn.o2s(_reg.j.get('x')));                               
  485.                 _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.appendItems', [arr]);
  486.                
  487.                 $(__i + '.tri4m-ui-scrollroller-listitem-insert', _reg.j.get('l')).each(function(index)
  488.                 {
  489.                     if(typeof attr[index] !== 'undefined')
  490.                     {
  491.                         for(var i in attr[index])
  492.                         {
  493.                             $(this).attr(i, attr[index][i]);
  494.                         }
  495.                     }
  496.                 });
  497.                
  498.                 $(__i, _reg.j.get('l')).removeClass('tri4m-ui-scrollroller-listitem-insert');
  499.             };
  500.            
  501.             sequence();
  502.            
  503.             var i = $(__i, _reg.j.get('l')), a = $(__a + ':eq(0)', i),
  504.                 ba = _bnd.a.toValueObject(), bi = _bnd.i.toValueObject(), bt = _bnd.t.toValueObject(), bo = _bnd.o.toValueObject();
  505.                
  506.             _reg.j.set('a', a);
  507.             _reg.j.set('i', i);
  508.             _reg.j.get('a').addClass('tri4m-app-cinematic-resourcelink').hide();
  509.             _reg.j.get('i').addClass('tri4m-app-cinematic-resourceitem');
  510.            
  511.             a.each(function(index)
  512.             {
  513.                 for(var i in ba) $(this).unbind(i).bind(i, ba[i]);
  514.             });
  515.            
  516.             i.each(function(index)
  517.             {
  518.                 var t = $(this);
  519.                 t.addClass('tri4m-app-cinematic-resourceitem');
  520.                 //t.trigger('mouseout');
  521.                 for(var i in bi) t.unbind(i).bind(i, bi[i]);                               
  522.                 var it = $(this).find(__a + '.tri4m-app-cinematic-resourcethumb').eq(0);
  523.                 if(it.length === 0) t.append($(_a).addClass('tri4m-app-cinematic-resourcethumb').hide());
  524.                 var ol = $(this).find(__d + '.tri4m-app-cinematic-overlay').eq(0);
  525.                 if(ol.length === 0) t.append($(_d).addClass('tri4m-app-cinematic-overlay'));
  526.                
  527.                 var ds = t.data(_reg.n.get('dos')), dd = {}; dd.i = index;
  528.                 if(typeof ds === 'undefined')
  529.                 {
  530.                     dd.locked = false;
  531.                     t.data(_reg.n.get('dos'), dd);
  532.                     ds = dd;
  533.                 }
  534.                
  535.                 dij = t.data(_reg.n.get('dij'));
  536.                 if(typeof dij === 'undefined')
  537.                 {
  538.                     var json = t.attr('data-json'), data = {};
  539.                    
  540.                     if(json !== '') { try{ data = $.parseJSON(json); } catch(e){} }
  541.                     t.data(_reg.n.get('dij'), data).attr('data-json', null);
  542.                 }
  543.                
  544.                 dob = t.data(_reg.n.get('dob'));
  545.                 if(typeof dob === 'undefined')
  546.                 {
  547.                     var json = t.attr('data-css-bioscoop'), data = {};
  548.                    
  549.                     if(json !== '') { try{ data = $.parseJSON(json); } catch(e){} }
  550.                     t.data(_reg.n.get('dob'), data).attr('data-css-bioscoop', null);
  551.                 }
  552.             });
  553.            
  554.             _reg.j.set('t', $(__a + '.tri4m-app-cinematic-resourcethumb', i), false);
  555.             _reg.j.get('t').each(function(index)
  556.             {
  557.                 var t = $(this);
  558.                
  559.                 for(var i in bt) t.unbind(i).bind(i, bt[i]);
  560.  
  561.                 var ds = t.data(_reg.n.get('dts')), dd = {}; dd.i = index;
  562.                
  563.                 if(typeof ds === 'undefined')
  564.                 {
  565.                     ds = dd;
  566.                     t.data(_reg.n.get('dts'), dd);
  567.                 }
  568.                
  569.                 if(typeof ds.qs === 'undefined')
  570.                     t.trigger('tri4m.app.cinematic.thumblink.preloadImage', [(true === _reg.j.isset('x') && _reg.j.get('x').length > 0 ? _update : null)]);
  571.             });
  572.            
  573.             _reg.j.set('o', $(__d + '.tri4m-app-cinematic-overlay', i), false);
  574.             _reg.j.get('o').each(function(index)
  575.             {
  576.                 var t = $(this);
  577.                 /*
  578.                 var ds = t.data(_reg.n.get('dos')), dd = {}; dd.i = index;
  579.                 if(typeof ds === 'undefined')
  580.                 {
  581.                     dd.locked = false;
  582.                     t.data(_reg.n.get('dos'), dd);
  583.                     ds = dd;
  584.                 }
  585.                 */
  586.                
  587.                 for(var i in bo) t.unbind(i).bind(i, bo[i]);
  588.             });
  589.  
  590.         },
  591.         _d =
  592.         {
  593.             ii : function(index, src, callback)
  594.             {
  595.                 if(typeof src === 'undefined') return;
  596.                 var i = $('<a href="' + src + '" />').addClass('tri4m-app-cinematic-resourceitem-insert');
  597.                
  598.                 if(typeof index === 'undefined' || index === null)
  599.                     _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.appendItem', [i]);
  600.                
  601.                 _update();
  602.                
  603.                 if(typeof callback === 'function')
  604.                     callback();
  605.             },
  606.             ia : function(index, srcArr, callback)
  607.             {
  608.                 log.t111(ILLI.fn.o2s(srcArr), 1);
  609.                 if(typeof srcArr === 'undefined') return;
  610.                
  611.                 var c = new Array(), __i = 'li';
  612.                 for(var i in srcArr)
  613.                 {
  614.                     var a = $('<a href="' + srcArr[i] + '" />').addClass('tri4m-app-cinematic-resourceitem-insert');                                   
  615.                     //var d = $('<div />').addClass('tri4m-app-cinematic-overlay');                                
  616.                     //var j = $(d).add(a);
  617.                    
  618.                     c[i] = a;
  619.                 }
  620.                
  621.                 if(typeof index === 'undefined' || index === null)
  622.                     _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.appendItems', [c]);
  623.                
  624.                 if(_pagination.perQueue > 0)
  625.                 {
  626.                     log.t111(' -- x.length was ' + _reg.j.get('x').length, 1);
  627.                     _reg.j.set('x', $(__i + '.tri4m-ui-scrollroller-listitem-insert', _reg.j.get('l')));
  628.                     $(__i + '.tri4m-ui-scrollroller-listitem-insert', _reg.j.get('l')).remove();
  629.                    
  630.                     log.t111(' -- x.length is now ' + _reg.j.get('x').length, 1);
  631.                 }
  632.                
  633.                 _update();
  634.                
  635.                 if(typeof callback === 'function')
  636.                     callback();
  637.             }
  638.         },
  639.         _dom = function()
  640.         {
  641.             var j = _reg.j, _d = '<div />', _l = '<ul />',
  642.                 _b = (typeof __settings.bioscoop === 'string') ? $('#' + __settings.bioscoop) : __settings.bioscoop,
  643.                 __d = 'div', __i = 'li', __a = 'a', _a = '<a />', __l = 'ul',
  644.                 d = _b.find(__d).eq(0),
  645.                 l = _element.find(__l).eq(0); // 0: cur is ul
  646.  
  647.             j.register('b', _b, true);
  648.             j.register('d', ((d.length === 0) ? $(_d).appendTo(j.get('b')) : d), true);
  649.             j.register('l', ((l.length === 0) ? $(_element).wrap(_d) : l), false);
  650.             j.register('c', j.get('l').parent());
  651.             j.register('x', {}, false);
  652.             j.register('i', $(__i, _reg.j.get('l')), false);
  653.             j.register('a', $(__a, _reg.j.get('l')), false);
  654.             j.register('t', $(__a + '.tri4m-app-cinematic-resourcethumb', _reg.j.get('i')), false);
  655.             j.register('o', $(__d + '.tri4m-app-cinematic-overlay', _reg.j.get('i')), false);
  656.             j.register('j', $(_d).addClass('tri4m-app-cinematic-data').css({opacity : 0}));
  657.  
  658.             j.get('c').addClass('tri4m-ui-scrollroller-x tri4m-app-cinematics')
  659.             j.get('l').addClass('tri4m-app-cinematic-list');
  660.             j.get('b').addClass('tri4m-app-cinematic-bioscoop').append($(_d).addClass('tri4m-app-cinematic-doek'));
  661.             j.get('d').addClass('tri4m-app-cinematic-decorontwerp')
  662.                 .css({overflow: 'hidden'})
  663.                 .data(_reg.n.get('dcs'), { initialized : false });
  664.                
  665.             if(_pagination.perQueue > 0)
  666.             {
  667.                 _reg.j.set('x', $(__i, _reg.j.get('l')));
  668.                 $(__i, _reg.j.get('l')).remove();
  669.             }
  670.            
  671.             $.tri4m.global.__PROTO__.__TRI4M__.__LAYOUT__.__SCROLLROLLER__(j.get('c'),
  672.             {
  673.                 sensitive: true,
  674.                 easing :
  675.                 {
  676.                     duration : 400,
  677.                     callback :
  678.                     {
  679.                         item :
  680.                         {
  681.                             deactivate : function(e)
  682.                             {
  683.                                 $(this).trigger('tri4m.ui.scrollroller.container.activateFirst');
  684.                             }
  685.                         }
  686.                     }
  687.                 }
  688.             });
  689.            
  690.             if(true === __settings.autoplay.enabled)
  691.                 $.tri4m.global.__PROTO__.__TRI4M__.__LAYOUT__.__TIMER__(_reg.j.get('c'),
  692.                 {
  693.                     timer     : __settings.timer,
  694.                     autostart : __settings.autoplay.autostart,
  695.                     interval  : __settings.autoplay.interval,
  696.                     methods   :
  697.                     {
  698.                         action : _bnd.l.get('tri4m.app.cinematic.container.nextItem')
  699.                     }
  700.                 });
  701.         },
  702.         _type = function(src)
  703.         {
  704.             var type = null;
  705.            
  706.             if(src.match(/png/i))
  707.             {
  708.                 log.t108('try load: PNG ' + src);
  709.                 type = 'png';
  710.             }
  711.             else
  712.             if(src.match(/jpg/i))
  713.             {
  714.                 log.t108('try load: JPG ' + src);
  715.                 type = 'jpg';
  716.             }
  717.             else
  718.             if(src.match(/gif/i))
  719.             {
  720.                 log.t108('try load: GIF ' + src);
  721.                 type = 'gif';
  722.             }
  723.             else
  724.             if(src.match(/flv/i))
  725.             {
  726.                 log.t108('try load: FLV ' + src);
  727.                 type = 'flv';
  728.             }
  729.             else
  730.             if(src.match(/mp3/i))
  731.             {
  732.                 log.t108('try load: MP3 ' + src);
  733.                 type = 'mp3';
  734.             }
  735.             else
  736.             if(src.match(/avi/i))
  737.             {
  738.                 log.t108('try load: AVI ' + src);
  739.                 type = 'avi';
  740.             }
  741.             else
  742.             if(src.match(/youtu/i))
  743.             {
  744.                 log.t108('try load: YOUTUBE ' + src);
  745.                 type = 'youtube';
  746.             }
  747.             else
  748.             {
  749.                 log.t108('try load: unknown source ' + src);
  750.             }
  751.            
  752.             return type;
  753.         },
  754.         _ctrl =
  755.         {
  756.             onActivation : function(scrollrollerItem)
  757.             {
  758.                 var l = scrollrollerItem.parent().data('tri4m.ui.scrollroller.listitem.state'),
  759.                     i = scrollrollerItem.data('tri4m.ui.scrollroller.listitem.state');
  760.                
  761.                 if(typeof l !== 'undefined')
  762.                 {
  763.                     if(typeof l.ai !== 'undefined')
  764.                     {
  765.                         l.ai.trigger('tri4m.app.cinematic.listitem.deactivate');
  766.                     }
  767.                 }
  768.                
  769.                 //_reg.j.get('c').trigger('tri4m.data.timer.container.stop');
  770.                
  771.                 scrollrollerItem.parent().data('tri4m.ui.scrollroller.listitem.state', {ai : scrollrollerItem});
  772.                 scrollrollerItem.trigger('tri4m.app.cinematic.listitem.activate');
  773.                 scrollrollerItem.find('a.tri4m-app-cinematic-resourcelink:eq(0)').trigger('tri4m.app.cinematic.reslink.preloadImage', [function()
  774.                 {
  775.                     _reg.j.get('c').trigger('tri4m.data.timer.container.run');
  776.                 }]);
  777.             }
  778.         };
  779.        
  780.        
  781.         (function()
  782.         {
  783.             _reg.j = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  784.             _reg.n = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  785.             _bnd.a = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  786.             _bnd.t = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  787.             _bnd.i = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  788.             _bnd.l = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  789.             _bnd.r = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  790.             _bnd.o = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  791.             _bnd.d = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  792.  
  793.             _reg.n.register('dcs', 'tri4m.app.cinematic.state');
  794.             _reg.n.register('dts', 'tri4m.app.cinematic.thumbstate');
  795.             _reg.n.register('dos', 'tri4m.app.cinematic.overlaystate');
  796.             _reg.n.register('dij', 'tri4m.app.cinematic.json');
  797.             _reg.n.register('dob', 'tri4m.app.cinematic.css.bioscoop');
  798.             _reg.n.register('dcb', 'tri4m.app.cinematic.cache.css.bioscoop');
  799.  
  800.             _bnd.o
  801.             .register('tri4m.app.cinematic.listitem.overlay.show', function(e, a, c)
  802.             {
  803.                 log.t109('tri4m.app.cinematic.listitem.overlay.show', 1);
  804.                 var t = $(this), o = (a && a > 0 && a < 1) ? a : 1,
  805.                      ds = t.parent().data(_reg.n.get('dos'));
  806.                
  807.                 if(false === ds.locked)
  808.                 {
  809.                     t.stop().animate({opacity: 0.5}, 500, 'easeOutQuad');
  810.                     $('img', t.parent()).stop().animate({opacity: 0.4}, 500, 'easeOutQuad');
  811.                    
  812.                 }
  813.             })
  814.             .register('tri4m.app.cinematic.listitem.overlay.hide', function(e, a, c)
  815.             {
  816.                 log.t109('tri4m.app.cinematic.listitem.overlay.hide', 1);
  817.                 var t = $(this), o = (a && a > 0 && a < 1) ? a : 0, h = 0,
  818.                      ds = t.parent().data(_reg.n.get('dos'));
  819.                
  820.                 if(false === ds.locked)
  821.                 {
  822.                     /*
  823.                     $('img', t.parent()).stop().animate({opacity: 0.7}, 50, 'easeOutQuad');
  824.                     t.stop().animate({opacity: 0}, 50, 'easeOutQuad', function()
  825.                     {
  826.                         //$(this).css({height: h});
  827.                     });
  828.                     */
  829.                     t.stop().css({opacity: 0});
  830.                     $('img', t.parent()).stop().css({opacity: 0.7});
  831.                 }
  832.             })
  833.             .register('tri4m.app.cinematic.listitem.overlay.activate', function(e, a, c)
  834.             {
  835.                 log.t109('tri4m.app.cinematic.listitem.overlay.loading', 1);
  836.                 var t = $(this), o = (a && a > 0 && a < 1) ? a : 0, h = 0,
  837.                      ds = t.parent().data(_reg.n.get('dos'));
  838.                
  839.                 if(false === ds.locked)
  840.                 {
  841.                     $('img', t.parent()).stop().animate({opacity: 1}, 500, 'easeOutQuad');
  842.                     t.stop().animate({opacity: 0}, 500, 'easeOutQuad', function()
  843.                     {
  844.                         //$(this).css({height: h});
  845.                     });
  846.                 }
  847.             })
  848.             .register('tri4m.app.cinematic.listitem.overlay.complete', function(e, a, c)
  849.             {
  850.                 log.t109('tri4m.app.cinematic.listitem.overlay.complete', 1);
  851.                 var t = $(this);
  852.                
  853.                 $('img', t.parent()).stop().animate({opacity: 0.8}, 800, 'easeOutQuad');
  854.                 t.stop().animate({opacity: 0.3}, 800, 'easeOutQuad');
  855.             });
  856.            
  857.             _bnd.d
  858.             .register('tri4m.app.cinematic.data.show', function(e, c)
  859.             {
  860.                 log.t109('tri4m.app.cinematic.data.show', 1);
  861.                 var t = $(this);
  862.                 t.animate({opacity : 0.7}, 2500, c);
  863.             })
  864.             .register('tri4m.app.cinematic.data.hide', function(e, c)
  865.             {
  866.                 log.t109('tri4m.app.cinematic.data.hide', 1);
  867.                 var t = $(this);
  868.                 var b = t.css('bottom');
  869.                 t.animate({opacity : 0, bottom : parseInt(t.css('bottom'), 10) + 50}, 200, 'easeOutQuad', function()
  870.                 {
  871.                     $(this).css({bottom : b});
  872.                     if(typeof c === 'function') c();
  873.                 });
  874.             });
  875.            
  876.             _bnd.i
  877.             .register('click', function()
  878.             {
  879.                 log.t109('tri4m.app.cinematic.listitem.click', 1);
  880.                 var t = $(this);
  881.                 _reg.j.get('l').trigger('tri4m.app.cinematic.container.stop');
  882.                 t.trigger('tri4m.ui.scrollroller.listitem.activate', [_ctrl.onActivation]);
  883.             })
  884.             .register('mouseover', function()
  885.             {
  886.                 log.t109('tri4m.app.cinematic.listitem.mouseenter', 1);
  887.                 var t = $(this);
  888.                 t.find('div.tri4m-app-cinematic-overlay:eq(0)').trigger('tri4m.app.cinematic.listitem.overlay.hide');
  889.             })
  890.             .register('mouseout', function()
  891.             {
  892.                 log.t109('tri4m.app.cinematic.listitem.mouseleave', 1);
  893.                 var t = $(this);
  894.                 t.find('div.tri4m-app-cinematic-overlay:eq(0)').trigger('tri4m.app.cinematic.listitem.overlay.show');
  895.             })
  896.             .register('tri4m.app.cinematic.listitem.activate', function()
  897.             {
  898.                 log.t109('tri4m.app.cinematic.listitem.activate', 1);
  899.                 var t = $(this), ds = t.data(_reg.n.get('dos'));                               
  900.                 t.find('div.tri4m-app-cinematic-overlay:eq(0)').trigger('tri4m.app.cinematic.listitem.overlay.activate');
  901.                 ds.locked = true; t.data(_reg.n.get('dos'), ds);
  902.             })
  903.             .register('tri4m.app.cinematic.listitem.deactivate', function()
  904.             {
  905.                 log.t109('tri4m.app.cinematic.listitem.deactivate', 1);
  906.                 var t = $(this), ds = t.data(_reg.n.get('dos'));
  907.                 ds.locked = false; t.data(_reg.n.get('dos'), ds);                              
  908.                 t.find('div.tri4m-app-cinematic-overlay:eq(0)').trigger('tri4m.app.cinematic.listitem.overlay.show');
  909.             });
  910.            
  911.             _bnd.l
  912.             .register('tri4m.app.cinematic.container.insertItemAfter', function(e, i, c)
  913.             {
  914.                 log.t109('tri4m.app.cinematic.container.insertItemAfter', 1);
  915.             }, true)
  916.             .register('tri4m.app.cinematic.container.insertItemBefore', function(e, i, c)
  917.             {
  918.                 log.t109('tri4m.app.cinematic.container.insertItemBefore', 1);
  919.             }, true)
  920.             .register('tri4m.app.cinematic.container.appendItem', function(e, imgSrc, c)
  921.             {
  922.                 log.t109('tri4m.app.cinematic.container.appendItem', 1);
  923.                 _d.ii(null, imgSrc, c);
  924.             }, true)
  925.             .register('tri4m.app.cinematic.container.appendItems', function(e, imgSrcArray, c)
  926.             {
  927.                 log.t109('tri4m.app.cinematic.container.appendItems' + ILLI.fn.o2s(imgSrcArray), 1);
  928.                 _d.ia(null, imgSrcArray, c);
  929.             }, true)
  930.             .register('tri4m.app.cinematic.container.prependItem', function(e, i, item, c)
  931.             {
  932.                 log.t109('tri4m.app.cinematic.container.prependItems', 1);
  933.             }, true)
  934.             .register('tri4m.app.cinematic.container.prependItems', function(e, i, itemArray, c)
  935.             {
  936.                 log.t109('tri4m.app.cinematic.container.prependItems', 1);
  937.             }, true)
  938.             .register('tri4m.app.cinematic.container.removeItem', function(e, i, c)
  939.             {
  940.                 log.t109('tri4m.app.cinematic.container.removeItem', 1);
  941.                 var t  = $(e.target);
  942.                 t.trigger('click');
  943.                 t.trigger('tri4m.ui.scrollroller.container.removeItem', [i, function()
  944.                 {
  945.                     t.trigger('tri4m.app.cinematic.container.nextItem');
  946.                 }]);
  947.             }, true)
  948.             .register('tri4m.app.cinematic.container.nextItem', function(e, c)
  949.             {
  950.                 log.t109('tri4m.app.cinematic.container.nextItem', 1);
  951.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  952.                 _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.activateNextOrFirst', [_ctrl.onActivation]);
  953.             }, true)
  954.             .register('tri4m.app.cinematic.container.firstItem', function(e, c)
  955.             {
  956.                 log.t109('tri4m.app.cinematic.container.firstItem', 1);
  957.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  958.                 _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.activateFirst', [_ctrl.onActivation]);
  959.             }, true)
  960.             .register('tri4m.app.cinematic.container.prevItem', function(e, c)
  961.             {
  962.                 log.t109('tri4m.app.cinematic.container.prevItem', 1);
  963.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  964.                 _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.activatePrevOrLast', [_ctrl.onActivation]);
  965.                
  966.             }, true)
  967.             .register('tri4m.app.cinematic.container.play', function(e, c)
  968.             {
  969.                 log.t109('tri4m.app.cinematic.container.play', 1);
  970.                 _reg.j.get('c').trigger('tri4m.data.timer.container.play');
  971.                 _reg.j.get('l').trigger('tri4m.app.cinematic.container.nextItem');
  972.             }, true)
  973.             .register('tri4m.app.cinematic.container.stop', function(e, c)
  974.             {
  975.                 log.t109('tri4m.app.cinematic.container.stop', 1);
  976.                 _reg.j.get('c').trigger('tri4m.data.timer.container.stop');
  977.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  978.             }, true)
  979.             .register('tri4m.app.cinematic.container.prev', function(e, c)
  980.             {
  981.                 log.t109('tri4m.app.cinematic.container.prev', 1);
  982.                 _reg.j.get('c').trigger('tri4m.data.timer.container.stop');
  983.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  984.                 _reg.j.get('l').trigger('tri4m.app.cinematic.container.prevItem');
  985.             }, true)
  986.             .register('tri4m.app.cinematic.container.next', function(e, c)
  987.             {
  988.                 log.t109('tri4m.app.cinematic.container.next', 1);
  989.                 _reg.j.get('c').trigger('tri4m.data.timer.container.stop');
  990.                 _reg.j.get('c').trigger('tri4m.data.timer.bar.reset');
  991.                 _reg.j.get('l').trigger('tri4m.app.cinematic.container.nextItem');
  992.             }, true);
  993.  
  994.             _bnd.t
  995.             .register('tri4m.app.cinematic.thumblink.preloadImage', function(e, c)
  996.             {
  997.                 log.t109('tri4m.app.cinematic.thumblink.preloadImage', 1);
  998.                
  999.                 if(typeof ILLI === 'undefined')
  1000.                 {
  1001.                     $(this).parent().prepend('<span>where is ILLI?</span>');
  1002.                     log.t107('ILLI is undefined (required for thumb-url)', 3);
  1003.                     return;
  1004.                 }
  1005.  
  1006.  
  1007.                 var t = $(this), p = t.parent().css({opacity : 0}),
  1008.                     i = parseInt(t.data(_reg.n.get('dts')).i, 10), href = $('a.tri4m-app-cinematic-resourcelink', p).attr('href'),
  1009.                     ds = t.data(_reg.n.get('dts')),
  1010.                     c = c;
  1011.  
  1012.                 log.t107('init ' + i);
  1013.                
  1014.                 if(typeof _queue[i] === 'undefined')
  1015.                 {
  1016.                     log.t107('push to queue ' + i);
  1017.                     _queue[i] =
  1018.                     {
  1019.                         status    : false,
  1020.                         error     : false,
  1021.                         append    : false,
  1022.                         kicked    : false,
  1023.                         lookup    : null,
  1024.                         islooking : false,
  1025.                         attempt   : 0,
  1026.                         thumb     : t,
  1027.                         parent    : p,
  1028.                         src       : null,
  1029.                         image     : $('<img />').addClass('tri4m-app-cinematic-thumbnail'),
  1030.                         props     : {}
  1031.                     };
  1032.                 }
  1033.                
  1034.                 if(_queue[i].status === true)
  1035.                 {
  1036.                     log.t107(' -- nothing to do ' + i);
  1037.                     return;
  1038.                 }
  1039.                
  1040.                 ds.qs = _queue[i];
  1041.                 t.data(_reg.n.get('dts'), ds);
  1042.                
  1043.                 var islast = (_queue.length === _reg.j.get('t').length), isfirst = (i === 0),
  1044.                 shutdown =
  1045.                 {
  1046.                     dts : function(i)
  1047.                     {
  1048.                         var ds = _queue[i].thumb.data(_reg.n.get('dts'));
  1049.                         ds.qs = _queue[i];
  1050.                         _queue[i].append = true;
  1051.                         _queue[i].status = true;
  1052.                         _queue[i].thumb.data(_reg.n.get('dts'), ds);
  1053.                     },
  1054.                     cbs : function(i)
  1055.                     {
  1056.                         __settings.callback.thumbs.beforeShow(_queue[i].parent, i);
  1057.                         _queue[i].thumb.trigger('mouseout');
  1058.                     },
  1059.                     spl : function()
  1060.                     {
  1061.                     },
  1062.                     vis : function(i)
  1063.                     {
  1064.                         /*
  1065.                             provide width:auto
  1066.                            
  1067.                             t.id (width) in scrollroller-update returns 0 on init if the list.-item-width has no defination in css.
  1068.                             execute it again to calculate the new container with
  1069.                         */
  1070.                         _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.update');
  1071.                         if(__settings.thumbs.asCssBackgroundImage === false)
  1072.                         {
  1073.                         }
  1074.                         else
  1075.                         {
  1076.                         }
  1077.                        
  1078.                        
  1079.                         _queue[i].parent.css({overflow: 'hidden'});
  1080.                        
  1081.                         if(typeof ILLI === 'undefined'
  1082.                         || false === __settings.thumbs.preloadAllBeforeShow)
  1083.                         {
  1084.                             _queue[i].parent.animate({opacity : 1}, 500, function()
  1085.                             {
  1086.                                 __settings.callback.thumbs.afterShow(_queue[i].parent, i);
  1087.                                 shutdown.spl();
  1088.                             });
  1089.                            
  1090.                             return;
  1091.                         }
  1092.                        
  1093.                         ILLI.fn.idle(_queue[i].parent, (i + 1) * 100, function()
  1094.                         {
  1095.                             _queue[i].parent.animate({opacity : 1}, 500, function()
  1096.                             {
  1097.                                 __settings.callback.thumbs.afterShow(_queue[i].parent, i);
  1098.                                 shutdown.spl();
  1099.                             });
  1100.                            
  1101.                         });
  1102.                     },
  1103.                     cfs : function(i)
  1104.                     {
  1105.                         __settings.callback.images.firstInit();
  1106.                         _reg.j.get('l').trigger('tri4m.app.cinematic.container.nextItem');
  1107.                     },
  1108.                     clt : null,
  1109.                     cls : function(i)
  1110.                     {
  1111.                         log.t110(' -- stack complete ');
  1112.                         if(typeof c === 'function')
  1113.                         {
  1114.                             log.t110('tri4m.app.cinematic.thumblink.preloadImage: ' + ILLI.fn.o2s(c), 1);
  1115.                             c();
  1116.                         }
  1117.                         //if(_pagination.curQueue === _pagination.maxQueues)
  1118.                        
  1119.                         log.t107(' -- last item, pagination is ' + ILLI.fn.o2s(_pagination), 1);
  1120.                         if(true === _pagination.last)
  1121.                         {
  1122.                             if(shutdown.clt === null)
  1123.                                 shutdown.clt = setInterval(function()
  1124.                                 {
  1125.                                     clearInterval(shutdown.clt);
  1126.                                     shutdown.clt = null;
  1127.                                     log.t110('_settings.callback.thumbs.ready: ' + ILLI.fn.o2s(__settings.callback.thumbs.ready));
  1128.                                     __settings.callback.thumbs.ready(_reg.j.get('l'), 1);
  1129.                                    
  1130.                                 }, (_pagination.perQueue) * 500);
  1131.                         }
  1132.                     }
  1133.                 },
  1134.                 dequeue = function()
  1135.                 {
  1136.                     log.t107('try dequeue: caller is ' + i);
  1137.                    
  1138.                     if(true === __settings.thumbs.preloadAllBeforeShow)
  1139.                     {
  1140.                         if(false === islast)
  1141.                             return;
  1142.  
  1143.                         log.t107('try dequeue: preloadAllBeforeShow = true');
  1144.  
  1145.                         var success = true;
  1146.                        
  1147.                         for(var idx in _queue)
  1148.                             if(_queue[idx].status === false)
  1149.                                 success = false;
  1150.  
  1151.                         if(false === success)
  1152.                         {
  1153.                             log.t107('try dequeue: success = false');
  1154.                             var refetch = setInterval(function()
  1155.                             {
  1156.                                 clearInterval(refetch);
  1157.  
  1158.                                 log.t107('try again; attempt = ' + _queue[i].attempt );
  1159.                                 dequeue();
  1160.                             }, 500);
  1161.                             return;
  1162.                         }
  1163.                     }
  1164.                    
  1165.  
  1166.                     log.t107('try dequeue: start iteration');
  1167.                    
  1168.                     for(var idx in _queue)
  1169.                     {
  1170.                         idx = parseInt(idx, 10);
  1171.                         if(true === _queue[idx].error)
  1172.                         {
  1173.                             log.t107('try dequeue: error: ' + _queue[idx].src, 3);
  1174.                             log.t107('try dequeue: -- continue');
  1175.                             continue;
  1176.                         }
  1177.  
  1178.                         (function(curIndex, caller)
  1179.                         {
  1180.                             var islast = (_queue.length === (curIndex + 1));
  1181.                             var isfirst = curIndex === 0;
  1182.                            
  1183.                             log.t107('dequeue index ' + curIndex + ' === isfirst = ' + isfirst, (true === isfirst ? 1 : 0));
  1184.                             log.t107('dequeue index ' + curIndex + ' === islast = ' + islast, (true === islast ? 1 : 0));
  1185.                            
  1186.                             if(null !== _queue[curIndex].lookup)
  1187.                                 return;
  1188.                            
  1189.                             _queue[curIndex].lookup = setInterval(function()
  1190.                             {
  1191.                                 if(true === _queue[curIndex].kicked)
  1192.                                 {
  1193.                                     log.t107('try dequeue: waiting: -- -- index ' + curIndex + ' already kicked');
  1194.                                     clearInterval(_queue[curIndex].lookup);
  1195.                                     return;
  1196.                                 }
  1197.                                
  1198.                                 if(_queue[curIndex].status === false)
  1199.                                 {
  1200.                                     log.t107('try dequeue: waiting: preloadAllBeforeShow = ' + __settings.thumbs.preloadAllBeforeShow + ', status = '+ _queue[curIndex].status +', try = ' + _queue[curIndex].attempt + ' of ' + _queue.length + ', index = ' + curIndex + ', caller = ' + caller, 0);
  1201.  
  1202.                                     if(_queue[curIndex].attempt > _queue.length || _queue[curIndex].attempt === _queue.length)
  1203.                                     {
  1204.                                         log.t107('try dequeue: waiting: -- error: ' + _queue[curIndex].src);
  1205.                                         log.t107('try dequeue: waiting: -- preloadAllBeforeShow =  ' + __settings.thumbs.preloadAllBeforeShow + ', status = '+ _queue[curIndex].status +', max.attempts = '+_queue.length+', index = ' + curIndex + ', caller = ' + caller, 3);
  1206.                                         log.t107('try dequeue: waiting: -- index ' + curIndex + ' was kicked from #list (idle flood), caller = ' + caller + ' in try = ' + _queue[curIndex].attempt + ' of ' + _queue.length, 3);
  1207.                                         log.t107('try dequeue: waiting: -- remove ' + ILLI.fn.o2s(_queue[curIndex]), 3);
  1208.                                         _queue[curIndex].kicked = true;
  1209.                                         _queue[curIndex].error  = true;
  1210.                                         clearInterval(_queue[curIndex].lookup);
  1211.                                         _removed[curIndex] = _queue[curIndex];
  1212.                                         _reg.j.get('l').trigger('tri4m.app.cinematic.container.removeItem', [curIndex]);
  1213.                                     }
  1214.                                    
  1215.                                     _queue[curIndex].attempt++;
  1216.  
  1217.                                     return;
  1218.                                 }
  1219.  
  1220.                                 clearInterval(_queue[curIndex].lookup);
  1221.                                
  1222.                                 if(true === _queue[curIndex].append)
  1223.                                     return;
  1224.                                
  1225.                                 shutdown.dts(curIndex);
  1226.                                
  1227.                                 log.t107('try display: index ' + curIndex + ' isFirst ' + isfirst + ' type ' + ILLI.fn.type(curIndex));                                            
  1228.                                 log.t107('try dequeue: asCssBackgroundImage = ' + __settings.thumbs.asCssBackgroundImage + ', index ' + curIndex);
  1229.  
  1230.                                 var p = _queue[curIndex].props;
  1231.                                 if(true === __settings.thumbs.asCssBackgroundImage)
  1232.                                 {
  1233.                                     _queue[curIndex].parent.css({'background-image' : 'url("' + _queue[curIndex].src + '")',
  1234.                                     //  width : p.width, height: p.height, 'background-position' : 'center'
  1235.                                     });
  1236.                                 }
  1237.                                 else
  1238.                                 {
  1239.                                     //_queue[curIndex].image.css({left : p.left, top: p.top, position: 'absolute'});
  1240.                                     _queue[curIndex].parent.prepend(_queue[curIndex].image);
  1241.                                 }
  1242.                                
  1243.                                 shutdown.cbs(curIndex);
  1244.                                 shutdown.vis(curIndex);
  1245.                                 if(true === isfirst)
  1246.                                     shutdown.cfs(curIndex);
  1247.  
  1248.                                 if(true === islast)
  1249.                                     shutdown.cls(curIndex);
  1250.  
  1251.                             }, 700);
  1252.                         })(idx, i);
  1253.                     }
  1254.                 },
  1255.                 load = function(src)
  1256.                 {
  1257.                     log.t107('try load: ' + src);
  1258.                    
  1259.                     if(__settings.thumbs.enabled === false)
  1260.                     {
  1261.                         log.t107(' -- disabled: thumbs', 1);
  1262.                        
  1263.                         shutdown.dts(i);
  1264.                         shutdown.cbs(i);
  1265.                         shutdown.vis(i);
  1266.                         if(true === isfirst)
  1267.                             shutdown.cfs(i);
  1268.  
  1269.                         if(true === islast)
  1270.                             shutdown.cls(i);
  1271.                        
  1272.                         return;
  1273.                     }
  1274.                    
  1275.                     var IMG = new Image(), src = src;
  1276.                    
  1277.                     $(IMG)
  1278.                     .addClass('dummy')
  1279.                     .hide()
  1280.                     .load(function()
  1281.                     {
  1282.                         log.t107('try load: -- complete: ' + src, 1);
  1283.                        
  1284.                         $(IMG).remove();
  1285.                        
  1286.                         t.wait = setInterval(function()
  1287.                         {
  1288.                             clearInterval(t.wait);
  1289.                             log.t107('try append: ' + src);
  1290.                             _queue[i].image.attr('src', src);
  1291.                             _queue[i].src = src;
  1292.                             _queue[i].status = true;
  1293.                             //_queue[i].props = _c.l(IMG, _queue[i].thumb);
  1294.                             _queue[i].props = _c.i(IMG, _queue[i].thumb);
  1295.                             dequeue();
  1296.  
  1297.                         }, 100);
  1298.  
  1299.                         IMG.onload = function(){};
  1300.                     })
  1301.                     .error(function()
  1302.                     {
  1303.                         log.t107('try load: error: ' + src, 3);
  1304.                        
  1305.                         _queue[i].image.attr('src', src);
  1306.                         _queue[i].src = src;
  1307.                         _queue[i].status = true;
  1308.                         _queue[i].error = true;
  1309.                        
  1310.                         dequeue();
  1311.                        
  1312.                         IMG.onerror = function(){};
  1313.                     });
  1314.  
  1315.                     $(IMG).attr('src', src);
  1316.                     t.append(IMG);
  1317.                 };
  1318.                
  1319.                 log.t107('index ' + i + ' === isfirst = ' + isfirst, (true === isfirst ? 1 : 0));
  1320.                 log.t107('index ' + i + ' === islast = '  + islast,  (true === islast  ? 1 : 0));
  1321.  
  1322.                 t.idle = setInterval(function()
  1323.                 {
  1324.                     clearInterval(t.idle);
  1325.                     log.t107('try POST: thumb for ' + i + ': ' + href);
  1326.                    
  1327.                     var provider = _type(href), url = null;
  1328.                     switch(provider)
  1329.                     {
  1330.                         case 'jpg':
  1331.                         case 'png':
  1332.                         case 'gif':
  1333.                             p.addClass('tri4m-app-cinematic-resourcehires-image');
  1334.                             // create thumb from img-href
  1335.                             var h = p.height(), w = p.width();
  1336.                            
  1337.                             try
  1338.                             {
  1339.                             ILLI.router.create.thumb(href, h, w, function(url, route, data)
  1340.                             {
  1341.                                 log.t107('try POST: -- complete: thumb ' + i + ' is ' + url, 1);
  1342.                                 t.attr('href', url);                                   
  1343.                                 load(url);
  1344.                             })
  1345.                             }
  1346.                             catch(e)
  1347.                             {
  1348.                                 if(e instanceof ILLI.router.error)
  1349.                                 {
  1350.                                     switch(e.number)
  1351.                                     {
  1352.                                         case 101:
  1353.                                         case 102:
  1354.                                         case 103:
  1355.                                             log.t107(' -- index ' + i + ': ' + e.name + ': ' + e.description + '. Update your CSS @li-element to solve this problem.', 3);
  1356.                                             break;
  1357.                                         default:
  1358.                                             log.t107(' -- index ' + i + ': ' + e.name + ': ' + (e.description || 'Unknown Error') + '.', 3);
  1359.                                             break;
  1360.                                     }
  1361.                                 }
  1362.                             }
  1363.                             break;
  1364.                         case 'youtube':
  1365.                             p.addClass('tri4m-app-cinematic-resourcehires-youtube');
  1366.                             // get json from video-href
  1367.                             ILLI.router.create.json(href, provider, function(json, data)
  1368.                             {
  1369.                                 log.t107('try POST: -- complete: thumb ' + i + ' is ' + ILLI.fn.o2s(json), 1);
  1370.                                 t.data('youtube.json', json.data);
  1371.                                
  1372.                                 t.attr('title', t.data('youtube.json').title);
  1373.                                 t.attr('duration', t.data('youtube.json').duration);
  1374.                                
  1375.                                 var url = t.data('youtube.json').thumbnail.hqDefault;
  1376.                                 t.attr('href', url);                                   
  1377.                                 load(url);
  1378.                             });
  1379.                             break;
  1380.                         case 'flv':
  1381.                             p.addClass('tri4m-app-cinematic-resourcehires-flv');
  1382.                             break;
  1383.                         case 'avi':
  1384.                             p.addClass('tri4m-app-cinematic-resourcehires-avi');
  1385.                             break;
  1386.                         case 'mp3':
  1387.                             p.addClass('tri4m-app-cinematic-resourcehires-mp3');
  1388.                             break;
  1389.                     }
  1390.                 }, 50);
  1391.             });
  1392.  
  1393.             _bnd.a
  1394.             .register('tri4m.app.cinematic.reslink.preloadImage', function(e, c)
  1395.             {
  1396.                 log.t109('tri4m.app.cinematic.reslink.preloadImage', 1);
  1397.                
  1398.                 var t = $(this), src = t.attr('href'),
  1399.                     data = t.parent().data(_reg.n.get('dij')),
  1400.                     bioscoopoptions = t.parent().data(_reg.n.get('dob')), callback = c,
  1401.                 load = function()
  1402.                 {
  1403.                     log.t108('try load: ' + src);
  1404.                     _reg.j.get('d').html('');
  1405.                     //_reg.j.get('j').html('').attr('style', null);
  1406.                     //alert(_reg.j.get('b').attr('id'));
  1407.                    
  1408.                     switch(_type(src))
  1409.                     {
  1410.                         case 'jpg':
  1411.                         case 'png':
  1412.                         case 'gif':
  1413.                             if(_reg.j.get('d').children('img' + "[src='" + src + "']").length === 0)
  1414.                             {
  1415.                                
  1416.                                 var IMG = new Image(), img = $('<img />')
  1417.                                     .css({position: 'absolute'})
  1418.                                     .addClass('tri4m-app-cinematic-image')
  1419.                                     .css('position', 'absolute');
  1420.                                
  1421.                                 $(IMG).hide()
  1422.                                 .load(function()
  1423.                                 {
  1424.                                     //$(IMG).show(); _reg.j.get('d').css({opacity : 1}); return;
  1425.                                     log.t108('try load: -- complete: ' + src, 1);
  1426.                                     var css = _c.i(IMG, _reg.j.get('d')), size = 0;
  1427.                                    
  1428.                                     $(IMG).remove();
  1429.                                     _reg.j.get('j').html('').css({opacity : 0});
  1430.                                     if(typeof data !== 'undefined') for(var i in data)
  1431.                                     {
  1432.                                         _reg.j.get('j').append($('<div />').addClass('tri4m-app-cinematic-data-' + i).html($('<span />').html(data[i])));
  1433.                                         size++;
  1434.                                     }
  1435.                                    
  1436.                                     if(size > 0)
  1437.                                     {
  1438.                                         var bd = _bnd.d.toValueObject();
  1439.                                         for(var i in bd) { _reg.j.get('j').unbind(i).bind(i, bd[i]); }
  1440.                                         _reg.j.get('d').append(_reg.j.get('j'));
  1441.                                     }
  1442.                                    
  1443.                                     t.prependHTML = setInterval(function()
  1444.                                     {
  1445.                                         clearInterval(t.prependHTML);
  1446.                                        
  1447.                                         log.t108('try load: append: ' + src);
  1448.                                         log.t108('try dequeue: asCssBackgroundImage = ' + __settings.images.asCssBackgroundImage);
  1449.                                        
  1450.                                         (true === __settings.images.asCssBackgroundImage)
  1451.                                             ? _reg.j.get('d').css({'background-image' : 'url("' + src + '")'})
  1452.                                             : _reg.j.get('d').prepend(img.attr('src', src).css(css));
  1453.                                        
  1454.                                         t.parent().find('div.tri4m-app-cinematic-overlay:eq(0)').trigger('tri4m.app.cinematic.listitem.overlay.complete');
  1455.                                         _reg.j.get('d').animate({opacity : 1}, 500, function()
  1456.                                         {
  1457.                                             log.t108('try load: -- success (new source): ' + src + '::' + _reg.j.get('j').attr('class'));
  1458.                                             _reg.j.get('j').trigger('tri4m.app.cinematic.data.show');
  1459.                                             if(typeof callback === 'function') callback();
  1460.                                         });
  1461.                                     }, 100);
  1462.                                        
  1463.                                     IMG.onload = function(){};
  1464.                                 })
  1465.                                 .error(function()
  1466.                                 {
  1467.                                     log.t108('try load: -- error: ' + src, 3);
  1468.                                     IMG.onerror = function(){};
  1469.                                     $(IMG).remove(); IMG = null;
  1470.                                 });
  1471.  
  1472.                                 $(IMG).attr('src', src);
  1473.                                 _reg.j.get('d').prepend(IMG);
  1474.  
  1475.                             }
  1476.                             else
  1477.                             {
  1478.                                 log.t108('try load: known source ' + src);
  1479.                                
  1480.                                 var img = _reg.j.get('d').children('img' + "[src='" + src + "']");
  1481.                                 img.show();
  1482.                                 _reg.j.get('d').animate({opacity : 1}, 500, function()
  1483.                                 {
  1484.                                     log.t108('try load: -- success (known source): ' + src);
  1485.                                     _reg.j.get('j').trigger('tri4m.app.cinematic.data.show');
  1486.                                 });
  1487.                             }
  1488.                             break;
  1489.                         case 'youtube':
  1490.                             // http://stackoverflow.com/questions/7865904/jquery-fade-in-youtube-iframe-embed                          
  1491.                             var css = _c.f((new Image()), _reg.j.get('d'));
  1492.                             var vid = $('<iframe frameborder="0" allowfullscreen></iframe>').attr('src', src).attr('height', css.height).attr('width', css.width);
  1493.                             _reg.j.get('d').html(vid).animate({opacity : 1}, 500);
  1494.                             break;
  1495.                         default:
  1496.                             break;
  1497.                     }
  1498.                 },
  1499.                 construct = function()
  1500.                 {
  1501.                     log.t108('try load: bioscoop has no images -- construct sequence');
  1502.                     _reg.j.get('d').css({opacity : 0});
  1503.                     var css = null;
  1504.                    
  1505.                     if(ILLI.fn.length(bioscoopoptions) > 0)
  1506.                     {
  1507.                         var cache = _reg.j.get('b').data('dcb'), c = {};
  1508.                        
  1509.                         if(typeof cache === 'undefined')
  1510.                         {
  1511.                             for(var i in bioscoopoptions)
  1512.                             {
  1513.                                 c[i] = _reg.j.get('b').css(i);
  1514.                             }
  1515.                            
  1516.                             cache = c;
  1517.                             log.t108('try load: save css defaults bioscoop: ' + ILLI.fn.o2s(cache));
  1518.                             _reg.j.get('b').data('dcb', cache);
  1519.                         }
  1520.                        
  1521.                         log.t108('try load: apply css options bioscoop: ' + ILLI.fn.o2s(bioscoopoptions));
  1522.                         css = bioscoopoptions;
  1523.                     }
  1524.                     else
  1525.                     {
  1526.                         var cache = _reg.j.get('b').data('dcb');
  1527.                         if(typeof cache !== 'undefined' && ILLI.fn.length(cache) > 0)
  1528.                         {
  1529.                             log.t108('try load: restore css defaults bioscoop: ' + ILLI.fn.o2s(cache));
  1530.                             css = cache;
  1531.                             //_reg.j.get('b').data('dcb', {});
  1532.                         }
  1533.                        
  1534.                     }
  1535.                    
  1536.                     if(null === css)
  1537.                         load()
  1538.                     else
  1539.                         _reg.j.get('b').stop().animate(css, 250, load);
  1540.                 },
  1541.                 restruct = function()
  1542.                 {
  1543.                     log.t108('try load: bioscoop has images -- restruct sequence');
  1544.                    
  1545.                     var j = $('div.tri4m-app-cinematic-data:eq(0)', _reg.j.get('d'));
  1546.                     if(j.length > 0)
  1547.                     {
  1548.                         _reg.j.get('j').stop().trigger('tri4m.app.cinematic.data.hide', [
  1549.                             function()
  1550.                             {
  1551.                                 _reg.j.get('d').stop().animate({opacity : 0}, 500, function()
  1552.                                 {
  1553.                                     $('img', _reg.j.get('d')).remove();
  1554.                                     construct();
  1555.                                 });
  1556.                             }
  1557.                         ]);
  1558.                     }
  1559.                     else
  1560.                     {
  1561.                         _reg.j.get('d').stop().animate({opacity : 0}, 500, function()
  1562.                         {
  1563.                             $('img', _reg.j.get('d')).remove();
  1564.                             construct();
  1565.                         });
  1566.                     }
  1567.                 },
  1568.                 destruct = function()
  1569.                 {
  1570.                     log.t108('try load: bioscoop has images -- destruct sequence');
  1571.                    
  1572.                     _reg.j.get('d').stop().animate({opacity : 0}, 500, function()
  1573.                     {
  1574.                         $('img', _reg.j.get('d')).remove();
  1575.                     });
  1576.                 };
  1577.                
  1578.                 log.t108('init ' + src);
  1579.                 (_reg.j.get('d').find('img').length === 0 && !_reg.j.get('d').css('background-image'))
  1580.                     ? construct()
  1581.                     : restruct();
  1582.             }, true);
  1583.  
  1584.             _bnd.r
  1585.             .register('resize.resolutionchange', _j.window, true);
  1586.            
  1587.             _dom();
  1588.            
  1589.             var br = _bnd.r.toValueObject(), bl = _bnd.l.toValueObject();
  1590.             for(var i in br) { $(window).bind(i, br[i]); }
  1591.             for(var i in bl) { _reg.j.get('l').unbind(i).bind(i, bl[i]); }
  1592.            
  1593.             if(true === __settings.usekeys)
  1594.                 $(document).keydown(function(e)
  1595.                 {
  1596.                     var t = $(this), k = e.keyCode;
  1597.                     log.t109('tri4m.app.cinematic.listitem.keydown ' + k, 1);
  1598.                    
  1599.                     switch(k)
  1600.                     {
  1601.                         case 37: // left
  1602.                             _reg.j.get('l').trigger('tri4m.app.cinematic.container.prev');
  1603.                             break;
  1604.                         case 39: // right
  1605.                             _reg.j.get('l').trigger('tri4m.app.cinematic.container.next');
  1606.                             break;
  1607.                         case 38: // up
  1608.                             break;
  1609.                         case 40: // down
  1610.                             break;
  1611.                     }
  1612.                 });
  1613.            
  1614.             _update();
  1615.         })();
  1616.     };
  1617.  
  1618.     $.tri4m.log('initialize tri4m.app.cinematic: tri4m LABS, http://tri4m.com', 1);
  1619.     $.tri4m.log('-- config tri4m.app.cinematic: ' + ILLI.fn.o2s(__settings), 1);
  1620.     if(true === $.tri4m.global.__INSTANCE_REGISTRY__.isset(__SELF, regName)) return;
  1621.     var instance = new __instance(__SELF);
  1622.     $.tri4m.global.__INSTANCE_REGISTRY__.register(__SELF, regName, instance);
  1623. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!