• Meta

  Added about 1 year ago

• Categories

  • Slider
  • Ajax
  • Navigation
  • Scrolling
  • Keyboard

• Links of interest

  1. Original Source
  2. At Twitter: @SocketStudios
  3. Mousewheel jQuery Plugin
  4. scrollTo jQuery Plugin

var current_section = 0;
var total_section = 15;

var transition_flag = 0;

var current_image = 1;

var total_image = 5;

var total_images = new Array();

var index_flag = 0;

total_images[0] = 1;
total_images[1] = 4;
total_images[2] = 6;
total_images[3] = 4;
total_images[4] = 5;
total_images[5] = 6;
total_images[6] = 8;
total_images[7] = 4;
total_images[8] = 6;
total_images[9] = 3;
total_images[10] = 5;
total_images[11] = 5;
total_images[12] = 4;
total_images[13] = 3;
total_images[14] = 12;
total_images[15] = 1;

var load_flags = new Array();
var i = 1;
for (i = 1; i <= 15; i++) {
  load_flags[i] = 0;
}

var load_flags_0 = new Array();
var load_flags_1 = new Array();
var load_flags_2 = new Array();
var load_flags_3 = new Array();
var load_flags_4 = new Array();
var load_flags_5 = new Array();
var load_flags_6 = new Array();
var load_flags_7 = new Array();
var load_flags_8 = new Array();
var load_flags_9 = new Array();
var load_flags_10 = new Array();
var load_flags_11 = new Array();
var load_flags_12 = new Array();
var load_flags_13 = new Array();
var load_flags_14 = new Array();
var load_flags_15 = new Array();

var i = 1;
for (i = 1; i <= 12; i++) {
  load_flags_0[i] = 0;
  load_flags_1[i] = 0;
  load_flags_2[i] = 0;
  load_flags_3[i] = 0;
  load_flags_4[i] = 0;
  load_flags_5[i] = 0;
  load_flags_6[i] = 0;
  load_flags_7[i] = 0;
  load_flags_8[i] = 0;
  load_flags_9[i] = 0;
  load_flags_10[i] = 0;
  load_flags_11[i] = 0;
  load_flags_12[i] = 0;
  load_flags_13[i] = 0;
  load_flags_14[i] = 0;
  load_flags_15[i] = 0;
}

$(document).ready(function() {

  //alert('DOCUMENT READY');

  //Cache DOM Objects

  var $main = $('#main');
  var $details_container = $('#details_container');




  if (window.location.hash) {
    var hash = window.location.hash.substring(5); //Puts hash in variable, and removes the # character

    var hash_int = parseInt(hash);

    if (isNaN(hash_int)) {
      var $main = $('#main');
      $main.scrollTo('#work0');
      var $arrow_left_start = $('#arrow_left');
      var $arrow_right_start = $('#arrow_right');
      $arrow_left_start.css('visibility', 'hidden');
      $arrow_right_start.css('visibility', 'hidden');
    } else {

      current_section = hash_int;
      total_image = total_images[current_section];
      var details_target = '#details_' + current_section;
      $details_container.scrollTo(details_target);
      load_once = 1;
      var $arrow_left_start = $('#arrow_left');
      var $arrow_right_start = $('#arrow_right');

      var index_flag = 1;

      $arrow_right_start.css('visibility', 'visible');
      //$arrow_right_start.hide();
      //$arrow_right_start.fadeIn(600);

      $arrow_left_start.css('visibility', 'visible');
      //$arrow_left_start.hide();
      //$arrow_left_start.fadeIn(600);

    }

  } else {


    var $main = $('#main');
    $main.scrollTo('#work0');
    var $arrow_left_start = $('#arrow_left');
    var $arrow_right_start = $('#arrow_right');
    $arrow_left_start.css('visibility', 'hidden');
    $arrow_right_start.css('visibility', 'hidden');
  }

  //update_text();


  //Reset page scrolling on Load
  //$.scrollTo( 0 );

  // Update Text
  // document.getElementById('work_text').innerHTML = 'Init';

  // Get Window Size

  var myWidth = 0,
    myHeight = 0;

  myWidth = $(window).width();
  myHeight = $(window).height();

  if (myHeight >= 900) {
    image_height = 900;
    image_width = 1350;
  } else {
    image_height = myHeight;
    image_width = image_height * 1.5;
  }

  // Mouse Wheel


  $('#main').bind('mousewheel', function(event, delta) {
    if (delta < 0) {
      scroll_down();
    } else {
      scroll_up();
    }
  });






  // Set Image Offset

  var $imgcont = $('.imgcontainer');

  $imgcont.css('width', +image_width);
  $imgcont.css('margin-top', +image_height / -2 + "px");
  $imgcont.css('margin-left', +image_width / -2 + "px");

  // Nav Functions

  // Easing: Ease In Out Quart

  $.easing.easeInOutQuart = function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
  };

  $(document).keydown(function(e) {
    if (e.keyCode == 37) {
      scroll_left();
      return false;
    }
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 38) {
      scroll_up();
      return false;
    }
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 39) {
      scroll_right();
      return false;
    }
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 40) {
      scroll_down();
      return false;
    }
  });



  //Scroll Up Function

  function scroll_up() {

    if (transition_flag == 0) {

      if (current_section == 0) {
        transition_flag = 1;
        bounce_up();
      } else {

        transition_flag = 1;
        current_section = current_section - 1;

        //update_text();

        var load_flag = window['load_flags_' + current_section];

        if (load_flag[1] == 1) {

          var $image = $('#image_' + current_section + '_1');
          $image.css('visibility', 'visible');

        }

        current_image = 1;
        total_image = total_images[current_section];

        target = '#work' + current_section;

        $main.scrollTo(target, 600, {

          onAfter: function() {


            window.location.hash = target;

            if (current_section == 0) {
              index_flag = 0;
              $arrow_right_start.fadeOut(200);
              $arrow_left_start.fadeOut(200);
            }

            update_image_position();
            load_image();
            transition_flag = 0;
            update_text();

          },
          easing: 'easeInOutQuart'

        });
      }
    }
  };

  function bounce_up() {

    target = '#top_end';

    $main.scrollTo(target, 300, {
      onAfter: function() {
        bounce_up_back();
      },
      easing: 'easeInOutQuart'

    });
  }

  function bounce_up_back() {

    target = '#work0';

    $main.scrollTo(target, 400, {
      onAfter: function() {
        transition_flag = 0;
      },
      easing: 'easeInOutQuart'

    });
  }

  //Scroll Down Function

  function scroll_down() {

    if (transition_flag == 0) {

      if (index_flag != 1) {

        index_flag = 1;
        $arrow_right_start.css('visibility', 'visible');
        $arrow_right_start.hide();
        $arrow_right_start.delay(600).fadeIn(600);

        $arrow_left_start.css('visibility', 'visible');
        $arrow_left_start.hide();
        $arrow_left_start.delay(600).fadeIn(600);

      }

      if (current_section == total_section) {

        transition_flag = 1;
        bounce_down();
      } else {

        transition_flag = 1;
        current_section = current_section + 1;

        //update_text();

        var load_flag = window['load_flags_' + current_section];

        if (load_flag[1] == 1) {

          var $image = $('#image_' + current_section + '_1');
          $image.css('visibility', 'visible');

        }

        current_image = 1;
        total_image = total_images[current_section];


        target = '#work' + current_section;

        $main.scrollTo(target, 600, {
          onAfter: function() {
            window.location.hash = target;
            update_image_position();
            load_image();
            transition_flag = 0;
            update_text();

          },
          easing: 'easeInOutQuart'

        });
      }
    }
  };

  function bounce_down() {

    target = '#bottom_end_marker';

    $main.scrollTo(target, 300, {
      onAfter: function() {
        bounce_down_back();
      },
      easing: 'easeInOutQuart'

    });
  }

  function bounce_down_back() {

    target = '#work15';

    $main.scrollTo(target, 400, {
      onAfter: function() {
        transition_flag = 0;
      },
      easing: 'easeInOutQuart'

    });
  }

  //Scroll Left Function

  function scroll_left() {

    if (transition_flag == 0) {



      if (current_image > 1) {
        current_image = current_image - 1;

        transition_flag = 1;

        //update_text();

        var load_flag = window['load_flags_' + current_section];

        if (load_flag[current_image] == 1) {

          var $image = $('#image_' + current_section + '_' + current_image);
          $image.css('visibility', 'visible');
        }

        target = '#workcontent' + current_image;
        var $container = $('#work' + current_section);
        //$container.scrollTo( target, 600, { easing:'easeInOutQuart' });

        $container.scrollTo(target, 750, {
          onAfter: function() {
            //window.location.hash = target;
            sort_image_visibility();
            transition_flag = 0;

          },
          easing: 'easeInOutQuart'

        });

      } else {
        transition_flag = 1;
        bounce_left();
      }
    }

  };

  function bounce_left() {

    target = '#side_end_left';
    var $container = $('#work' + current_section);

    $container.scrollTo(target, 300, {
      onAfter: function() {
        bounce_left_back();
      },
      easing: 'easeInOutQuart'

    });
  }

  function bounce_left_back() {

    target = '#workcontent' + current_image;

    var $container = $('#work' + current_section);

    $container.scrollTo(target, 400, {
      onAfter: function() {
        transition_flag = 0;
      },
      easing: 'easeInOutQuart'

    });
  }

  //Scroll Right Function

  function scroll_right() {

    if (transition_flag == 0) {



      if (current_image == total_image) {
        transition_flag = 1;
        bounce_right();
      } else {

        transition_flag = 1;
        current_image = current_image + 1;

        //update_text();

        var load_flag = window['load_flags_' + current_section];

        if (load_flag[current_image] == 1) {

          var $image = $('#image_' + current_section + '_' + current_image);
          $image.css('visibility', 'visible');
        }

        target = '#workcontent' + current_image;
        var $container = $('#work' + current_section);

        $container.scrollTo(target, 750, {
          onAfter: function() {
            sort_image_visibility();
            transition_flag = 0;

          },
          easing: 'easeInOutQuart'

        });

      }
    }
  };

  function bounce_right() {

    target = '#side_end_marker_' + current_section;
    //target = '95%';
    var $container = $('#work' + current_section);

    $container.scrollTo(target, 300, {
      onAfter: function() {
        bounce_right_back();
      },
      easing: 'easeInOutQuart'

    });
  }

  function bounce_right_back() {

    target = '#workcontent' + current_image;

    var $container = $('#work' + current_section);

    $container.scrollTo(target, 400, {
      onAfter: function() {
        transition_flag = 0;
      },
      easing: 'easeInOutQuart'

    });
  }


  // Arrow Clicks

  $('#arrow_up').click(function(event) {
    scroll_up();
  });

  $('#arrow_down').click(function(event) {
    scroll_down();
  });

  $('#image_0_1').click(function(event) {
    scroll_down();
  });

  $('#image_15_1').click(function(event) {
    parent.location = 'mailto:paul@socketstudios.com';
  });




  $('#arrow_left').click(function(event) {
    scroll_left();
  });

  $('#arrow_right').click(function(event) {
    scroll_right();
  });

  $('#btn_details').click(function(event) {
    var $close_button = $('#btn_close');
    var $details_button = $('#btn_details');
    $close_button.css('visibility', 'visible');

    $details_button.css('visibility', 'hidden');


    $("#details").fadeIn(200);
    var $details_container = $('#details_container');
    var details_target = '#details_' + current_section;
    $details_container.scrollTo(details_target);
  });

  $('#btn_close').click(function(event) {
    var $close_button = $('#btn_close');
    var $details_button = $('#btn_details');
    $close_button.css('visibility', 'hidden');
    $details_button.css('visibility', 'visible');
    $("#details").fadeOut(100);
  });


  function update_text() {

    //alert('UPDATE TEXT');
    //var text_string = 'Current Section: '+current_section+' | Current Image: '+current_image+' | Total Image: '+total_image+' | Trans Flag: '+transition_flag+'<br>'+load_flags_1+'<br>'+load_flags_2+'<br>'+load_flags_3+'<br>'+load_flags_4+'<br>'+load_flags_5+'<br>'+load_flags_6+'<br>'+load_flags_7+'<br>'+load_flags_8;
    //document.getElementById('work_text').innerHTML = text_string;

    var $details_container = $('#details_container');
    var details_target = '#details_' + current_section;
    $details_container.scrollTo(details_target);

  };


  function update_image_position() {

    var i = 0;
    for (i = 0; i <= 15; i++) {
      var $container = $('#work' + i);
      var left_target = '#workcontent1';
      $container.scrollTo(left_target);
    }
  };

  function sort_image_visibility() {

    //alert('SORT IMAGE VIS');
    var i = 0;
    var j = 1;
    for (i = 0; i <= 15; i++) {
      for (j = 1; j <= 12; j++) {
        if (i == current_section && j == current_image) {
          //var $container = $('#image_'+i+'_'+j);
          //$container.css('visibility', 'visible');

        } else {
          var $image = $('#image_' + i + '_' + j);
          $image.css('visibility', 'hidden');
          //var $container = $('#work_'+i+'_'+j);
          //$container.removeClass("preloaderclass"); 
        }
      }
    }
  };

  function load_image() {

    var j = 1;

    sort_image_visibility();

    for (j = 1; j <= total_image; j++) {

      var load_flag = window['load_flags_' + current_section][j];



      if (load_flag == 0) {



        var $image = $('#image_' + current_section + '_' + j);

        $image.data('i', current_section);
        $image.data('j', j);

        var $container = $('#work_' + current_section + '_' + j);
        $container.addClass("preloaderclass");

        var image_url = 'images/work/work_' + current_section + '_' + j + '.jpg';
        $image.attr('src', image_url);

        $image.load(function() {

          var data_i = $(this).data('i');
          var data_j = $(this).data('j');

          window['load_flags_' + data_i][data_j] = 1;
          var load_flag = window['load_flags_' + current_section][data_j];

          var $container = $('#work_' + data_i + '_' + data_j);
          $container.removeClass("preloaderclass");

          if (data_i == current_section && data_j == current_image) {



            $(this).css('visibility', 'visible');
            $(this).hide();
            $(this).delay(200).fadeIn(600, function() {
              // AFTER FADE IN
            });



          }
        });
      }
    }
  };


  //var $container = $('#work_1_1');
  //$("#work_1_1").removeClass("imgcontainer");
  //$("#work_1_1").addClass("preloaderclass");


  update_image_position();
  load_image();

});

$(window).resize(function() {





  var top_target = '#work' + current_section;
  var $main = $('#main');
  $main.scrollTo(top_target);

  var i = 0;
  for (i = 0; i <= 15; i++) {
    var $container = $('#work' + i);
    var left_target = '#workcontent1';
    $container.scrollTo(left_target);
  }


  var left_target = '#workcontent' + current_image;
  var $work_container = $('#work' + current_section);
  $work_container.scrollTo(left_target);






  // Get Window Size

  var myWidth = 0,
    myHeight = 0;

  myWidth = $(window).width();
  myHeight = $(window).height();

  if (myHeight >= 900) {
    image_height = 900;
    image_width = 1350;
  } else {
    image_height = myHeight;
    image_width = image_height * 1.5;
  }

  // Set Image Offset

  var $imgcont = $('.imgcontainer');

  $imgcont.css('width', +image_width);
  $imgcont.css('margin-top', +image_height / -2 + "px");
  $imgcont.css('margin-left', +image_width / -2 + "px");

});

var current_section = 0;
var total_section = 15;

var transition_flag = 0;

var current_image = 1;
	
var total_image = 5;

var total_images=new Array();

var index_flag = 0;

total_images[0] = 1;
total_images[1] = 4;
total_images[2] = 6;
total_images[3] = 4;
total_images[4] = 5;
total_images[5] = 6;
total_images[6] = 8;
total_images[7] = 4;
total_images[8] = 6;
total_images[9] = 3;
total_images[10] = 5;
total_images[11] = 5;
total_images[12] = 4;
total_images[13] = 3;
total_images[14] = 12;
total_images[15] = 1;

var load_flags=new Array();
var i = 1;
for(i=1; i<=15; i++){
  load_flags[i]=0;       
}

var load_flags_0=new Array();
var load_flags_1=new Array();
var load_flags_2=new Array();
var load_flags_3=new Array();
var load_flags_4=new Array();
var load_flags_5=new Array();
var load_flags_6=new Array();
var load_flags_7=new Array();
var load_flags_8=new Array();
var load_flags_9=new Array();
var load_flags_10=new Array();
var load_flags_11=new Array();
var load_flags_12=new Array();
var load_flags_13=new Array();
var load_flags_14=new Array();
var load_flags_15=new Array();

var i = 1;
for(i=1; i<=12; i++){
  load_flags_0[i]=0;
  load_flags_1[i]=0;
  load_flags_2[i]=0;
  load_flags_3[i]=0;
  load_flags_4[i]=0;
  load_flags_5[i]=0;
  load_flags_6[i]=0;
  load_flags_7[i]=0;
  load_flags_8[i]=0;
  load_flags_9[i]=0;
  load_flags_10[i]=0;
  load_flags_11[i]=0; 
  load_flags_12[i]=0; 
  load_flags_13[i]=0; 
  load_flags_14[i]=0; 
  load_flags_15[i]=0;    
}
    
$(document).ready(function()
{

  //alert('DOCUMENT READY');
  
  //Cache DOM Objects
  
  var $main = $('#main');
  var $details_container = $('#details_container');
	
  
  

  if(window.location.hash) {
    var hash = window.location.hash.substring(5); //Puts hash in variable, and removes the # character
    
    var hash_int = parseInt(hash);
    
    if(isNaN(hash_int)){
      var $main = $('#main');
      $main.scrollTo('#work0');
      var $arrow_left_start = $('#arrow_left');
      var $arrow_right_start = $('#arrow_right');
      $arrow_left_start.css('visibility', 'hidden');
      $arrow_right_start.css('visibility', 'hidden');
    }
    
    else{
    
      current_section = hash_int;
      total_image = total_images[current_section];
      var details_target = '#details_'+current_section;
      $details_container.scrollTo(details_target);
      load_once = 1;
      var $arrow_left_start = $('#arrow_left');
      var $arrow_right_start = $('#arrow_right');
      
      var index_flag = 1;
      
      $arrow_right_start.css('visibility', 'visible');
      //$arrow_right_start.hide();
      //$arrow_right_start.fadeIn(600);
      
      $arrow_left_start.css('visibility', 'visible');
      //$arrow_left_start.hide();
      //$arrow_left_start.fadeIn(600);
    
    }
    
  } else {
      
      
      var $main = $('#main');
      $main.scrollTo('#work0');
      var $arrow_left_start = $('#arrow_left');
      var $arrow_right_start = $('#arrow_right');
      $arrow_left_start.css('visibility', 'hidden');
      $arrow_right_start.css('visibility', 'hidden');
  }
  
  //update_text();


  //Reset page scrolling on Load
  //$.scrollTo( 0 );

  // Update Text
  // document.getElementById('work_text').innerHTML = 'Init';

  // Get Window Size

  var myWidth = 0, myHeight = 0;
		
  myWidth = $(window).width();
	myHeight = $(window).height();
		
	if(myHeight >= 900){
		image_height = 900;
		image_width = 1350;
	}
	else{
		image_height = myHeight;
		image_width = image_height * 1.5;
	}
	
	// Mouse Wheel


$('#main').bind('mousewheel', function(event, delta) {
    if(delta < 0){
      scroll_down();
      }
      else{
      scroll_up();
      }
});




	
		
  // Set Image Offset

	var $imgcont = $('.imgcontainer');
	
	$imgcont.css('width', +image_width);
  $imgcont.css('margin-top', +image_height / -2 + "px");
	$imgcont.css('margin-left', +image_width / -2 + "px");

  // Nav Functions
		
  // Easing: Ease In Out Quart
  
  $.easing.easeInOutQuart = function (x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
  };
  
  $(document).keydown(function(e){
    if (e.keyCode == 37) { 
       scroll_left();
       return false;
    }
  });
  
  $(document).keydown(function(e){
    if (e.keyCode == 38) { 
       scroll_up();
       return false;
    }
  });
  
  $(document).keydown(function(e){
    if (e.keyCode == 39) { 
       scroll_right();
       return false;
    }
  });
  
  $(document).keydown(function(e){
    if (e.keyCode == 40) { 
       scroll_down();
       return false;
    }
  });

		

  //Scroll Up Function
  
  function scroll_up() {
  
  if(transition_flag == 0){
    
    if(current_section == 0){
       transition_flag = 1;
       bounce_up();
    }
		else{
		
      transition_flag = 1;
      current_section = current_section - 1;
      
      //update_text();
      
      var load_flag = window['load_flags_'+current_section];
			
      if(load_flag[1] == 1){
      
        var $image = $('#image_'+current_section+'_1');
        $image.css('visibility', 'visible');
      
      }
			
			current_image = 1;
      total_image = total_images[current_section];
			
			target = '#work'+current_section;
			
			$main.scrollTo( target, 600, {
					
				onAfter:function(){
				
         
          window.location.hash = target;
          
          if(current_section == 0){
            index_flag = 0;
            $arrow_right_start.fadeOut(200);
            $arrow_left_start.fadeOut(200);
           }
            
          update_image_position();
          load_image();
          transition_flag = 0;
          update_text();
         
				},
				easing:'easeInOutQuart'

			});
    }
  }
  };
  
  function bounce_up(){
    
    target = '#top_end';
				
    $main.scrollTo( target, 300, {
      onAfter:function(){
        bounce_up_back();
      },
      easing:'easeInOutQuart'

    });
  }
  
  function bounce_up_back(){
    
    target = '#work0';
		
		$main.scrollTo( target, 400, {
        onAfter:function(){
         transition_flag = 0;
				},
        easing:'easeInOutQuart'

      });
  }
  
  //Scroll Down Function
  
  function scroll_down() {
  
  if(transition_flag == 0){
  
  if(index_flag != 1)
  {
		
		index_flag = 1;
		$arrow_right_start.css('visibility', 'visible');
    $arrow_right_start.hide();
    $arrow_right_start.delay(600).fadeIn(600);
    
    $arrow_left_start.css('visibility', 'visible');
    $arrow_left_start.hide();
    $arrow_left_start.delay(600).fadeIn(600);
    
  }
    
    if(current_section == total_section){
    
        transition_flag = 1;
        bounce_down();
		}
		else{
		
      transition_flag = 1;
			current_section = current_section + 1;
			
			//update_text();
			
			var load_flag = window['load_flags_'+current_section];
			
      if(load_flag[1] == 1){
      
        var $image = $('#image_'+current_section+'_1');
        $image.css('visibility', 'visible');
      
      }
			
			current_image = 1;
      total_image = total_images[current_section];
      
			
			target = '#work'+current_section;
      
      $main.scrollTo( target, 600, {
        onAfter:function(){
						window.location.hash = target;
						update_image_position();
						load_image();
						transition_flag = 0;
						update_text();
						
				},
				easing:'easeInOutQuart'

			});
		}
	}
  };
  
  function bounce_down(){
    
    target = '#bottom_end_marker';
				
      $main.scrollTo( target, 300, {
        onAfter:function(){
          bounce_down_back();
				},
        easing:'easeInOutQuart'

      });
  }
  
  function bounce_down_back(){
    
    target = '#work15';
		
		$main.scrollTo( target, 400, {
        onAfter:function(){
         transition_flag = 0;
				},
        easing:'easeInOutQuart'

      });
  }
  
  //Scroll Left Function
  
  function scroll_left() {
  
  if(transition_flag == 0){
  
    
    
    if(current_image > 1){
				current_image = current_image - 1;
				
				transition_flag = 1;
				
				//update_text();
				
				var load_flag = window['load_flags_'+current_section];
				
				if(load_flag[current_image]==1){
				
          var $image = $('#image_'+current_section+'_'+current_image);
          $image.css('visibility', 'visible');
        }
			
				target = '#workcontent'+current_image;
				var $container = $('#work'+current_section);
				//$container.scrollTo( target, 600, { easing:'easeInOutQuart' });
				
				$container.scrollTo( target, 750, {
          onAfter:function(){
						//window.location.hash = target;
						sort_image_visibility();
						transition_flag = 0;
						
          },
          easing:'easeInOutQuart'

        });

		}
		else{
       transition_flag = 1;
			bounce_left();
		}
	}
				
  };
  
  function bounce_left(){
    
    target = '#side_end_left';
		var $container = $('#work'+current_section);
				
      $container.scrollTo( target, 300, {
        onAfter:function(){
          bounce_left_back();
				},
        easing:'easeInOutQuart'

      });
  }
  
  function bounce_left_back(){
    
    target = '#workcontent'+current_image;
		
		var $container = $('#work'+current_section);
				
      $container.scrollTo( target, 400, {
        onAfter:function(){
         transition_flag = 0;
				},
        easing:'easeInOutQuart'

      });
  }
  
  //Scroll Right Function
  
  function scroll_right() {
  
  if(transition_flag == 0){
  
    
    
    if(current_image == total_image){
       transition_flag = 1;
			bounce_right();
		}
		else{
		
      transition_flag = 1;
			current_image = current_image + 1;
			
			//update_text();
			
			var load_flag = window['load_flags_'+current_section];
				
				if(load_flag[current_image]==1){
				
          var $image = $('#image_'+current_section+'_'+current_image);
          $image.css('visibility', 'visible');
      }
        
			target = '#workcontent'+current_image;
			var $container = $('#work'+current_section);
			
			$container.scrollTo( target, 750, {
         onAfter:function(){
					sort_image_visibility();
					 transition_flag = 0;
						
         },
         easing:'easeInOutQuart'

      });

		}
	}
  };
  
  function bounce_right(){
    
    target = '#side_end_marker_'+current_section;
    //target = '95%';
		var $container = $('#work'+current_section);
				
      $container.scrollTo( target, 300, {
        onAfter:function(){
          bounce_right_back();
				},
        easing:'easeInOutQuart'

      });
  }
  
  function bounce_right_back(){
    
    target = '#workcontent'+current_image;
		
		var $container = $('#work'+current_section);
				
      $container.scrollTo( target, 400, {
        onAfter:function(){
         transition_flag = 0;
				},
        easing:'easeInOutQuart'

      });
  }
  
  
  // Arrow Clicks

  $('#arrow_up').click(function(event){
    scroll_up();
	});
		
	$('#arrow_down').click(function(event){
    scroll_down();
  });
  
  $('#image_0_1').click(function(event){
    scroll_down();
  });
  
   $('#image_15_1').click(function(event){
    parent.location='mailto:paul@socketstudios.com';
  });
  
  
  
  
  $('#arrow_left').click(function(event){
    scroll_left();
  });
  
  $('#arrow_right').click(function(event){
    scroll_right();
  });

  $('#btn_details').click(function(event){
     var $close_button = $('#btn_close');
     var $details_button = $('#btn_details');
     $close_button.css('visibility', 'visible');
    
     $details_button.css('visibility', 'hidden');
     
		
     $("#details").fadeIn(200);
      var $details_container = $('#details_container');
     var details_target = '#details_'+current_section;
     $details_container.scrollTo(details_target);
  }); 

  $('#btn_close').click(function(event){
     var $close_button = $('#btn_close');
     var $details_button = $('#btn_details');
     $close_button.css('visibility', 'hidden');
     $details_button.css('visibility', 'visible');
     $("#details").fadeOut(100);
  }); 
    
    
  function update_text() {
  
    //alert('UPDATE TEXT');
    //var text_string = 'Current Section: '+current_section+' | Current Image: '+current_image+' | Total Image: '+total_image+' | Trans Flag: '+transition_flag+'<br>'+load_flags_1+'<br>'+load_flags_2+'<br>'+load_flags_3+'<br>'+load_flags_4+'<br>'+load_flags_5+'<br>'+load_flags_6+'<br>'+load_flags_7+'<br>'+load_flags_8;
		//document.getElementById('work_text').innerHTML = text_string;
		
		var $details_container = $('#details_container');
		var details_target = '#details_'+current_section;
		$details_container.scrollTo(details_target);
	
	};
	
  
  function update_image_position() {
    
    var i=0;
		for (i=0;i<=15;i++)
		{
      var $container = $('#work'+i);
      var left_target = '#workcontent1';
      $container.scrollTo(left_target);
		}
  };
  
  function sort_image_visibility() {
  
  //alert('SORT IMAGE VIS');
    var i=0;
    var j=1;
    for (i=0; i<=15; i++){
      for (j=1; j<=12; j++){
        if(i==current_section && j==current_image){
          //var $container = $('#image_'+i+'_'+j);
          //$container.css('visibility', 'visible');
          
        }
        else{
          var $image = $('#image_'+i+'_'+j);
          $image.css('visibility', 'hidden');
          //var $container = $('#work_'+i+'_'+j);
          //$container.removeClass("preloaderclass"); 
        }
      }
    }
  };
  
  function load_image() {
  
    var j=1;
      
    sort_image_visibility();
   
    for (j=1; j<=total_image; j++){
      
      var load_flag = window['load_flags_'+current_section][j];
      
      
        
      if(load_flag == 0){
        
        
        
        var $image = $('#image_'+current_section+'_'+j);
         
        $image.data('i', current_section);
        $image.data('j', j);
        
        var $container = $('#work_'+current_section+'_'+j);
        $container.addClass("preloaderclass");
          
        var image_url = 'images/work/work_'+current_section+'_'+j+'.jpg';
        $image.attr('src',image_url);
          
        $image.load(function() {
          
          var data_i = $(this).data('i');
          var data_j = $(this).data('j');
            
          window['load_flags_'+data_i][data_j] = 1;
          var load_flag = window['load_flags_'+current_section][data_j];
            
          var $container = $('#work_'+data_i+'_'+data_j);
          $container.removeClass("preloaderclass");
           
          if(data_i == current_section && data_j == current_image){
           
            
             
            $(this).css('visibility', 'visible');
            $(this).hide();
            $(this).delay(200).fadeIn(600, function() {
              // AFTER FADE IN
            });
            
           
              
          }
        });
      }
    }
  };
  
  
  //var $container = $('#work_1_1');
  //$("#work_1_1").removeClass("imgcontainer");
  //$("#work_1_1").addClass("preloaderclass");

  
  update_image_position();
  load_image();
 
});

$(window).resize(function() {

	
	
  
    
    var top_target = '#work'+current_section;
    var $main = $('#main');
    $main.scrollTo(top_target);
    
    var i=0;
		for (i=0;i<=15;i++)
		{
      var $container = $('#work'+i);
      var left_target = '#workcontent1';
      $container.scrollTo(left_target);
		}
		
		
    var left_target = '#workcontent'+current_image;
    var $work_container = $('#work'+current_section);
    $work_container.scrollTo(left_target);
    
    

	


  // Get Window Size

  var myWidth = 0, myHeight = 0;
		
  myWidth = $(window).width();
	myHeight = $(window).height();
		
	if(myHeight >= 900){
		image_height = 900;
		image_width = 1350;
	}
	else{
		image_height = myHeight;
		image_width = image_height * 1.5;
	}
		
  // Set Image Offset

	var $imgcont = $('.imgcontainer');
	
	$imgcont.css('width', +image_width);
  $imgcont.css('margin-top', +image_height / -2 + "px");
	$imgcont.css('margin-left', +image_width / -2 + "px");

});