//var $ = jQuery.noConflict();

$(document).ready(function() {  
  
  if($('.thumbnails').length > 0){
    slider = new TnSlider();
    slider.container = '.thumbnails ul';

    slider.init();

    $('.thumbnails ul img').click(function(){
      slider.state = 'click';
      slider.moveSlider($(this));
    });
    $('.thumbnails ul img').mouseout(function(){
      if(slider.state == 'click') {
      slider.state = 0;
        slider.startT();
      }
    });
  }

  if($('.s-8 .homeEffect').length > 0){
    lSlider = new LamelSlider();
    lSlider.init();
  }

  if($('.imgEffect2').length > 0){
    cSlider = new ContactSlider();
    cSlider.debug =false;
    cSlider.container  = '.imgEffect2';

    cSlider.init();
  }
});

$(window).load(function() { 
  if($('.s-8 .homeEffect').length > 1){
    //wait for all content the start timer
    lSlider.startT();

    $('.homeEffect .caption').mouseover(function(){
      lSlider.state = 'mouseover';
      lSlider.moveSlider($(this));
    });
    
    $('.homeEffect .caption').mouseout(function(){
      if(lSlider.state == 'mouseover') {
        lSlider.state = 0;
        lSlider.startT();
      }
    });
  }
}); 

function ContactSlider(){
  this.state         = 0;
  this.duration     = 3000;
  this.timer        = 0;
  this.debug        = false;
  this.enableTimer   = false;

  this.container       = 0;
  this.moveItem      = 'img';
  this.classActive    = 'active';
  this.largeImg       = '.imgLarge';
  this.largeImgSrc    = 'longdesc';
  this.curContainer   = null;
}
ContactSlider.prototype = {
  init:function(){
    if(this.debug) console.log('init');

    this.buildMenu();
  },
  buildMenu: function(){
    if(this.debug) console.log('buildMenu');

    $(this.container).eq(0).before('<div class="contactSlider"><div class="ceMenu"> </div></div>');
    $('.ceMenu').append( $(this.container+ ' h3') );

    //rebind/cleanup
    $(this.container + ' div[style]').addClass('textblock').removeAttr('style');

    $(this.container).eq(0).addClass(this.classActive);
    $('.ceMenu h3').eq(0).addClass(this.classActive);
    
    this.clickMenuItem();

    //build image slider
    //modify markup
    var $el = $( this.container + ' ul '+ this.moveItem+':first');
    // console.log(this.container + ' '+ this.moveItem+':first');
    $(this.container+' .csc-textpic-imagecolumn ul').before('<div class="imgLarge"><img style="position: absolute;top:0;left:0;"><div class="loader" style="height: 100%;left: 0;position: absolute;top: 0;width: 100%;display: none;"></div></div>');

    this.displayLargeImg($el);

      $('.contactSlider').append( $(this.container));

      this.initThumbEvents($el);
  },
  initThumbEvents: function($el){
    if(this.debug) console.log('initThumbEvents');

    $el.addClass(this.classActive);

    // if(self.debug) console.log(i, self.container, self.moveItem, $el);
    
    //show first tn large
    this.displayLargeImg($el);
    
    //bind mouse events
    this.thumbMouseEvents();

    //restart timer
    this.startT();
  },
  clickMenuItem: function(){
    var self = this;
    $('.ceMenu h3').click(function(){
      if(self.debug) console.log('h3 click');

      //first stop timer
      self.stopT();

      var i = $('.ceMenu h3').index(this);
      $(self.container).removeClass(self.classActive);
      $(self.container).eq(i).addClass(self.classActive);
      
      $('.ceMenu h3').removeClass(self.classActive);
      $('.ceMenu h3').eq(i).addClass(self.classActive);

      var $el = $( self.container + '.' + self.classActive).find('ul '+self.moveItem+':first');
      
      if(self.debug) console.log(self.container+'.'+self.classActive + ' .csc-textpic-single-image');

      if($( self.container+'.'+self.classActive + ' .csc-textpic-single-image').length == 0){
        self.initThumbEvents($el);
      }
    });
  },
  thumbMouseEvents: function(){
    var self = this;
    this.curContainer = this.container + '.' + this.classActive;

    // if(self.debug) console.log('thumbMouseEvents: '+ self.curContainer+ ' ul '+ self.moveItem);

    $(self.container+ ' ul '+ self.moveItem).unbind();

    var $el = $(self.curContainer+ ' ul '+ self.moveItem);
    $el.click(function(){
      self.state = 'click';
      self.moveSlider($(this));
    });
    $el.mouseout(function(){
      if(self.state == 'click') {
        self.state = 0;
        self.startT();
      }
    });
  },
  displayLargeImg: function($el){
    var self = this;
    if(self.debug) console.log('displayLargeImg');

    // if(self.debug) console.log($el.attr(self.largeImgSrc));

    // console.log($(self.container + '.' + self.classActive).html());

    //load first img
    $('.imgLarge .loader').show();
    var $img = $('<img>');
    var img = $img[0];
    img.src = $el.attr(self.largeImgSrc);
    img.onload = function () {
      
      $('.imgLarge .loader').hide();

      $(self.container + '.' + self.classActive).find('.imgLarge img').attr('src', $el.attr(self.largeImgSrc) );

        // console.log(img.height, img.width )
        $(self.container + '.' + self.classActive).find('.imgLarge').css({
          width  : img.width,
          height  : img.height,
          position: 'relative'
        });
    }

      // $(self.container + '.' + self.classActive).find('.imgLarge img').load(function(){

      //   // console.log($(self).attr('src'), $(self).height(), $(self).width() )
      //   $(self.container + '.' + self.classActive).find('.imgLarge').css({
       //    width  : $(this).width(),
       //    height  : $(this).height(),
       //    position: 'relative'
       //  });

      // }).attr('src', $el.attr(self.largeImgSrc) );
  },
  repaint: function($el){
    if(this.debug) console.log('repaint', $el.attr(this.largeImgSrc));

    this.curContainer = this.container + '.' + this.classActive;

    $(this.curContainer+ ' '+ this.moveItem).removeClass(this.classActive);
    
    $(this.curContainer+ ' '+ this.largeImg+ ' '+ this.moveItem).attr('src',$el.attr(this.largeImgSrc));
    
    $el.addClass(this.classActive);
  },
  moveSlider: function($el){
    $el = (typeof $el == 'undefined') ? 0 : $el;

    if(this.debug) console.log('move', $el);
    
    this.stopT();
    if(!$el){
      // if(this.debug)
      if(this.debug) console.log('no click');

      this.curContainer = this.container + '.' + this.classActive;
      //find current active item, now move pointer
      var i = $(this.curContainer+ ' ul '+ this.moveItem).index( $(this.curContainer+ ' ul '+ this.moveItem+'.'+this.classActive) );
      var l = $(this.curContainer+ ' ul '+ this.moveItem).length;

      // if(this.debug) console.log(i, l, this.curContainer);

      //reset pointer to beginning
      if((i == (l - 1)) || (i == -1)){
        i = 0;
      } else {
        i++;
      }

      // if(this.debug) console.log(i);
      
      $el = $(this.curContainer+ ' ul '+ this.moveItem).eq(i);    

      this.repaint($el);

      //restart timer
      this.startT();

    } else {
      if(this.debug) console.log('clicked ');

      this.repaint($el);
    }
  },
  startT: function(){
    var self = this;

    if(self.enableTimer){
      if(self.debug) console.log('startT');

      //function needed to reference slider
      function refSlider() {
        if(self.debug) console.log('ref slider');
        
        self.moveSlider();
      }
      self.timer = window.setTimeout(refSlider, self.duration)
    }
  }, 
  stopT: function(){  
    if(this.timer){
      if(this.debug) console.log('stopT');

      //clear timer
      clearTimeout(this.timer);
    }
  }
}

/* 
 * Lamel slider, left image with caption texts to the right
 */
function LamelSlider(){
  this.state    = 0;
  this.duration = 4000;
  this.timer    = 0;
  this.debug    = false;

  this.container   = '.homeEffect';
  this.elementCap  = '.csc-textpic-caption';
  this.target      = '.csc-textpic-imagewrap';
  this.elementTxt  = '.csc-textpic-image';
  this.classActive = 'selected';
}
LamelSlider.prototype = {
  init: function(){
    if(this.debug) console.log('init');

    this.repaint();
  },
  repaint: function(){
    var self = this;

    if(self.debug) console.log('repaint');

    $(self.container+':first').before('<div class="lSlider"></div>');
    $('.lSlider').append($(this.container));

    $(self.container).each(function(i){
      if(self.debug) console.log('repaint each');

      var $el = $(this);
      //grab the elements

      if($('object', $el).length > 0){
        //flash
        var flashItem = $('object', $el);
        $el.append(flashItem);
      } else {
        var img = $(self.target, $el);
        $el.append(img);
      }

      //link
      var src = $(self.elementTxt+' a', $el).attr('href');
      if(typeof src === 'undefined' || !src) {
          src = $(self.elementTxt+' a', $el).attr('href');
      }

      //-caption and link
      var caption = $(self.elementCap, $el).html();
      var captionStr = '<div class="caption">'+caption+'</div>';

      if(typeof src !== 'undefined' || src) {
         captionStr = '<div class="caption"><a href="'+src+'">'+caption+'</a></div>';
      }

      $el.append(captionStr);
      $('dd.csc-textpic-caption', $el).remove();

      //clean up
      $('.csc-default',$el).remove();
      $el.attr('id', 'slideItem'+i);
            
      if(i == 0){
        $el.addClass('selected');
      }
      i++;
    });
  },
  moveSlider: function($el){
    $el = (typeof $el == 'undefined') ? 0 : $el;

    if(this.debug) console.log('moveSlider', $el);

    this.stopT();
    if(!$el){
      if(this.debug) console.log(this.state);

      //find current active item the move pointer
      var i = $(this.container).index( $(this.container+'.'+this.classActive) );
      var l = $(this.container).length;

      //reset pointer to beginning
      if((i == (l - 1)) || (i == -1)){
        i = 0;
      } else {
        i++;
      }

      if(this.debug) console.log(i);
      
      $el = $(this.container).eq(i);

      $(this.container).removeClass(this.classActive);
      $el.addClass(this.classActive);

      this.startT();
    } else {
      if(this.debug) console.log(this.state);

      $(this.container).removeClass(this.classActive);
      $el.parent().addClass(this.classActive);
    }
  },
  startT: function(){
    var self = this;

    if(self.debug) console.log('startT');

    //function needed to reference slider
    function refSlider() {
      if(self.debug) console.log('ref slider');
      
      self.moveSlider();
    }
    self.timer = window.setTimeout(refSlider, self.duration)
  }, 
  stopT: function(){    
    if(this.timer){
          if(this.debug) console.log('stopT');

      //clear timer
      clearTimeout(this.timer);
    }
  }
}

/* 
 * Thumbnail slider 
 */
function TnSlider(){
  this.state     = 0;
  this.duration = 4000;
  this.timer    = 0;
  this.debug    = false;

  this.container    = 0;
  this.imgClass    = 'imgContext';
  this.classActive = 'active';
  this.largeImgSrc = 'longdesc';
}

TnSlider.prototype = {
  init:function(){
    if(this.debug) console.log('init');

    //modify markup
    var $el = $( this.container +' img:first');
    $(this.container).before('<div class="imgLarge"><img src="'+$el.attr(this.largeImgSrc)+'" /></div>');

    //first run
    this.state = 'init';

    //set first item as active
    this.moveSlider();
  },
  moveSlider: function($el){
    $el = (typeof $el == 'undefined') ? 0 : $el;

    if(this.debug) console.log('moveSlider', $el);
    
    this.stopT();
    if(!$el){
      // if(this.debug)
      if(this.debug) console.log('no click');

      //find current active item the move pointer
      var i = $(this.container+' img').index( $(this.container+' img.'+this.classActive) );
      var l = $(this.container+ ' img').length;

      //reset pointer to beginning
      if((i == (l - 1)) || (i == -1)){
        i = 0;
      } else {
        i++;
      }

      if(this.debug) console.log(i);
      
      $el = $(this.container+' img').eq(i);    

      if(this.state == 'init'){
        this.state = 0;
        $el.addClass(this.classActive);
      } else {
        this.repaint($el);
      }

      //restart timer
      this.startT();

    } else {
      if(this.debug) console.log('clicked ');

      this.repaint($el);
    }
  },
  repaint: function($el){
    var self = this;
    
    var $img = $('<img>');
    var img = $img[0];
    img.src = $el.attr(self.largeImgSrc);
    img.onload = function () {

      $('.imgLarge img').stop().animate({opacity: 0}, "slow", function() {

        $(self.container+' img').removeClass(self.classActive);
          // // Animation complete.
          $('.imgLarge img').attr('src', $el.attr(self.largeImgSrc) ).animate({opacity: 1.0}, "fast");
          $(self.container + '.' + self.classActive).find('.imgLarge').css({
            width  : $(this).width(),
            height  : $(this).height(),
            position: 'relative'
          });
        $el.addClass(self.classActive);
      });
    }
  },
  startT: function(){
    var self = this;

    if(self.debug) console.log('startT');

    //function needed to reference slider
    function refSlider() {
      if(self.debug) console.log('ref slider');
      
      self.moveSlider();
    }
    self.timer = window.setTimeout(refSlider, self.duration)
  }, 
  stopT: function(){    
    if(this.timer){
          if(this.debug) console.log('stopT');

      //clear timer
      clearTimeout(this.timer);
    }
  }
}