
try{
    /**
     * include Ech.js
     */
    if(typeof Ech == typeof undef){
        throw('Ech_3d:: Нет главного скрипта Ech');
    }



/**
 * 3d clip---------------------------------------------------------------------
 */

/**
 * array images paths
 */
Ech_3d = Ech.newClass(null,{
    constructor:function(div, images, cycle, autoRotation)
    {
        ++Ech_3d.count;
        this.stepNow      = 0;
        this.cadr         = 1;
        this.Report       = function(e){Ech.Report(e)};
        this.div          = div || null;
        this.images       = images || null;
        this.cycle        = cycle || false;
        this.autoRotation = autoRotation || false;
        this.ImagesCache  = new Array();
        this.curImage     = null;
        this.divFon       = null;    
        this.Main();
    },
    
    Main:function()
    {
        try{
            this.Init();
            this.InitEvent();
            this.Cache();
        }catch(e){this.Report(e);}
    },
    
    InitEvent:function()
    {
        var _this=this;
        /**
         * Обработчики
         */
        this.event_onload_evt=function(evt){_this.event_onload(evt)};
        this.event_start_evt=function(evt){_this.event_start(evt)}; 
        this.event_movie_evt=function(evt){_this.event_movie(evt)};      
    },
    
    Init:function()
    {
        if(typeof this.images != typeof ['array1','array2'])
            throw ('Вы не передали массив путей');
        if(!this.div)
           throw ('Нет полотна анимации');
        this.cadr = Math.ceil(45/this.images.length);
    },
    

    
    Cache:function()
    {
        this.div.innerHTML = Ech_3d.template.table_step();
        this.images.sort();
        var lengthAr = this.images.length;
        var i = 0;
        for(i; i < lengthAr; i++){
            this.ImagesCache[i] = new Image();
            this.ImagesCache[i].onload = this.event_onload_evt;
            this.ImagesCache[i].style.display = 'block';
        }
        i = 0;
        for(i; i < lengthAr; i++){
            this.ImagesCache[i].src = this.images[i];
        }       
    },
    
    Start:function()
    {
        this.div.innerHTML = '';
        this.curImage = this.ImagesCache[0];
        this.div.appendChild(this.curImage);
        this.divFon = Ech.el_create('div','', {
            'display' : 'block',
            'position': 'absolute',
            'left'    : '0px',
            'top'     : '0px',
            'width'   : '100%',
            'height'  : '100%'
        });
        
        this.div.appendChild(this.divFon);
        
        //this.div.style.background = 'url("' + this.images[0] + '") no-repeat left top';
        this.div.style.cursor = "e-resize";
        this.imageI = 0;
        var _this = this;
        if(this.autoRotation){
           this.Interval = setInterval(function(){_this.event_movie('auto')}, (this.cadr*80));
        }
        
        Ech.event_add(this.div,'mousedown', this.event_start_evt);
        
        Ech.event_add(this.div, 'mouseout', function(evt){
            Ech.event_remove(_this.div, 'mousemove', _this.event_movie_evt);
        });
        Ech.event_add(this.div, 'mouseup', function(evt){
            Ech.event_remove(_this.div, 'mousemove', _this.event_movie_evt);
        });         
    },

    event_start:function(evt)
    {
        try{
            if(this.autoRotation){
               clearInterval(this.Interval);
            }            
            evt = (evt)? evt : ((window.event)? window.event : null);
            if(!evt)throw('no Event');      
            this.coord = Ech.event_XYmouse(evt);

            Ech.event_add(this.div, 'mousemove', this.event_movie_evt);
           

            
            
        }catch(e){this.Report(e);}

                
    },
    
    event_movie:function(evt)
    {
        var count = this.images.length;
        var tab;
        var shag;
        if(evt == 'auto'){
            tab = this.cadr + 1;
            if(this.cycle)
                shag = 1;
            else{
                if(this.imageI == 0)
                    this.shag = 1;
                else if(this.imageI == (count-1))
                    this.shag = -1;
                shag = this.shag;
            }
        }else{
            evt=(evt)? evt : ((window.event)? event : null);
            if(!evt)throw('no Event'); 
            var coord = Ech.event_XYmouse(evt);
            tab = Math.abs(coord.left - this.coord.left);
            shag = coord.left - this.coord.left;
        }
  

        
        if(tab < this.cadr)
            return;
        
        var step = (shag > 0)? 1 : -1;
        this.imageI += step;
        this.imageI = (this.imageI <= -1)? 
             (this.cycle? (count-1)  : 0) :((this.imageI > (count-1))? (this.cycle?  0  : (count-1)) : this.imageI );
        //this.div.innerHTML ='<span style="color: red">' + this.imageI + '</span>';
        //alert(this.ImagesCache[this.imageI].src);
        this.curImage = (this.div.replaceChild(this.ImagesCache[this.imageI], this.div.firstChild));
        //alert(this.curImage);
        //this.div.style.background = 'url("' + this.images[this.imageI] + '")  no-repeat left top';
        if(evt != 'auto'){
            this.coord = coord;
        }        

    },
   
    event_onload:function(evt)
    {
      
        var count = this.images.length;
        this.stepNow++;
        var parsent = Math.ceil(((this.stepNow)*100)/count);
        document.getElementById('Ech_3d_Bar_' + Ech_3d.count).width = parsent + '%';
        document.getElementById('Ech_3d_Value_' + Ech_3d.count).innerHTML = parsent + '%';         
        
        if(this.stepNow >= count){
            this.Start();
        }

                
    }
});

Ech_3d.count = 0;
Ech_3d.template = 
{
    table_step:function()
    {
        return '<table width="100%" style="font-size: 11px; font-family: Arial"  height="100%" border="0" cellspacing="0" cellpadding="0">'+
                  '<tbody>'+
                  '<tr>'+
                    '<td valign="middle" align="center">'+
                
                        '<table width="60%" border="0" height="40" cellspacing="0" cellpadding="0">'+
                          '<tr height="20">'+
                            '<td align="center" style="font-size: 11px; font-family: Arial">Загрузка</td>'+
                          '</tr>'+
                          '<tr height="20">'+
                            '<td valign="middle" align="left">'+
                
                                '<table id="Ech_3d_Bar_'+Ech_3d.count+'" width="1%" height="20" border="0" cellspacing="0" cellpadding="0">'+
                                  '<tr>'+
                                    '<td bgcolor="#FF0000" ><div class="empty" style="height: 20px;"></div></td>'+
                                  '</tr>'+       
                                '</table>'+
                
                            '</td>'+
                          '</tr>'+
                          '<tr>'+
                            '<td id="Ech_3d_Value_'+Ech_3d.count+'" valign="middle" align="center" style="font-weight:bold;">'+
                
                                    '1%'+
                            '</td>'+
                          '</tr>'+    
                        '</table>'+ 
                
                
                    '</td>'+ 
                  '</tr>'+ 
                  '</tbody>'+
                '</table>';
    }     


};



}catch(e){alert(e);}