MGGallery = {
  ELEMENTS: [],
  CURRENT: null,
  
  initialize: function(elements){
    MGGallery.addElements(elements)
    $("#cube-content").append(
      $('<div id="MGGallery-container"></div>').append(
        $('<div id="MGGallery-container-inner"></div>').append(
          $('<div id="MGGallery-background"></div>')
        ).append(
          $('<a href="#" id="MGGallery-close"><span>×</span></a>').click(function(){
            MGGallery.close();
            return false;
          })
        ).append(
          $('<a href="#" id="MGGallery-next"><span></span></a>').click(function(){
            MGGallery.showNext();
            return false;
          })
        ).append(
          $('<a href="#" id="MGGallery-prev"><span></span></a>').click(function(){
            MGGallery.showPrev();
            return false;
          })
        ).append(
          $('<img src="/images/loader.gif">').css({position: 'absolute', zIndex: '999999', top: '50%', left: '50%'}).attr('id', 'loader-anim').hide()
        )
        
      ).css({opacity: 0}).hide()
    );
    var parts = window.location.href.split("#");
    
    if(parts.length) {
      var img = parts[1];
      $(elements).each(function(){
        var im = $(this);
        if(im.attr("rel")==img) {
          
          $(this).click();
        }
      })
    }
  },
  addElements: function(elements){
    for(var a=0; a<elements.length; a++) {
      MGGallery.ELEMENTS.push(elements[a]);
      $(elements[a]).click(function(){
        MGGallery.show(this);
        return false;
      })
    }
  },
  show: function(element) {
    MGGallery.CURRENT = element;
    $('#MGGallery-container-inner img.slideshow-image').animate({opacity: 0.25}, 200, "");
    if(!$.browser.msie)
      $("img#loader-anim").show();
    var i = $('<img />').load(MGGallery.onImageLoaded).attr("src", $(element).attr("href"));
    var parts = window.location.href.split("#");
    var url = (parts[0]);
    window.location.href= url+"#"+$(element).attr("rel")
  },
  showNext: function() {
    var a;
    var c_index=-1;
    for(a in MGGallery.ELEMENTS) {
      if(MGGallery.CURRENT == MGGallery.ELEMENTS[a]) {
        c_index = a;
        break;
      }
    }
    c_index++;
    if(!MGGallery.ELEMENTS[c_index]) c_index = 0
    MGGallery.show(MGGallery.ELEMENTS[c_index]);
  },
  showPrev: function() {
    var a;
    var c_index=-1;
    for(a in MGGallery.ELEMENTS) {
      if(MGGallery.CURRENT == MGGallery.ELEMENTS[a]) {
        c_index = a;
        break;
      }
    }
    c_index--;
    if(c_index<0) c_index = MGGallery.ELEMENTS.length -1;
    MGGallery.show(MGGallery.ELEMENTS[c_index]);
  },
  onImageLoaded: function(e) {
    $("img#loader-anim").hide();
    var im = e.currentTarget;
    if(im.width >= im.height){
      // landscape
      var nw = $("#cube-container").css("font-size").split("px").join("")*80
      var nh = im.height * (nw / im.width);
      var nph = nw/2 - nh/2
      $(im).css({width: nw+"px", height: nh+"px", position: "absolute", top: nph+"px"})
    }else{
      //portrait
      var nh = $("#cube-container").css("font-size").split("px").join("")*80
      var nw = im.width * (nh / im.height);
      var npw = nh/2 - nw/2
      $(im).css({width: nw+"px", height: nh+"px", position: "absolute", left: npw+"px"})
    }
    $(im).addClass("slideshow-image")
    $('#MGGallery-container-inner img.slideshow-image').animate({opacity: 0}, 200, "", function(){$(this).remove();});
    $('#MGGallery-container-inner').append($(im));
    $(im).css("opacity", 0).animate({opacity: 1}, 500)
    $('#MGGallery-container').show().animate({opacity: 1}, 500);
    
    $(im).click(function(){ MGGallery.showNext() })
    
  },
  close: function(){
    $('#MGGallery-container-inner img').animate({opacity: 0}, 200, "", function(){$(this).remove();});
    $('#MGGallery-container').show().animate({opacity: 0}, 200, "", function(){$(this).hide()});
  }
  
}