// JavaScript Document
var myScroll;
var width;
var height;
var num_images = 45;
var imgRatio = 1024/683;
var posX;
var is_touch_device;

function loaded() {
  is_touch_device = ('ontouchstart' in document.documentElement)?true:false;
  $.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=c44bb06a698bc505a528756e47025c13&user_id=8833026@N08&per_page="+num_images+"&format=json&nojsoncallback=1", function(data){
    for(var i=0;i<num_images;i++){
      var imageURL = "http://farm"+data.photos.photo[i].farm+".static.flickr.com/"+data.photos.photo[i].server+"/"+data.photos.photo[i].id+"_"+data.photos.photo[i].secret+"_b.jpg";
      if(i == 0){
        $('#thelist').prepend('<li id="first"><img id="img_first" src="'+imageURL+'" /></li>');
      }
      else{
        $('#thelist').prepend('<li><img src="'+imageURL+'" /></li>');
      }
    }
    resize();
    $(window).resize(resize);
    $('img').load(resize);
  
    myScroll = new iScroll('wrapper', {
      snap: true,
      momentum: false,
      hScrollbar: false
    });
    
    myScroll.scrollToElement("#first", 0);
    $('#img_first').load(function(){
      $('#wrapper').delay(1000).animate({opacity:1},1000);
      $('#wrapper').mousedown(function(){
        $('#wrapper').unbind('mousedown');
        $('#wrapper').mousedown(onDown);
        $('#wrapper').mouseup(onUp);
      });
      $('#wrapper').mousemove(onMove);
      if(is_touch_device){
        $('#drag').delay(1000).fadeIn(1000).delay(2500).fadeOut(500);
        $('#btn_first').css('display','block');
        $('#btn_first').animate({left:'0px'},1000,'easeInOutExpo');
        $('#btn_first').click(function(){myScroll.scrollToElement("#first", 1000);});
      }
    });
    
  });
  $('#wrapper').css('opacity','0');
  
  preloadButtons();
  
  //INIT ROLL OVERS
  if(!is_touch_device){
    $('.btn').mouseover(onBtnOver);
    $('.btn').mouseout(onBtnOut);
  }
  else{
    $('.btn').each(function(){
      var src = $(this).attr('src');
      $(this).attr('src',src.split('.')[0]+"_over.png");
    });
    
  }
  
  $('#btnCloseClick').click(onHideNav);
}

function preloadButtons(){
  $('.btn').each(function(index) {
    var img = new Image();
    img.src = $(this).attr('src').split('.')[0]+"_over.jpg";
  });
}

function onDown(e){
  posX = e.pageX;
}

function onUp(e){
  if((e.pageX - posX) > 20){
    onHideNav();
    $('#wrapper').unbind('mousedown');
    $('#wrapper').unbind('mouseup');
    $('#wrapper').unbind('mousemove');  
    hideDrag();
    $('#btn_first').css('display','block');
    $('#btn_first').animate({left:'0px'},1000,'easeInOutExpo');
    $('#btn_first').click(function(){myScroll.scrollToElement("#first", 1000);});
  }
}

function onMove(e){
  if(e.pageX > (width/2 - 200) && e.pageX < (width/2 + 200)){
    if(e.pageY > (height/2 - 200) && e.pageY < (height/2 + 200)){
      showDrag();  
    }
    else{
      hideDrag();  
    }
  }
  else{
    hideDrag();  
  }
}

function showDrag(){
  $('#drag').fadeIn(500);
}

function hideDrag(){
  $('#drag').fadeOut(500);
}

function resize(){
    width = $(window).width();
    height = $(document).height();
    
    $('#drag').css('left',(width-171)/2+"px");
    $('#drag').css('top',(height-152)/2+"px");
    
    $('#wrapper').css('width',width+"px");
    $('#wrapper').css('height',height+"px");
    $('li').css('width',width+"px");
    $('li').css('height',height+"px");
    $('#scroller').css('width',(width*num_images)+"px");
    $('#scroller').css('height',height+"px");
    $('#scroller img').each(function(index){
      //var imgRatio = 1600/900;
      var stageRatio = width/height;
      var imgWidth,imgHeight,imgLeft,imgTop;
      imgRatio = $(this).width()/$(this).height();
      if(imgRatio>stageRatio){
        imgHeight = height;
        imgWidth = imgHeight*imgRatio;  
      }
      else{
        imgWidth = width;
        imgHeight = imgWidth/imgRatio;
      }
      imgLeft = (width-imgWidth)/2;
      if(imgRatio >= 1){
        imgTop = (height-imgHeight)/2;
      }
      else{
        imgTop = 0;  
      }
      $(this).attr('width',imgWidth+'px');
      $(this).attr('height',imgHeight+'px');
      $(this).css('margin-left',imgLeft+"px");
      $(this).css('margin-top',imgTop+"px");
    });
    
    setTimeout(function () { myScroll.refresh(); }, 0);
}

function onHideNav(){
  $('#btnCloseClick').unbind('click');
  $('#btnCloseClick').click(onShowNav);
  $('#btnClose').delay(500).attr('src','imgs/arrow_open.png');
  $('#nav').animate({right:'-189px'},1000,'easeInOutExpo',function(){
    $('#nav').css('width','40px');
    $('#nav').css('right','0px');  
  });  
}

function onShowNav(){
  $('#btnCloseClick').unbind('click');
  $('#btnCloseClick').click(onHideNav);
  $('#btnClose').delay(500).attr('src','imgs/arrow_close.png');
  $('#nav').css('width','229px');
  $('#nav').css('right','-189px');
  $('#nav').animate({right:'0px'},1000,'easeInOutExpo');  
}

function onBtnOver(){
  var src = $(this).attr('src');
  $(this).attr('src',src.split('.')[0]+"_over.png");
}

function onBtnOut(){
  var src = $(this).attr('src');
  $(this).attr('src',src.split('_')[0]+".png");
}

document.addEventListener('DOMContentLoaded', loaded, false);