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

 slider with transparent background animation

 Autor: Raducu Ioan-Nisi
 Tuesday, June 28, 2011 9:18:28 AM
 HAPedit 3.1.11.111

 require: jquery-1.4.2
          jquery.backgroundPosition

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

(function($) {
    $.fn.sclip = function(options) {

        var opts   = $.extend({}, $.fn.sclip.defaults, options),
            params = $.fn.sclip.params;

        return this.each(function(index) {
            var $back = $(this),
                o     = $.meta ? $.extend({}, opts, $back.data()) : opts,

                backPos   = $back.position(),
                backStyle = $back.get(0).style,
                top   = (backStyle.marginTop ? parseInt(backStyle.marginTop) : 0) +
                        (backStyle.borderTopWidth ? parseInt(backStyle.borderTopWidth) : 0) +
                        (backStyle.paddingTop ? parseInt(backStyle.paddingTop) : 0),
                left  = (backStyle.marginLeft ? parseInt(backStyle.marginLeft) : 0) +
                        (backStyle.borderLeftWidth ? parseInt(backStyle.borderLeftWidth) : 0) +
                        (backStyle.paddingLeft ? parseInt(backStyle.paddingLeft) : 0),

                $mask = $('<div id="'+params.id+index+'"></div>')
                                .css({ position: "absolute", margin: 0, border: 0, padding: 0,
                                       top : backPos.top  + top  + "px",
                                       left: backPos.left + left + "px",
                                       height  : $back.css("height"),
                                       width   : $back.css("width"),
                                       "backgroundImage"   : "url(" + o.mask + ")",
                                       "backgroundPosition": "0px 0px"})
                                .appendTo($back.parent()),

                crt = 0, max = o.face.length,
                time, startPosition, middlePosition, finishPosition,

                replay = function() {setTimeout(play, o.pause)},

                play = function(){
                           var onload = function(){
                                  var second = function() {
                                       $back.attr("src", o.face[crt])
                                       $mask.animate(finishPosition, time*(1-o.change), replay)
                                  }

                                  $mask.stop()
                                       .css(startPosition)
                                       .animate(middlePosition, time*o.change, second)
                           }

                           // skip image on error
                           var onerror = function(){
                                   crt = (crt+1) % max;
                                   img.src = o.face[crt];
                                   return true;
                           }

                           // image preloader
                           var img = new Image();
                           img.onload = onload;
                           img.onerror = onerror;
                           crt = (crt+1) % max;
                           img.src = o.face[crt]; // start

                };

            // background preloader
            var img = new Image();
            img.onload = function() {
               var height     = img.height/100;     // %
               time           = img.height/o.viteza // ms

               startPosition  = {"backgroundPosition": "0px "+o.start*height+"px"};
               middlePosition = {"backgroundPosition": "0px "+parseFloat(o.start + o.change * (o.finish-o.start))*height+"px"};
               finishPosition = {"backgroundPosition": "0px "+o.finish*height+"px"};

               replay()
            }
            img.src = o.mask // start

        });
    };

    $.fn.sclip.defaults = {
        viteza: 0.5,  // 0.5 px/ms
        pause : 5000, // 5000 ms
        start : 0,    // 0%
        finish: 100,  // 100%
        change: 0.57, // 57%
        face  : [],
        mask  : "sclipire1598.png"
    };

    $.fn.sclip.params = {
        id : "sclipici"
    };
})(jQuery);