function tiles(){
  $("#strip").html("");
  $('#strip').css('left','0');
  var ref = $('#strip');
  var images = $("#references .reference");
  $.each(images,function(){
    var img = this;
    $(img).show();
    var placed = false;

      $.each($('.column'),function(){
        if (($(this).height() + $(img).height()) < ($(window).height() - 190) && !placed){
          $(this).append('<div class="reference" id="'+ $(img).attr('id').substring(2) +'">'+ $(img).html() +'</div>');
          $(this).height($(this).height() + $(img).height());
          placed = true;
        }
      });
      if (!placed){
        $(ref).append('<div class="column"  style="height: ' + $(img).height() + 'px"><div class="reference" id="'+ $(img).attr('id').substring(2) +'">'+ $(img).html() +'</div></div>');
      }
  });
  $(ref).width($('#strip .column').length * 305);
  $('#showroom').width($(window).width());
  $('.column img').tooltip({
    showURL: false,
    track: true
  });
  referenceHover();
  reference();
}

function referenceHover(){
  $('.column .reference').hover(function(){
    $(this).find('.srafa').hide();
  }, function(){
    $(this).find('.srafa').show();
  });
}

function ref_nav(){
  $('.reference_switch, .category').click(function(){
    referenceLoad($(this).attr('id'));
  });
}

function reference(){
  $('.column .reference').click(function(){
    referenceLoad($(this).attr('id'));
  });
}

function referenceLoad(id, slug){
  var attr = new Array();
  if(id){
   var attr = id.split('_');
  }
  $.ajax({
    type: "POST",
    dataType: "html",
    data: {refId: attr[1], 
           catId: attr[2],
           slug: function(){
             if(slug){
               return slug;
             } else {
               return '';
             }
           }
          },
    url: 'reference/referenceViewer',
    beforeSend: function(){
      $('#reference_viewer').html('<div class="loading"></div>');
      $('#reference_viewer').dialog("open");
      $('.ui-widget-overlay').width($(window).width());
     // $('.srafa').hide();
    },
    success: function(i){
      $('#reference_viewer').html($('#reference_viewer').html() + i);
    },
    error: function(){
      $('#reference_viewer').dialog("close");
    },
    complete: function(){
      $('#reference_viewer .loading').hide();
      $('#reference_viewer .dialog_content').show();
      $('.ref_box').onImagesLoad({
        itemCallback: function(){
          $('.ui-widget-overlay').width($(window).width());
          $('#showroom').width($(window).width());
        }
      });
      $('#viewer_close').click(function(){
        $('#reference_viewer').dialog("close");
     //   $('.srafa').show();
      });
      ref_nav();
      location.hash = $(".dialog_content").attr('id');
    }
  });
}

var w = $(window).width();
var h = $(window).height();
var down = 0;

$(document).ready(function(){
  tiles();  

  $('#move-right').mousehold(function(){
    var l = $('#strip').position().left;
    if ($("#strip").width() > $(window).width()){
      var new_pos = l-80;
      if ($(window).width() < ($("#strip").width() - Math.abs(new_pos))){
        $('#strip').animate({left: new_pos+'px'},{complete: function(){$('#strip').clearQueue()}});
      } else {
        $('#strip').animate({left: ($(window).width() - $('#strip').width())+'px'},{complete: function(){$('#strip').clearQueue()}});
      }
    } else {
      if(l > 0){
        new_pos = l - 80;
        $('#strip').animate({left: new_pos+'px'},{complete: function(){$('#strip').clearQueue()}});
      }
    }
    $('#strip').clearQueue()
  });

  $('#move-left').mousehold(function(){
    var maxLeft = $('#menu').position().left + $('#menu').width();
    var l = $('#strip').position().left + 80;
    if (l <= maxLeft){
      $('#strip').animate({left: l+'px'},{complete: function(){$('#strip').clearQueue()}});
    } else {
      l = maxLeft;
      $('#strip').animate({left: l+'px'},{complete: function(){$('#strip').clearQueue()}});
    }
    $('#strip').clearQueue()
  });

  $("#reference_viewer").dialog({
    width: 551,
    modal: true,
    autoOpen: false,
    resizable: false,
    position: ['center',0],
    close: function(){
      $("#reference_viewer").html('');
      $("body > shape").remove();
      location.hash = "";
      $('#showroom').width($(window).width());
    }
  });
  if (location.hash.length > 1){
    var slug = location.hash.substring(1);
    referenceLoad(false, slug);
  }
  w = $(window).width();
  h = $(window).height();
});

var resized = 0;

$(window).resize(function(){
  if ($.browser.safari){
    resized++;
    if (resized % 2 != 0){
      return;
    }
  }
  if ($(window).width() != w || $(window).height() != h){
    tiles();
    w = $(window).width();
    h = $(window).height();
  }
});