window.addEvent('domready', function() {
  var ANIMATION_FPS = 200;
  $$('a[rel=external]').set('target', '_blank');
  $$('.email').each(function(el) { 
    el.set('href','mailto:' + el.get('href').replace('|','@').replace('/',''));
    el.set('text',el.get('text').replace('|','@').replace('/',''));
  });
  if($('slide')){
    var mySlideShow = new SlideShow('slide',{
      delay: 2000,
      transition: 'crossFade',
      duration: 1000,
      autoplay: true,
      fps: ANIMATION_FPS
    })
  }
  if($('tabs')){
    var myTabs = new Tabs();
  }
  $('category_list').hide();
  $('arrow').addEvent('click', function(){
    //cambio la direzione della freccia e mostro la lista categorie
    if($('arrow').get('src') == '/site_media/imgs/arrow_filter_right.png'){
      $('arrow').set('src', '/site_media/imgs/arrow_filter_left.png' );
      $('category_list').show();
    } else {
      $('arrow').set('src', '/site_media/imgs/arrow_filter_right.png' );
      $('category_list').hide();
    }
  });

  function loadContent(url,element){
    var data;
    var ul_images = element.getElements('ul.image_work');
    var req = new Request({
      method: 'get',
      url: url,
      useSpinner: false,
      onComplete: function(response) {
        data =  JSON.decode(response);
        //position the images
        var preload = Array();
        $each(data, function(el){preload.push('/site_media/uploads/' + el['fields']['image']);});
        var myImages = new Asset.images(preload,{onComplete: function(){
          //var s = element.get('spinner');
          //s.destroy();
          var i = 0;
        $each(data, function(el){
          var img;
          if(i++ == 0){
            img = element.getElements('img.work_description');
            img.set('src', '/site_media/uploads/' + el['fields']['image']);
            img.addClass('work_description');
            img.addClass('visible');
            img.removeClass('vb')
          }
          else {
            img = new Element ('img', {'src': '/site_media/uploads/' + el['fields']['image']});
            img.addClass('work_description');
            var li = new Element('li')
            li.grab(img);
            li.addClass('not_displayed');
          }
          img = element.getElements('img.work_description');
          img[0].removeClass('vb');
          img.addEvent('click', next_image );
          ul_images.adopt(li);
        });
        
        //add the arrows for navigation
        var ul = new Element('ul');
        var li_up = new Element('li');
        var li_middle = new Element('li');
        var li_down = new Element('li');
        var li_counter = new Element('li');
        var upArrow = new Element ('img', {'src': '/site_media/imgs/scroll_up.png'});
        var downArrow = new Element ('img', {'src': '/site_media/imgs/scroll_down.png'});
        //li_counter
        li_middle.addClass('arrow_long');
        li_middle.set('html','1<span class="color_main">/</span>' + i)
        li_up.adopt(upArrow);
        li_down.adopt(downArrow);
        ul.adopt(li_up);
        ul.adopt(li_middle);
        ul.adopt(li_down);
        ul.addClass('navigation_arrows');
        ul_images.adopt(ul);
        
        var ul_desc = new Element('ul');
        var li_desc = new Element('li');
        var span = new Element('span');
        span.addClass('text_description');
        var html = '<span class="desc_title">' + data[0]['title'].toUpperCase() + '<br /><span class="color_main">';
        html += data[0]['subtitle'].toUpperCase() + '</span></span><br /><span class="desc_small">' + data['0']['description'] + '</span><br />';        
        span.set('html',  html)
        
        if(data[0]['url']){
          var link = new Element('a');
          link.setAttribute('rel','external');
          link.setAttribute('target','_blank');
          link.setAttribute('href', data[0]['url']);
          link.addClass('color_main');
          link.addClass('link_bold');
          link.set('text', data[0]['url']);
          span.adopt(link);
        }
        ul_desc.addClass('work_desc');
        li_desc.addClass('text_description');
        ul_desc.adopt(li_desc);
        li_desc.adopt(span);
        ul_images.adopt(ul_desc);
        //alert(data[0]['title']);

        
        li_up.addEvent('click', function(e){
          var p = e.target.getParent().getParent().getParent();
          var imgs = p.getElements('img.work_description');
          var totalImages = imgs.lenght;
          var counter = p.getElements('li.arrow_long');
          var text = counter.get('text').toString().split('/');
          text[0] = text[0].toInt();
          text[1] = text[1].toInt();
          var prev,c;
          
          if(text[0] == 1)
            c = text[1]
          else
           c = --text[0];
          counter.set('html', c + '<span class="color_main">/</span>' + text[1])
          
          var first_img = imgs[0];
          var first = false;
          $each(imgs, function(img){
            if(img.hasClass('visible')){
              if(prev){
                fadeImgIn(prev);
                fadeImgOut(img);
              }
              else {
                first = true;
              }
            }
            prev = img;
          });
          if(first){
            fadeImgOut(imgs[0]);
            fadeImgIn(imgs.getLast());
          }
        });
        li_down.addEvent('click', next_image );
        }});

        
        
      }
    }).send();
  }

  function next_image(e){
    var p = e.target.getParent().getParent().getParent();
    var imgs = p.getElements('img.work_description');
    var totalImages = imgs.lenght;
    var counter = p.getElements('li.arrow_long');
    var text = counter.get('text').toString().split('/');
    text[0] = text[0].toInt();
    text[1] = text[1].toInt();

    
    var next = false;
    $each(imgs, function(img){
      
      if(next == true){
        next = false;
        fadeImgIn(img);
        counter.set('html', ++text[0] + '<span class="color_main">/</span>' + text[1])
      }
      else if(img.hasClass('visible') && img != imgs.getLast()){
        fadeImgOut(img);
        next = true;
      } else if(img.hasClass('visible') && img == imgs.getLast()){
        fadeImgOut(img);
        next = true;
      }
    });
    if(next){
      counter.set('html', 1 + '<span class="color_main">/</span>' + text[1])
      next = false;
      img = imgs[0];
      fadeImgIn(img);
    }
  }
  function getCenteredElement(){
    var distance = false, closestElement;
    var window_w = window.getSize().x;
    var center = Math.abs($('works').getPosition().x);
    $('works').getElements('div.block').each(function(el){
      var element_center = el.getPosition('works').x;
      var new_distance = Math.abs(center - Math.abs(element_center));
      if(distance === false){
        distance = new_distance;
        closestElement = el;
      }
      else if(new_distance < distance){
        closestElement = el;
        distance = new_distance;
      }
    });
    return closestElement;
  }
  function fadeImgIn(img){
    img.addClass('visible');
    img.getParent().removeClass('not_displayed');
  
  }
  function fadeImgOut(img){
    img.getParent().addClass('not_displayed');
    img.removeClass('visible');
  }
  function scrollTo(el,destination, duration){
    var myFx = new Fx.Scroll('works-container', {
      duration: duration,
      wait: false,
      fps: ANIMATION_FPS
    });
    myFx.addEvent('complete', function(){
      var morph = new Fx.Morph(el, {duration: 'long', fps: ANIMATION_FPS, transition: Fx.Transitions.Sine.easeOut});
      goingLeft = false;
      goingRight = false;
      
      morph.addEvent('complete', function(){
        var id_full = el.getElements('img.work_description').get('id').toString();
        var id = id_full.split('_');
        var url = new String('/works/json/' + id[1]);
        var c_url = window.location.href;
        if(window.location.href.charAt(window.location.href.lenght - 1) != '/')
          c_url = c_url + '/';
        var data = (new URI(c_url));
        var splitted_url = data.get('directory').split('/');
        if(splitted_url[2]){
          url = new String('/works/json/' + id[1] + '/' + splitted_url[2])
        }
        loadContent(url,el);
      });
      
      morph.start({
        'width': 900
      });
    });
    myFx.start(destination);
  }
  
  if($('works')){
    
    var goingLeft = false, goingRight = false;
    var rFx, lFx;
    
    var window_w = window.getSize().x;
    
    $('works').getElements('div.block').each(function(el){
      el.addEvent('click', function(e){
        goingRight = true;
        goingLeft = true;
        var destination = el.getPosition('works').x - (window_w - el.getSize().x - 460)/2;
        var duration = 100;
        
        
        var ul = el.getElements('ul.image_work');
        var img = ul.getElements('img');
        img[0].addClass('vb');
        ul.removeClass('border');
        ul.addClass('work_opened');
        el.removeEvents('click');
        //el.set('spinner','Loading...');
        //el.spin();
        scrollTo(el,destination, duration*10);      
      });  
    });
    
    
    window.addEvent('mousewheel', function(evt){
      evt.stop(); // prevent the mousewheel from scrolling the page.
      (evt.wheel < 0) ? goRight(evt) : goLeft(evt);
    });
    
    window.addEvent('keydown', function(evt){ if( evt.key == 'left') goLeft(evt);});
    window.addEvent('keydown', function(evt){ if( evt.key == 'right') goRight(evt);});
    $('la').addEvent('click', goLeft);
    $('ra').addEvent('click', goRight);
    
    $('gr').addEvent('mouseover', function(){
      var width = $('works-container').getScrollSize().x;
      if(!goingRight){
        goingRight = true;
        var scrolled = $('works-container').getScroll().x;
        totalMove = width - scrolled;
        
        rFx = new Fx.Scroll('works-container', {
          duration: totalMove * 3,
          wait: false,
          transition: Fx.Transitions.linear,
          fps: ANIMATION_FPS
        }).toRight();
      }  
    });
    
    
    $('gr').addEvent('mouseleave', function(){
        goingRight = false;
        rFx.cancel();
    });
    $('gl').addEvent('mouseover',function(){
      var width = $('works-container').getScrollSize().x;
      if(!goingLeft){
        goingLeft = true;
        var scrolled = $('works-container').getScroll().x;
        totalMove = scrolled;
        
        lFx = new Fx.Scroll('works-container', {
          duration: totalMove * 3,
          wait: false,
          transition: Fx.Transitions.linear,
          fps: ANIMATION_FPS
        }).toLeft();
      }
    });
    $('gl').addEvent('mouseleave', function(){
      goingLeft = false;
      lFx.cancel();
    });
  }
  
  function goLeft(e){
    var closestElement = getCenteredElement().getPrevious().getPrevious();
    if(!closestElement)
      return;
    if(!goingLeft && !goingRight)
      goingLeft = true;
    else
      return;
    var window_w = window.getSize().x;
    
    //alert(closestElement.getPosition().x)
    var myFx = new Fx.Scroll('works-container', {
    duration: 200,
    wait: false,
    fps: ANIMATION_FPS,
    wheelStops: false
    });
    myFx.addEvent('complete', function(e){ goingLeft = false; });
    myFx.start(closestElement.getPosition('works').x);
  }
  function goRight(e){
    var closestElement = getCenteredElement().getNext();
    if(!closestElement)
      return;
    if(!goingLeft && !goingRight)
      goingRight = true;
    else
      return;
    var window_w = window.getSize().x;
    
    //alert(closestElement.getPosition().x)
    var myFx = new Fx.Scroll('works-container', {
    duration: 200,
    wait: false,
    fps: ANIMATION_FPS,
    wheelStops: false
    });
    myFx.addEvent('complete', function(e){ goingRight = false; });
    myFx.start(closestElement.getPosition('works').x);
  }
});