$(document).ready(function(){
 
  // Centering the images
  $('img', ".Examplesslide").each(function(){
    var lHeight = this.clientHeight;
    var lParentHeight = this.parentNode.parentNode.clientHeight;
    this.style.marginTop = (lParentHeight - lHeight)/2 + "px";
  });

  
 
  // Set the offset of the opened image
  xOffset = 50;
  yOffset = -500;
  // Bind the hover of the link to the function
  $("a.preview").hover(function(e){

    this.t = this.title;
    this.title = ""; 
    var ah=this.href;

    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<div id='preview'></div>");
                     

    
    var log = function(SourceHeight,SourceWidth) {
      $(loadingimg).fadeOut(100);
      var rel;
      if(SourceHeight>SourceWidth){
        rel=SourceWidth/SourceHeight;
        SourceHeight=400;
        SourceWidth=(rel*400);
      } else {
        rel=SourceHeight/SourceWidth;
        SourceHeight=(rel*400);
        SourceWidth=400;
      }
      img.height=SourceHeight;
      img.width=SourceWidth;
      
      //$(loadingimg).css('display','none');
      $(img).fadeIn(1000);
    }
        
    var img = document.createElement("IMG");
    var loadingimg=document.createElement("IMG");
    $(img).css('display','none');
    //Binding imgs' onload to function log
    img.onload = function() { log(img.height,img.width); }  
      
    $("#preview").append($(loadingimg));
    $(loadingimg).css("position","absolute");
    $(loadingimg).css("top","200");
    loadingimg.src ="http://develop.host-in.co.il/media/2692/loader.gif";

    img.src = ah;
    $("#preview").append($(img));
    $("#preview")
      .css("top",(e.pageY + yOffset) + "px")
      .css("left",(e.pageX + xOffset) + "px")
      .css("position","absolute");  
  },
  function(){
    this.title = this.t;  
    $("#preview").remove();
    });  
  $("a.preview").mousemove(function(e){
    $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px");
   
  });     
  //Set slideshow width for smaller resolutions
  if (screen.width==1024){
      $("#Examplesslideshow").css("width",600);
      $("#ExamplesSlidesContainer").css("width",450);
  } 
  if (screen.width==800){
      $("#Examplesslideshow").css("width",400);
      $("#ExamplesSlidesContainer").css("width",300); 
   }
  

  //Now the actual slideshow
  var currentPosition = 0;
  var slideWidth = 300;
  var slides = $('.Examplesslide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#ExamplesSlidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="ExamplesSlideInner"></div>')
    // Float left to display horizontally, readjust .slides width
  .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #ExamplesSlideInner width equal to total width of all slides
  $('#ExamplesSlideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
 $('#Examplesslideshow')
    .prepend('<span class="Examplescontrol" id="ExamplesleftControl">Clicking moves left</span>')
    .append('<span class="Examplescontrol" id="ExamplesrightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.Examplescontrol')
    .bind('click', function(){
    // Determine new position
  currentPosition = ($(this).attr('id')=='ExamplesrightControl') ? currentPosition+1 : currentPosition-1;
    
  // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#ExamplesSlideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
  if(position==0){ $('#ExamplesleftControl').hide() } else{ $('#ExamplesleftControl').show() }
  // Hide right arrow if position is last slide
    if(position>=numberOfSlides-2){ $('#ExamplesrightControl').hide() } else{ $('#ExamplesrightControl').show() }
  }  
   

});