var cfShowPics = new Class({
  Implements: [Options, Events],
  
  options: {    
    opacity: 0.7,
    background_color:'#fff',  
    padding:10,
    gallery: null,
    picOf: 'di',
    path:''           
  },
  
	initialize: function(opt) {    
    this.setOptions(opt);    
    var to = this.options;    
    
    this.elBody = $(document.body);
        
    this.elBkg = new Element( 'div', {            
      styles: {
        'position':'absolute',
        'top':0, 'left':0, 'width':'100%', 'height':'100%',
        'display':'none',
        'background':'#000',
        'opacity': to.opacity,
        'z-index':5000       
      },
      events: {
        'click':function() { this.hidePic();  }.bind(this)
      }      
    }).inject( this.elBody );

    this.elDlg = new Element( 'div', { 
      'class': 'cfShowPicDlg',      
      'styles': {
        'position':'absolute',
        'top':0, 'left':0, 'padding':to.padding,
        'background-color': to.background_color,
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'display':'none',
        'overflow':'hidden',        
        'z-index':5001       
      }      
    }).inject( this.elBody );
    
    this.elImg = new Element( 'img', {       
      src:'',     
      styles: { 'border':'none', 'margin':0, 'padding':0, 'opacity':0. },
      events:{ 'load': function() { this.activatePic(); }.bind(this) }      
    }).inject( this.elDlg );    
    
    this.elText = new Element( 'div', {  
      'class':'cfShowPicShading',          
      'styles': { 
        'position':'absolute', 
        'left':to.padding, 'top':to.padding,
        'border':'none', 
        'margin':0, 'padding':10, 
        'opacity':0., 'color':'#fff',
        'z-index':10000 
      },            
    }).inject( this.elDlg );         

    this.elMenu = new Element( 'div', {          
      styles: {
        'position':'relative',
        'overflow':'hidden',
        'margin':'7px 10px 0px 10px',
        'height':17,        
        'font-size': '16px',
        'font-weight': 'bold',
        'color':'#555'                       
      }      
    }).inject( this.elDlg );
    
    this.elMenuNP= new Element( 'div', { 
      styles: { 'width':150,'height':17,'float':'left', 'overflow':'hidden' }        
    }).inject(this.elMenu);

    this.elMenuCmd = new Element( 'div', { 
      styles: { 'width':100,'height':17, 'float':'left', 'overflow':'hidden' }        
    }).inject(this.elMenu);

    this.elMenuCmdInfo = new Element( 'div', { 
      styles: { 'width':17,'height':17, 'float':'left', 'overflow':'hidden' }        
    }).inject(this.elMenuCmd);

    this.elMenuBtn = new Element( 'div', { 
      styles: { 'width':69,'height':17, 'float':'left', 'overflow':'hidden' }        
    }).inject(this.elMenu);                
      
    this.elMenuBtnPrev = new Element( 'div', {        
      styles: {
        'margin':'0px 3px 0px 3px', 
        'width':17,'height':17,        
        'float':'left', 
        'overflow':'hidden' 
      }      
    }).inject(this.elMenuBtn);    
      
    this.elMenuBtnNext = new Element( 'div', {        
      styles: {
        'margin':'0px 3px 0px 3px', 
        'width':17,'height':17,        
        'float':'left', 
        'overflow':'hidden' 
      }      
    }).inject(this.elMenuBtn); 
          
    this.elMenuBtnClose = new Element( 'div', {   
      'class':'cfShowPicBtnClose',     
      styles: {
        'margin':'0px 3px 0px 3px', 
        'width':17,'height':17,
        'background-repeat': 'no-repeat', 
        'float':'left', 
        'overflow':'hidden', 
        'cursor':'pointer'
      },
      'events': { 'click': function() { this.hidePic(); }.bind(this) }
    }).inject(this.elMenuBtn);
  },
   
  showPic: function( num ) {  
    var to  = this.options;     
    var bsz = this.elBody.getSize();
    var top = Math.floor((bsz.y - 10 - to.padding * 2) / 2);
    var left = Math.floor((bsz.x - 10 - to.padding * 2) / 2); 
    this.elBkg.setStyle('display','block');
    this.elDlg.setStyles({ 'display':'block', 'top':top, 'left':left, 'width':50, 'height':50 });
    this.moveToPic( num );
  },
   
  hidePic: function() {
    this.elDlg.setStyle('display','none');
    this.elBkg.setStyle('display','none');     
  },
   
  moveToPic: function( num ) {
    var to  = this.options;  
    if (to.gallery == null) return;
       
    var img = to.gallery[ num ].id; 
    var txt = to.gallery[ num ].txt;  
    this.elText.innerHTML = txt;
    
    this.elMenu.get('morph').start({'opacity': [1,0]}).chain( function() {                 
      this.elMenuBtnPrev.empty();
      this.elMenuBtnNext.empty();   
      this.elMenuCmdInfo.empty();         
      this.elMenuNP.set( 'html', (num + 1) + ' '+ to.picOf +' ' + to.gallery.length )

      if (txt != '') {        
        new Element( 'div', {     
          'styles': { 'width':17, 'height':17, 'background-repeat':'no-repeat', 'cursor':'pointer' },            
          'class':'cfShowPicBtnInfo',
          'events': { 
            'mouseenter': function() { this.elText.tween( 'opacity', 1. ); }.bind(this),
            'mouseleave': function() { this.elText.tween( 'opacity', 0. ); }.bind(this),               
          }
        }).inject(this.elMenuCmdInfo);        
      }
      if (num > 0 ) {
        new Element( 'div', {     
          'styles': { 'width':17, 'height':17, 'background-repeat':'no-repeat', 'cursor':'pointer' },            
          'class':'cfShowPicBtnPrev',
          'events': { 'click': function() { this.moveToPic(num - 1); }.bind(this) }
        }).inject(this.elMenuBtnPrev);
      }              
      if (num < (to.gallery.length - 1) ) {
        new Element( 'div', {        
          'styles': { 'width':17, 'height':17, 'background-repeat':'no-repeat', 'cursor':'pointer' },
          'class':'cfShowPicBtnNext',
          'events': { 'click': function() { this.moveToPic( num + 1); }.bind(this) }
        }).inject(this.elMenuBtnNext);    
      }
    }.bind(this) );
    
    this.elImg.get('morph').start({'opacity': 0}).chain( function() { 
      this.elImg.setStyles({'display':'block', 'width':null, 'height':null});
      this.elImg.set( 'src', to.path + img );
    }.bind(this) );
  },
  
  activatePic: function() {
    var szi = this.elImg.getSize();    
    var bsz = $(window).getSize();
    var res = false;
    
    var tx = szi.x;
    var ty = szi.y;
    var lowest = 0;
    
    if (szi.x > (bsz.x - 100)) res = true;
    if (szi.y > (bsz.y - 124)) res = true;
    if (res) {
      var lowest = Math.min((bsz.x - 100) / szi.x, (bsz.y - 124) / szi.y);    
      szi.x = Math.floor(lowest * szi.x);
      szi.y = Math.floor(lowest * szi.y);
      this.elImg.setStyles({'opacity':0, 'width':szi.x, 'height':szi.y });      
    }
    /*
    alert( 
      "Img Id: " + this.elImg.get('src') +"\n\r" +
      "Img x,y: " + tx + "," + ty + "\n\r" +
      "Win x,y: " + bsz.x + "," + bsz.y + "\n\r" +
      "Lowest: " + lowest + "\n\r" +
      "End x,y: " + szi.x + "," + szi.y
    );
    */   
    
    var w = szi.x;
    var h = szi.y + 24;                
    var to  = this.options;     
    
    var top = Math.floor((bsz.y - h - to.padding * 2) / 2);
    var left = Math.floor((bsz.x - w - to.padding * 2) / 2);
        
    this.elDlg.get('morph').start({'top': top, 'left':left, 'width':w, 'height':h }).chain(function() { 
      this.elMenuCmd.setStyle( 'width', this.elMenu.getStyle('width').toInt() - 219 );
      this.elImg.get('morph').start({'opacity': 1});
      this.elMenu.get('morph').start({'opacity': 1}); 
    }.bind(this));
  },
  
  setPath: function( path ) {
    this.options.path = path;
  },
    
  setGallery: function( gallery ) {
    this.options.gallery = gallery;
  }          
});