cinema bg image

cinematic : function(__SELF, SETTINGS)
{
    var regName = 'app-cinematic';

    var __settings = jQuery.extend
    (
        true,
        {
            bioscoop : null, // id of target
            autoplay :
            {
                enabled : false,
                interval : 10,
                showNext : true,
                showPlay : true,
                showPrev : true,
                showTimer : true,
            },
            thumbs :
            {
                preloadAllBeforeShow : true,
                callBackAfterShow : function() {},
                asCssBackgroundImage : true // otherwise img-tag
            },
            loader :
            {
                lines           : 16,
                length          : 50,
                width           : 1,
                radius          : 40,
                rotate          : 0,
                color           : '#00FF1A',
                speed           : 1.9,
                trail           : 100,
                shadow          : false,
                hwaccel         : true,
                className       : 'ddlsl',
                zIndex          : -1,//2e9,
                top             : 0,
                left            : 'auto'
            }
        },
        SETTINGS
    );

    var log =
    {
        n    : function(t, l) { $.tri4m.log('tri4m.app.cinematic: ' + t, l); },
        t    : function(t, l) { log.n('trigger: ' + t, l); },
        t107 : function(t, l) { log.t('preload-cinematic-thumb: ' + t, l); },
        t108 : function(t, l) { log.t('preload-cinematic-image: ' + t, l); },
        t109 : function(t, l) { log.t('-- event: ' + t, l); }
    };

    var __instance = function(element)
    {
        var _queue = [], _removed = [], _element = element,
        _isset = $.tri4m.global.__INSTANCE_REGISTRY__.isset(element, regName),
        _init, _dom, _reg = {}, _bnd = {}, _update,
        _ctrl =
        {
            onActivation : function(scrollrollerItem)
            {
                scrollrollerItem.parent().data('tri4m.ui.scrollroller.listitem.state', {ai : scrollrollerItem});
                scrollrollerItem.find('a').trigger('tri4m.app.cinematic.reslink.preloadImage');
            }
        };

        _c =
        {
            o : function(t)
            {
                var p = {width: 0, height: 0};

                if(t.innerWidth() > 0)
                {
                    p.width = t.innerWidth();
                }
                else
                if(t.innerWidth() === 0
                && t.parent().innerWidth() > 0)
                {
                    p.width = t.parent().innerWidth();
                }
                else
                {
                    p.width = $(window).width();
                }

                if(t.innerHeight() > 0)
                {
                    p.height = t.innerHeight();
                }
                else
                if(t.innerHeight() === 0
                && t.parent().innerHeight() > 0)
                {
                    p.height = t.parent().innerHeight();
                }
                else
                {
                    p.height = $(window).height();
                }

                return p;
            },
            i : function(image, target)
            {
                var p = {width: 0, height: 0, left: 0, top: 0};

                if(typeof image !== 'object'
                || typeof image.width === 'undefined'
                || typeof image.height === 'undefined') return p;

                var iw = image.width, ih = image.height, ir = ih / iw
                    w = _c.o(target), ww = w.width, wh = w.height, wr = wh / ww;

                switch(true)
                {
                    case (wr > ir):
                        p.width  = Math.round(wh/ir);
                        p.height = wh;
                        break;
                    case (typeof $('body.fit-images').size() !== 'undefined'):
                        p.width  = ww;
                        p.height = wh;
                        break;
                    case (ir > 1 || ir === 1):
                        var j = wh / ih;
                        p.width  = Math.round(iw * j);
                        p.height = wh;
                        break;
                    default:
                        p.width  = ww;
                        p.height = Math.round(ww * ir);
                        break;
                }

                p.left = Math.round((ww - p.width)  / 2);
                p.top  = Math.round((wh - p.height) / 2);

                return p;
            }
        };

        _j =
        {
            __isw  : false,
            window : function()
            {
                var d = _reg.j.get('d');
                var wait = setInterval(function()
                {
                    clearInterval(wait);
                    _j.__isw = false;
                    d.find('img:visible')
                    .each(function()
                    {
                        $(this).animate(_c.i({width : $(this).width(), height : $(this).height()}, d), 500, 'easeOutCubic');
                    });
                }, 600);

                if(true === _j.__isw)
                    clearInterval(wait);

                _j.__isw = true;
            }
        }
/*

*/
        _update = function()
        {
            var j = _reg.j, __i = 'li', __a = 'a',
                ba = _bnd.a.toValueObject(), bi = _bnd.i.toValueObject(), bt = _bnd.t.toValueObject();

            j.register('a', $(__a, j.get('l')), false);
            j.register('i', $(__i, j.get('l')), false);
            j.get('a').addClass('tri4m-app-cinematic-resourcelink').hide();
            j.get('i').addClass('tri4m-app-cinematic-resourceitem');

            var a = j.get('a'), i = j.get('i'), _a = '<a />';

            i.each(function(index)
            {
                for(var i in bi) $(this).unbind(i).bind(i, bi[i]);
                var it = $(this).find(__a + '.tri4m-app-cinematic-resourcethumb').eq(0);
                if(it.length === 0) $(this).append($(_a).addClass('tri4m-app-cinematic-resourcethumb').hide());
            });

            j.register('t', $(__a + '.tri4m-app-cinematic-resourcethumb', j.get('i')), false);
            var t = j.get('t');

            a.each(function(index)
            {
                for(var i in ba) $(this).unbind(i).bind(i, ba[i]);
                $(this).addClass('j.a');
            });

            t.each(function(index)
            {
                for(var i in bt) $(this).unbind(i).bind(i, bt[i]);

                var ds = $(this).data(_reg.n.get('dts')), dd = {}; dd.i = index;

                if(typeof ds === 'undefined')
                {
                    $(this).data(_reg.n.get('dts'), dd);
                    ds = dd;
                }

                if(typeof ds.qs === 'undefined')
                {
                    $(this).trigger('tri4m.app.cinematic.thumblink.preloadImage');
                }
                else
                {
                    $(this).addClass('status_' + ds.qs.status);
                }

                $(this).addClass('j.t');
            });

            j.get('l').addClass('j.l');
        };

        _dom = function()
        {
            var j = _reg.j, _d = '<div />', _l = '<ul />',
                __d = 'div', __i = 'li', __a = 'a', _a = '<a />', __l = 'ul',
                d = $('#' + __settings.bioscoop).find(__d).eq(0),
                l = _element.find(__l).eq(0); // 0: cur is ul

            j.register('b', $('#' + __settings.bioscoop), true);
            j.register('d', ((d.length === 0) ? $(_d).appendTo(j.get('b')) : d), true);
            j.register('l', ((l.length === 0) ? $(_element).wrap(_d) : l), true);
            j.register('c', j.get('l').parent());

            j.get('l').addClass('tri4m-app-cinematic-list');
            j.get('b').addClass('tri4m-app-cinematic-bioscoop');
            j.get('d').addClass('tri4m-app-cinematic-decorontwerp')
                .css({overflow: 'hidden'})
                .data(_reg.n.get('dcs'), { initialized : false });
            j.get('c').addClass('tri4m-ui-scrollroller-x tri4m-app-gallery-thumbs tri4m-app-cinematics')
            //j.get('c').addClass('tri4m-ui-scrollroller-x tri4m-app-cinematics')
                .tri4m().proto().ui().scrollroller
                ({
                    sensitive: true,
                    easing :
                    {
                        duration : 400,
                        callback :
                        {
                            item :
                            {
                                deactivate : function(e)
                                {
                                    $(this).trigger('tri4m.ui.scrollroller.container.activateFirst');
                                }
                            }
                        }
                    }
                });

        };

        (function()
        {
            if(true === _isset) return;

            _reg.j = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _reg.n = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _bnd.a = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _bnd.t = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _bnd.i = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _bnd.l = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
            _bnd.r = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();

            _reg.n.register('dcs', 'tri4m.app.cinematic.state');
            _reg.n.register('dts', 'tri4m.app.cinematic.thumbstate');

            _bnd.i
            .register('click', function()
            {
                log.t109('tri4m.app.cinematic.listitem.click', 1);
                $(this).trigger('tri4m.ui.scrollroller.listitem.activate', [_ctrl.onActivation]);
            });

            _bnd.l
            .register('tri4m.app.cinematic.container.insertItemAfter', function(e, i, c)
            {
                log.t109('tri4m.app.cinematic.container.insertItemAfter', 1);
            }, true)
            .register('tri4m.app.cinematic.container.insertItemBefore', function(e, i, c)
            {
                log.t109('tri4m.app.cinematic.container.insertItemBefore', 1);
            }, true)
            .register('tri4m.app.cinematic.container.appendItem', function(e, i, item, c)
            {
                log.t109('tri4m.app.cinematic.container.appendItem', 1);
                alert('insert cinematic');
            }, true)
            .register('tri4m.app.cinematic.container.appendItems', function(e, i, itemArray, c)
            {
                log.t109('tri4m.app.cinematic.container.prependItems', 1);
            }, true)
            .register('tri4m.app.cinematic.container.prependItem', function(e, i, item, c)
            {
                log.t109('tri4m.app.cinematic.container.prependItems', 1);
            }, true)
            .register('tri4m.app.cinematic.container.prependItems', function(e, i, itemArray, c)
            {
                log.t109('tri4m.app.cinematic.container.prependItems', 1);
            }, true)
            .register('tri4m.app.cinematic.container.removeItem', function(e, i, c)
            {
                log.t109('tri4m.app.cinematic.container.removeItem', 1);
                var t  = $(e.target);
                t.trigger('click');
                t.trigger('tri4m.ui.scrollroller.container.removeItem', [i, function()
                {
                    _ctrl.next(_reg.j.get('l'));
                }]);

            }, true)
            .register('tri4m.app.cinematic.container.pause', function(e, c)
            {
                log.t109('tri4m.app.cinematic.container.pause', 1);

            }, true)
            .register('tri4m.app.cinematic.container.play', function(e, c)
            {
                log.t109('tri4m.app.cinematic.container.play', 1);

            }, true)
            .register('tri4m.app.cinematic.container.stop', function(e, c)
            {
                log.t109('tri4m.app.cinematic.container.stop', 1);

            }, true)
            .register('tri4m.app.cinematic.container.nextItem', function(e, c)
            {
                log.t109('tri4m.app.cinematic.container.nextItem', 1);
                _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.activateNextOrFirst', [_ctrl.onActivation]);
            }, true)
            .register('tri4m.app.cinematic.container.prevItem', function(e, c)
            {
                log.t109('tri4m.app.cinematic.container.prevItem', 1);
                _reg.j.get('l').trigger('tri4m.ui.scrollroller.container.activatePrevOrLast', [_ctrl.onActivation]);
            }, true);

            _bnd.t
            .register('tri4m.app.cinematic.thumblink.preloadImage', function(e)
            {
                log.t109('tri4m.app.cinematic.thumblink.preloadImage', 1);
                if(typeof ILLI === 'undefined')
                {
                    $(this).parent().prepend('<span>where is ILLI?</span>');
                    log.t107('ILLI is undefined (required for thumb-url)', 2);
                    return;
                }


                var t = $(this), p = t.parent().css({opacity : 0}),
                    i = t.data(_reg.n.get('dts')).i, href = $('a.tri4m-app-cinematic-resourcelink', p).attr('href'),
                    ds = t.data(_reg.n.get('dts'));

                if(typeof ds.qs !== 'undefined')
                    return;

                log.t107('init ' + i);

                if(typeof _queue[i] !== 'undefined' && _queue[i].status === true)
                {
                    log.t107('-- nothing to do ' + i);
                    return;
                }

                log.t107('push to queue ' + i);

                _queue[i] =
                {
                    status    : false,
                    error     : false,
                    append    : false,
                    kicked    : false,
                    lookup    : null,
                    islooking : false,
                    attempt   : 0,
                    thumb     : t,
                    parent    : p,
                    src       : null,
                    image     : $('<img />').addClass('tri4m-app-cinematic-thumbnail').css({opacity : 0})
                };

                ds.qs = _queue[i];
                t.data(_reg.n.get('dts'), ds);

                var islast = (_queue.length === _reg.j.get('t').length);

                if(true === islast) log.t107('is last ' + i);

                var dequeue = function()
                {
                    log.t107('try dequeue: caller is ' + i);
                    if(true === __settings.thumbs.preloadAllBeforeShow)
                    {
                        if(false === islast)
                            return;

                        log.t107('try dequeue: preloadAllBeforeShow = true');

                        var success = true;

                        for(var idx in _queue)
                            if(_queue[idx].status === false)
                                success = false;

                        if(false === success)
                        {
                            log.t107('try dequeue: success = false');
                            var refetch = setInterval(function()
                            {
                                clearInterval(refetch);

                                log.t107('try again; attempt = ' + _queue[i].attempt );
                                //dequeue();
                            }, 500);
                            //return;
                        }
                    }

                    log.t107('try dequeue: start iteration');

                    for(var idx in _queue)
                    {
                        if(true === _queue[idx].error)
                        {
                            log.t107('try dequeue: error: ' + src, 3);
                            log.t107('try dequeue: --continue');
                            continue;
                        }

                        (function(curIndex, caller)
                        {
                            var islast = (_queue.length === _queue[curIndex + 1]);

                            if(null !== _queue[curIndex].lookup)
                                return;

                            _queue[curIndex].lookup = setInterval(function()
                            {
                                //log.t107('try dequeue: auto-init ' + x);

                                if(true === _queue[curIndex].kicked)
                                {
                                    log.t107('try dequeue: waiting: -- -- index ' + curIndex + ' already kicked');
                                    clearInterval(_queue[curIndex].lookup);
                                    return;
                                }

                                //if(false === __settings.thumbs.preloadAllBeforeShow
                                //&& _queue[curIndex].status === false)
                                if(_queue[curIndex].status === false)
                                {
                                    log.t107('try dequeue: waiting: preloadAllBeforeShow = ' + __settings.thumbs.preloadAllBeforeShow + ', status = '+ _queue[curIndex].status +', try = ' + _queue[curIndex].attempt + ' of ' + _queue.length + ', index = ' + curIndex + ', caller = ' + caller);

                                    if(_queue[curIndex].attempt > _queue.length || _queue[curIndex].attempt === _queue.length)
                                    {
                                        log.t107('try dequeue: waiting: -- preloadAllBeforeShow =  = ' + __settings.thumbs.preloadAllBeforeShow + ', status = '+ _queue[curIndex].status +', max.attempts = '+_queue.length+', index = ' + curIndex + ', caller = ' + caller);
                                        log.t107('try dequeue: waiting: -- index ' + curIndex + ' was kicked from #list (idle flood), caller = ' + caller + ' in try = ' + _queue[curIndex].attempt + ' of ' + _queue.length, 3);
                                        _queue[curIndex].kicked = true;
                                        _queue[curIndex].error  = true;
                                        clearInterval(_queue[curIndex].lookup);
                                        _removed[curIndex] = _queue[curIndex];
                                        //_queue[curIndex].parent.remove();
                                        //_update();
                                        _reg.j.get('l').trigger('tri4m.app.cinematic.container.removeItem', [curIndex]);
                                    }

                                    _queue[curIndex].attempt++;

                                    return;
                                }

                                clearInterval(_queue[curIndex].lookup);

                                if(true === _queue[curIndex].append)
                                    return;

                                var show = function()
                                {
                                    if(typeof ILLI === 'undefined'
                                    || false === __settings.thumbs.preloadAllBeforeShow)
                                    {
                                        _queue[curIndex].parent.animate({opacity : 1}, 500);
                                        return;
                                    }

                                    ILLI.fn.idle(_queue[curIndex].parent, curIndex * 100, function()
                                    {
                                        _queue[curIndex].parent.animate({opacity : 1}, 500);
                                    });
                                };

                                if(true === __settings.thumbs.asCssBackgroundImage)
                                {
                                    log.t107('try dequeue: asCssBackgroundImage = true ' + curIndex);
                                    _queue[curIndex].parent.css({'background-image' : 'url("' + _queue[curIndex].src + '")'});
                                    show();
                                }
                                else
                                {
                                    log.t107('try dequeue: asCssBackgroundImage = false ' + curIndex);
                                    _queue[curIndex].parent.prepend(_queue[curIndex].image);
                                    show();
                                }

                                _queue[curIndex].append = true;
                                _queue[curIndex].status = true;

                                var ds = _queue[curIndex].thumb.data(_reg.n.get('dts'));
                                ds.qs = _queue[curIndex];
                                _queue[curIndex].thumb.data(_reg.n.get('dts'), ds);
                                _queue[curIndex].thumb.addClass('status_' + _queue[curIndex].status);


                                //if(islast === true) __settings.thumbs.callBackAfterShow();

                            }, 200);
                        })(idx, i);
                    }
                }

                var load = function(src)
                {
                    log.t107('try load: ' + src);

                    var IMG = new Image();

                    $(IMG)
                    .addClass('dummy')
                    .hide()
                    .load(function()
                    {
                        log.t107('try load: complete: ' + src);

                        $(IMG).remove();

                        t.wait = setInterval(function()
                        {
                            clearInterval(t.wait);
                            log.t107('try load: append: ' + src);
                            _queue[i].image.attr('src', src);
                            _queue[i].src = src;
                            _queue[i].status = true;
                            dequeue();

                        }, 100);

                        IMG.onload = function(){};
                    })
                    .error(function()
                    {
                        log.t107('try load: error: ' + src, 3);

                        _queue[i].image.attr('src', src);
                        _queue[i].src = src;
                        _queue[i].status = true;
                        _queue[i].error = true;

                        dequeue();

                        IMG.onerror = function(){};
                    });

                    $(IMG).attr('src', src);
                    t.append(IMG);
                };

                t.idle = setInterval(function()
                {
                    clearInterval(t.idle);
                    log.t107('try get thumb for ' + i + ': ' + href);

                    // create thumb url from img-a-href
                    ILLI.router.create.thumb(href, p.height(), p.width(), function(url)
                    {
                        log.t107('thumb for ' + i + ' is ' + url);
                        t.attr('href', url);
                        load(url);
                    });
                }, 50);
            });

            _bnd.a.register('tri4m.app.cinematic.reslink.preloadImage', function()
            {
                log.t109('tri4m.app.cinematic.reslink.preloadImage', 1);
                log.t108('init ' + src);

                var src  = $(this).attr('href');
                var load = function()
                {
                    log.t108('try load: ' + src);

                    if(_reg.j.get('d').children('img' + "[src='" + src + "']").length === 0)
                    {
                        switch(true)
                        {
                            case src.match(/png/i): log.t108('try load: PNG ' + src); break;
                            case src.match(/jpg/i): log.t108('try load: JPG ' + src); break;
                            case src.match(/gif/i): log.t108('try load: GIF ' + src); break;
                            default: log.t108('try load: unknown source ' + src); break;
                        }

                        var IMG = new Image(), img = $('<img />')
                            .css({position: 'absolute'})
                            .addClass('tri4m-app-cinematic-image')
                            .css('position', 'absolute');

                        $(IMG).hide()
                        .load(function()
                        {
                            log.t108('try load: complete: ' + src);

                            var css = _c.i(IMG, _reg.j.get('d'));

                            $(IMG).remove();

                            var wait = setInterval(function()
                            {
                                clearInterval(wait);
                                log.t108('try load: append: ' + src);
                                _reg.j.get('d').prepend(img.attr('src', src).css(css));
                                _reg.j.get('d').animate({opacity : 1}, 500);
                            }, 100);

                            IMG.onload = function(){};
                        })
                        .error(function()
                        {
                            log.t108('try load: error: ' + src, 3);
                            IMG.onerror = function(){};
                        });

                        $(IMG).attr('src', src);
                        _reg.j.get('d').html(IMG);

                    }
                    else
                    {
                        log.t108('try load: known source ' + src);

                        var img = _reg.j.get('d').children('img' + "[src='" + src + "']");
                        img.show();
                        _reg.j.get('d').animate({opacity : 1}, 500);
                    }
                };

                if(_reg.j.get('d').children('img').length === 0)
                {
                    log.t108('try load: bioscoop has no images -- construct sequence');

                    _reg.j.get('d').css({opacity : 0});
                    load();
                }
                else
                {
                    log.t108('try load: bioscoop has images -- destruct-construct sequence');

                    _reg.j.get('d').stop().animate({opacity : 0}, 500, function()
                    {
                        $('img', _reg.j.get('d')).remove();
                        load();
                    });
                }


            }, true);

            _bnd.r.register('resize.resolutionchange', _j.window, true);

            var foo = false;
            __settings.thumbs.callBackAfterShow = function()
            {
                if(true === foo) return;
                foo = true;
                _update();
            };
            _dom();
            _update();

            var br = _bnd.r.toValueObject(), bl = _bnd.l.toValueObject();
            for(var i in br) { $(window).bind(i, br[i]); }
            for(var i in bl) { _reg.j.get('l').unbind(i).bind(i, bl[i]); }

            _reg.j.get('l').trigger('insert-item');

            if(__settings.bioscoop === null)
            {
                __settings.bioscoop = 'target';
                $('body').prepend('<div id="'+ __settings.bioscoop +'"/>');
            }
            _update();
        })();
    };

    $.tri4m.log('initialize tri4m.app.cinematic: tri4m LABS', 1);
    var instance = new __instance(__SELF);
    $.tri4m.global.__INSTANCE_REGISTRY__.register(__SELF, regName, instance);
}