$(function() {
  // Check Location
	if ( document.location.protocol === 'file:' ) {
		alert('The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.');
	}

	// Establish Variables
	var
		History = window.History, // Note: We are using a capital H instead of a lower h
		State = History.getState(),
		$log = $('#log');

	// Log Initial State
  History.log('initial:', State.data, State.title, State.url);

	// Bind to State Change
	History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
		// Log the State
		var State = History.getState(); // Note: We are using History.getState() instead of event.state
		History.log('statechange:', State.data, State.title, State.url);
	});
	
  var content_window = $("#portfolio_v2"); 
  var app_width = $(".app");   
  var current_app = $('li.app[data-target="0"]');
  var current_data_target = 0;  
  var thumb = $(".thumb");
  
  function resize_app_window() {       
    if($('#portfolio_v2 .device').css("position") === "relative"){
      //resize height of app summary      
      app_width.width(content_window.width());  
      content_window.css('height', current_app.height());    
    }
  };
  function scrollToTop() {
    $('html, body').animate({
      scrollTop: $("#portfolio_v2").offset().top
    }, 400);
  };
  
  function nameFromIndex(index) {
    var project_name = $('a[data-target="'+index+'"]').attr('data-name');
    return project_name;
  }
  
  function getCurrentAppFromURL() {
    var name = getQueryVariable('app');
    var index = $('a[data-name="'+name+'"]').attr('data-target');
    return index;
  }
  
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return unescape(pair[1]);
      }
    }
  }
  
  var arrows = $(".browse");
  arrows.click(function() {   
    content_window.scrollable().getConf().speed = 300;
    return false; 
  });
  
  thumb.click(function() {   
    current_data_target = $(this).data("target");  
    
    content_window.scrollable().getConf().speed = 0;
    content_window.scrollable().seekTo(current_data_target);  
    current_app = $('li.app[data-target="' + current_data_target + '"]');    
    //this is so you dont see the pop of the windows height resizing if your not scrolled down the page
    var windows_position = $(window).scrollTop();
    $('html, body').animate({
      scrollTop: $("#portfolio_v2").offset().top
    }, 500, resize_app_window);
    
    return false;          
  });     
  
  $(window).resize(function() {
    resize_app_window();    
  });
  
  var in_scrollable_callback = false;
  
  History.Adapter.bind(window,'statechange',function() { 
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);            
    var targetIndex = State.data.state;
    if (!in_scrollable_callback) {
      content_window.scrollable().seekTo(targetIndex);   
    }
    current_app = $('li.app[data-target="' + State.data.state + '"]'); 
  });
  
  //when page loads do this
  content_window.scrollable({ circular: true, mousewheel: true, speed: 0, touch: false, onSeek: function(event, index) {
      var project_name = nameFromIndex(index);
      in_scrollable_callback = true;
      History.pushState({state:index}, project_name, "?app=" + project_name);
      in_scrollable_callback = false;
     }      
  });
  resize_app_window();       
  
  var index = getCurrentAppFromURL();
  content_window.scrollable().seekTo(index);  
  
  return false;   
});