// variable to determine which pageNumber is currently been viewed
var currentPageNumber = 0;
// object which holds all the current slide information
var currentSlideNumbers = new Object();
// variable to determine which button has been clicked
var previousButton;
// object to determine the size of window through all browsers
var viewportSize = function() {
var width = 0,
height = 0;
if (typeof(window.innerWidth) === "number") {
//Non-IE
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {
width: width,
height: height
}
}
Object.size = function(object) {
var size = 0,
key;
for (key in object) {
if (object.hasOwnProperty(key)) size++;
}
return size;
};
jQuery.fn.initNavigation = function() {
setCurrentState($(this).children().children().first(), "0px");
$(this).each(function() {
$("div a", this).click(function(evt) {
evt.stopImmediatePropagation();
switch ($(this).attr("id")) {
case "main-about":
navigateToAbout();
break;
case "main-portfolio":
navigateToPortfolio();
break;
case "main-cv":
break;
}
});
});
// ENABLE CLICK EVENT TO LOGO
$("#logo").click(function(evt) {
evt.stopImmediatePropagation();
navigateToAbout();
});
// ENABLE CLICK EVENT TO PORTFOLIO BLOCK
$("#portfolio-block a").click(function(evt) {
evt.stopImmediatePropagation();
navigateToPortfolio();
});
};
function navigateToAbout() {
setCurrentState($("#main-about"), "0px", "0px");
setCurrentPageById($("#pages").children().eq(0).attr("id"));
setPageIndicator();
displayPageControls(false);
displaySlideControls(false);
}
function navigateToPortfolio() {
setCurrentState($("#main-portfolio"), "116px", -1 * viewportSize().height);
setCurrentPageById($("#pages").children().eq(1).attr("id"));
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
displayPageControls(true);
displaySlideControls(true);
setPageControls(false);
}
function setCurrentState(button, indicator, canvas) {
if ($(previousButton).attr("id") !== $(button).attr("id")) {
// SET BUTTON PROPERTIES
$(button).addClass("active");
$(previousButton).removeClass("active");
previousButton = button;
// ANIMATE INDICATOR
$(".navigation-indicator").animate({
left: indicator
}, "fast");
// ANIMATE CANVAS
$("#pages").animate({
top: canvas
}, "fast");
}
}
function setCurrentPageById(page) {
currentPageNumber = $("#" + page).index();
}
function setCurrentPageByIndex(index) {
currentPageNumber = index;
}
$(document).ready(function() {
$("#navigation").initNavigation();
});
jQuery.fn.initPages = function() {
populatePageControls();
initPageControlsEvents();
setPageControls(false);
function populatePageControls() {
var ids = new Array();
var titles = new Array();
$("#pages").children().each(function() {
ids.push($(this).attr("id"));
titles.push($(this).attr("data-title"));
});
// EXTRA ABOUT BUTTON
ids.push("about");
titles.push("About");
// POPULATE THE LEFT SIDE OF THE PAGE-CONTROLS
var forward = 0;
while (forward < ids.length) {
$("#page-controls div div.caption").eq(0).append("<a href='#' id='" + ids[forward] + "'><p>" + titles[forward] + " </p></a>");
forward++;
}
// POPULATE THE RIGHT SIDE OF THE PAGE-CONTROLS
var backward = ids.length - 1;
while (backward >= 0) {
$("#page-controls div div.caption").eq(1).append("<a href='#' id='" + ids[backward] + "'><p> " + titles[backward] + "</p></a>");
backward--;
}
}
function initPageControlsEvents() {
$("#page-controls div div.caption").each(function() {
$("a", this).click(function(evt) {
evt.stopImmediatePropagation();
if ($(this).attr("id") === "about") {
setCurrentState($("#navigation #about"), "0px", "0px");
displayPageControls(false);
displaySlideControls(false);
} else {
setCurrentPageById($(this).attr("id"));
setPageControls(true);
displayPage();
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
}
}
function navigateToPageByIndex(index) {
// if( index !== 0 && index !== $( "#pages" ).children().size()) {
setCurrentPageByIndex(index);
displayPage();
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
// } else {
// console.log( "Yahoo" );
// }
}
function displayPageControls(display) {
var offset = (display) ? "0px" : "-65px";
$("#page-controls-container").animate({
bottom: offset
}, "fast");
}
function displayPage() {
// ANIMATE CANVAS
$("#pages").animate({
top: -1 * (currentPageNumber * viewportSize().height)
}, "fast", function() {
resetAllPageSlides();
});
}
function setPageControls(animate) {
var maxIndex = $("#pages").children().size();
var prevIndex = (currentPageNumber === 0) ? maxIndex : currentPageNumber - 1;
var nextIndex = (currentPageNumber === maxIndex) ? 0 : currentPageNumber + 1;
var offset = -1 * (66 * (maxIndex));
if (animate) {
$("#page-controls div div.caption").eq(0).animate({
top: -1 * (prevIndex * 66)
}, "fast");
$("#page-controls div div.caption").eq(1).animate({
top: offset + (nextIndex * 66)
}, "fast");
} else {
$("#page-controls div div.caption").eq(0).css({
top: -1 * (prevIndex * 66)
}, "fast");
$("#page-controls div div.caption").eq(1).css({
top: offset + (nextIndex * 66)
}, "fast");
}
}
function setPageIndicator() {
var factor = 57 / $("#pages").children().size();
var offset = Math.round(factor * (currentPageNumber - 1));
$(".page-elevator").animate({
"margin-top": offset
}, 50);
}
$(document).ready(function() {
$("#pages").initPages();
});
jQuery.fn.initSlides = function() {
setCurrentSlideData();
initSlideControlsEvents();
function setCurrentSlideData() {
var index = 0;
$("#pages").children().each(function() {
currentSlideNumbers[index] = {
slide: 0,
amount: $(this).children().size()
};
index++;
});
}
function initSlideControlsEvents() {
var side;
$("#slide-controls-container").each(function() {
$("div", this).mouseenter(
// MOUSE-OVER
function(evt) {
side = $(this).attr("id");
$(".slide-arrow-background", this).animate({
opacity: 0
}, 50);
switch (side) {
case "left":
displayLeftIndicator($(".slide-indicator", this), true);
break;
case "right":
displayRightIndicator($(".slide-indicator", this), true);
break;
}
}).mouseleave(
// MOUSE-OUT
function(evt) {
side = $(this).attr("id");
$(".slide-arrow-background", this).animate({
opacity: 100
}, 50);
switch (side) {
case "left":
displayLeftIndicator($(".slide-indicator", this), false);
break;
case "right":
displayRightIndicator($(".slide-indicator", this), false);
break;
}
});
$(".slide-arrow", this).click(
// CLICK
function(evt) {
switch (side) {
case "left":
slidePageToIndex(currentSlideNumbers[currentPageNumber].slide - 1);
break;
case "right":
slidePageToIndex(currentSlideNumbers[currentPageNumber].slide + 1);
break;
}
setSlideIndicators();
initSlideIndicatorsEvents();
});
});
}
function displayLeftIndicator(indicator, display) {
if (display) {
$(indicator).css({
left: -40
});
$(indicator).animate({
left: 0
}, 50);
} else {
$(indicator).animate({
left: -186
}, 50);
}
}
function displayRightIndicator(indicator, display) {
if (display) {
$(indicator).css({
right: -40
});
$(indicator).animate({
right: 0
}, 50);
} else {
$(indicator).animate({
right: -186
}, 50);
}
}
}
function setSlideIndicators() {
var index = currentSlideNumbers[currentPageNumber].slide;
var amount = currentSlideNumbers[currentPageNumber].amount;
var count = 0;
var buttons = "";
while (count < amount) {
if (count === index) {
buttons += ("<a href='#' class='indicator-button active-indicator-button'></a>");
} else {
buttons += ("<a href='#' class='indicator-button'></a>");
}
count++;
}
// POPULATE BUTTONS ON LEFT INDICATOR
$("#left div.slide-indicator div.indicator-container").css({
right: "30px"
});
$("#left div.slide-indicator div.indicator-container").html(buttons);
// POPULATE BUTTONS ON RIGHT INDICATOR
$("#right div.slide-indicator div.indicator-container").css({
left: "30px"
});
$("#right div.slide-indicator div.indicator-container").html(buttons);
}
function displaySlideControls(display) {
var offset = (display) ? "0px" : "-60px";
$("#slide-controls-container").children().eq(0).animate({
left: offset
}, "fast");
$("#slide-controls-container").children().eq(1).animate({
right: offset
}, "fast");
}
function initSlideIndicatorsEvents() {
var index = currentSlideNumbers[currentPageNumber].slide;
// INITIALIZE CLICK BEHAVIOUR ON LEFT SIDE
$("#left div.slide-indicator div.indicator-container").each(function() {
$("a", this).click(function(evt) {
evt.stopImmediatePropagation();
if (index !== $(this).index()) {
slidePageToIndex($(this).index());
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
// INITIALIZE CLICK BEHAVIOUR ON RIGHT SIDE
$("#right div.slide-indicator div.indicator-container").each(function() {
$("a", this).click(function(evt) {
evt.stopImmediatePropagation();
if (index !== $(this).index()) {
slidePageToIndex($(this).index());
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
}
function slidePageToIndex(index) {
// GET MAX INDEX OF CURRENT SLIDE NUMBER OBJECT
var maxIndex = currentSlideNumbers[currentPageNumber].amount;
// CURRENT PAGE WHICH IS BEING VIEWED
var currentPage = $("#pages").children().eq(currentPageNumber);
if (index >= 0 && index <= maxIndex - 1) {
$(currentPage).animate({
left: -1 * (index * viewportSize().width)
}, "fast");
currentSlideNumbers[currentPageNumber] = {
slide: index,
amount: maxIndex
};
} else {
// TOTAL AMOUNT OF PAGES
var amountPages = $("#pages").children().size();
// LEFT CLICKS
if (index < 0) {
if (currentPageNumber <= 1) {
navigateToPageByIndex(amountPages - 1);
} else {
navigateToPageByIndex(currentPageNumber - 1);
}
}
// RIGHT CLICKS
if (index > maxIndex - 1) {
if (currentPageNumber >= amountPages - 1) {
navigateToPageByIndex(1);
} else {
navigateToPageByIndex(currentPageNumber + 1);
}
}
setPageControls(true);
}
}
function resetAllPageSlides() {
$("#pages").children().each(function() {
if ($(this).index() !== currentPageNumber) {
// RESET CURRENT INDEX OF SLIDE
var maxIndex = currentSlideNumbers[$(this).index()].amount;
currentSlideNumbers[$(this).index()] = {
slide: 0,
amount: maxIndex
};
// RESET PAGE POSITION
$(this).css({
left: "0px"
});
}
});
}
$(document).ready(function() {
$("#pages").initSlides();
});
jQuery.fn.initAbout = function() {
// CONSTRUCT WEBSITE ASSETS AND ABOUT PAGE
$("#header-container").css({
top: "-100px"
});
$("#about .slide .slide-background").hide();
$("#about .slide .slide-content").css({
"margin-top": "-700px"
});
var total = $("#about img").size();
var amount = 0;
$("#about img").each(function() {
$(this).load(function() {
amount += 1;
if (amount === total) {
$("#about .slide .slide-background").fadeIn("slow", "linear", function() {
$("#header-container").delay(300).animate({
"top": "0px"
}, 400, function() {
$("#about .slide .slide-content").css({
"margin-top": "-186px"
});
$("#about .slide .slide-content").animate({
"margin-top": "93px"
}, 200);
});
});
}
});
});
}
$(document).ready(function() {
$("#pages").initAbout();
});
jQuery.fn.initCanvas = function() {
$(window).resize(function() {
resizeCanvas();
repositionCanvas();
}).trigger("resize");
function resizeCanvas() {
// resize slides within canvas
$("#pages").children().each(function() {
// RESZIZE THE WIDTH OF EACH PAGE
resizeDiv($(this), $(this).children().size());
// RESIZE EACH SLIDE
resizeDiv($(".slide", this), 1);
// RESIZE THE BACKGROUND OF EACH SLIDE
resizeDiv($(".slide-background", this), 1);
// REPOSITION THE CONTENT OF EACH SLIDE
repositionDiv($(".slide-content", this));
$(this).children().each(function() {
// DETERMINE WHETHER THE IMAGE IN THE BACKGROUND SHOULD BE STRETCHED OR CENTERED
switch ($(".slide-background", this).attr("data-display")) {
// RESIZE IMAGE WITHIN THE BACKGROUND OF EACH SLIDE
case "stretched":
resizeImage($(".slide-background img", this));
break;
case "top":
repositionImage($(".slide-background img", this));
break;
}
});
});
// REPOSITION VIDEOS IN SLIDES
$("#pages .slide-video").children().each(function() {
repositionVideo($(this));
});
}
function resizeDiv(div, amount) {
$(div).css({
width: viewportSize().width * amount,
height: viewportSize().height
});
}
function repositionDiv(div) {
var offset = Math.round((viewportSize().width / 2) - (940 / 2));
$(div).css({
left: offset
});
}
function resizeImage(image) {
var imageRatio = $(image).width() / $(image).height();
var screenRatio = viewportSize().width / viewportSize().height;
var newWidth = 0;
var newHeight = 0;
var newLeft = 0;
var newTop = 0;
if (screenRatio < imageRatio) {
newWidth = Math.round(($(image).width() / $(image).height()) * viewportSize().height);
newHeight = viewportSize().height;
} else {
newWidth = viewportSize().width;
newHeight = Math.round(($(image).height() / $(image).width()) * viewportSize().width);
}
newLeft = Math.round((viewportSize().width / 2) - (newWidth / 2));
newTop = Math.round((viewportSize().height / 2) - (newHeight / 2));
$(image).css({
width: newWidth,
height: newHeight,
position: "relative",
left: newLeft,
top: newTop
});
}
function repositionImage(image) {
var newLeft = 0;
var newTop = 0;
newLeft = Math.round((viewportSize().width / 2) - ($(image).width() / 2));
newTop = 0;
$(image).css({
position: "relative",
left: newLeft,
top: newTop
});
}
function repositionVideo(video) {
var newLeft = 0;
var newTop = 0;
newLeft = Math.round((viewportSize().width / 2) - ($(video).width() / 2));
newTop = Math.round(45 + (viewportSize().height / 2) - ($(video).height() / 2));;
$(video).css({
position: "absolute",
left: newLeft,
top: newTop
});
}
function repositionCanvas() {
// REPOSITION PAGES VERTICALLY
$("#pages").css({
top: -1 * (currentPageNumber * viewportSize().height)
});
// REPOSITION PAGES AND SLIDES HORIZONTALLY
var index = 0;
while (index < $("#pages").children().size()) {
var page = $("#pages").children().eq(index);
var currentSlideNumber = currentSlideNumbers[index].slide;
$(page).css({
left: -1 * (currentSlideNumber * viewportSize().width)
});
index++;
}
}
}
$(document).ready(function() {
$("body").initCanvas();
});
// variable to determine which pageNumber is currently been viewed
var currentPageNumber = 0;
// object which holds all the current slide information
var currentSlideNumbers = new Object();
// variable to determine which button has been clicked
var previousButton;
// object to determine the size of window through all browsers
var viewportSize = function() {
var width = 0, height = 0;
if( typeof( window.innerWidth ) === "number" ) {
//Non-IE
width = window.innerWidth;
height = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {
width: width,
height: height
}
}
Object.size = function( object ) {
var size = 0, key;
for( key in object ) {
if( object.hasOwnProperty( key )) size++;
}
return size;
};
jQuery.fn.initNavigation = function() {
setCurrentState( $( this ).children().children().first(), "0px" );
$( this ).each( function(){
$( "div a", this ).click( function( evt ) {
evt.stopImmediatePropagation();
switch( $( this ).attr( "id" )) {
case "main-about": navigateToAbout(); break;
case "main-portfolio": navigateToPortfolio(); break;
case "main-cv": break;
}
});
});
// ENABLE CLICK EVENT TO LOGO
$( "#logo" ).click( function( evt ) {
evt.stopImmediatePropagation();
navigateToAbout();
});
// ENABLE CLICK EVENT TO PORTFOLIO BLOCK
$( "#portfolio-block a" ).click( function( evt ) {
evt.stopImmediatePropagation();
navigateToPortfolio();
});
};
function navigateToAbout() {
setCurrentState( $( "#main-about" ), "0px", "0px" );
setCurrentPageById( $( "#pages" ).children().eq( 0 ).attr( "id" ));
setPageIndicator();
displayPageControls( false );
displaySlideControls( false );
}
function navigateToPortfolio() {
setCurrentState( $( "#main-portfolio" ), "116px", -1 * viewportSize().height );
setCurrentPageById( $( "#pages" ).children().eq( 1 ).attr( "id" ));
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
displayPageControls( true );
displaySlideControls( true );
setPageControls( false );
}
function setCurrentState( button, indicator, canvas ) {
if( $( previousButton ).attr( "id" ) !== $( button ).attr( "id" ) ) {
// SET BUTTON PROPERTIES
$( button ).addClass( "active" );
$( previousButton ).removeClass( "active" );
previousButton = button;
// ANIMATE INDICATOR
$( ".navigation-indicator" ).animate({ left: indicator }, "fast" );
// ANIMATE CANVAS
$( "#pages" ).animate({ top: canvas }, "fast" );
}
}
function setCurrentPageById( page ) {
currentPageNumber = $( "#" + page ).index();
}
function setCurrentPageByIndex( index ) {
currentPageNumber = index;
}
$( document ).ready( function(){ $( "#navigation" ).initNavigation(); });
jQuery.fn.initPages = function() {
populatePageControls();
initPageControlsEvents();
setPageControls( false );
function populatePageControls() {
var ids = new Array();
var titles = new Array();
$( "#pages" ).children().each( function(){
ids.push( $( this ).attr( "id" ));
titles.push( $( this ).attr( "data-title" ));
});
// EXTRA ABOUT BUTTON
ids.push( "about" );
titles.push( "About" );
// POPULATE THE LEFT SIDE OF THE PAGE-CONTROLS
var forward = 0;
while( forward < ids.length ) {
$( "#page-controls div div.caption" ).eq( 0 ).append( "<a href='#' id='" + ids[ forward ] + "'><p>" + titles[ forward ] + " </p></a>" );
forward++;
}
// POPULATE THE RIGHT SIDE OF THE PAGE-CONTROLS
var backward = ids.length - 1;
while( backward >= 0 ) {
$( "#page-controls div div.caption" ).eq( 1 ).append( "<a href='#' id='" + ids[ backward ] + "'><p> " + titles[ backward ] + "</p></a>" );
backward--;
}
}
function initPageControlsEvents() {
$( "#page-controls div div.caption" ).each( function(){
$( "a", this ).click( function( evt ) {
evt.stopImmediatePropagation();
if( $( this ).attr( "id" ) === "about" ) {
setCurrentState( $( "#navigation #about" ), "0px", "0px" );
displayPageControls( false );
displaySlideControls( false );
} else {
setCurrentPageById( $( this ).attr( "id" ));
setPageControls( true );
displayPage();
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
}
}
function navigateToPageByIndex( index ) {
// if( index !== 0 && index !== $( "#pages" ).children().size()) {
setCurrentPageByIndex( index );
displayPage();
setPageIndicator();
setSlideIndicators();
initSlideIndicatorsEvents();
// } else {
// console.log( "Yahoo" );
// }
}
function displayPageControls( display ) {
var offset = ( display ) ? "0px" : "-65px";
$( "#page-controls-container" ).animate({ bottom: offset }, "fast" );
}
function displayPage() {
// ANIMATE CANVAS
$( "#pages" ).animate({ top: -1 * ( currentPageNumber * viewportSize().height )}, "fast", function() {
resetAllPageSlides();
});
}
function setPageControls( animate ) {
var maxIndex = $( "#pages" ).children().size();
var prevIndex = ( currentPageNumber === 0 ) ? maxIndex : currentPageNumber - 1;
var nextIndex = ( currentPageNumber === maxIndex ) ? 0 : currentPageNumber + 1;
var offset = -1 * ( 66 * ( maxIndex ));
if( animate ) {
$( "#page-controls div div.caption" ).eq( 0 ).animate({ top: -1 * ( prevIndex * 66 )}, "fast" );
$( "#page-controls div div.caption" ).eq( 1 ).animate({ top: offset + ( nextIndex * 66 )}, "fast" );
} else {
$( "#page-controls div div.caption" ).eq( 0 ).css({ top: -1 * ( prevIndex * 66 )}, "fast" );
$( "#page-controls div div.caption" ).eq( 1 ).css({ top: offset + ( nextIndex * 66 )}, "fast" );
}
}
function setPageIndicator() {
var factor = 57 / $( "#pages" ).children().size();
var offset = Math.round( factor * ( currentPageNumber - 1 ));
$( ".page-elevator" ).animate({ "margin-top": offset }, 50 );
}
$( document ).ready( function(){ $( "#pages" ).initPages(); });
jQuery.fn.initSlides = function() {
setCurrentSlideData();
initSlideControlsEvents();
function setCurrentSlideData() {
var index = 0;
$( "#pages" ).children().each( function(){
currentSlideNumbers[ index ] = { slide: 0, amount: $( this ).children().size() };
index++;
});
}
function initSlideControlsEvents() {
var side;
$( "#slide-controls-container" ).each( function(){
$( "div", this ).mouseenter(
// MOUSE-OVER
function( evt ) {
side = $( this ).attr( "id" );
$( ".slide-arrow-background", this ).animate({ opacity: 0 }, 50 );
switch( side ) {
case "left": displayLeftIndicator( $( ".slide-indicator", this ), true ); break;
case "right": displayRightIndicator( $( ".slide-indicator", this ), true ); break;
}
}).mouseleave(
// MOUSE-OUT
function( evt ) {
side = $( this ).attr( "id" );
$( ".slide-arrow-background", this ).animate({ opacity: 100 }, 50 );
switch( side ) {
case "left": displayLeftIndicator( $( ".slide-indicator", this ), false ); break;
case "right": displayRightIndicator( $( ".slide-indicator", this ), false ); break;
}
}
);
$( ".slide-arrow", this ).click(
// CLICK
function( evt ) {
switch( side ) {
case "left": slidePageToIndex( currentSlideNumbers[ currentPageNumber ].slide - 1 ); break;
case "right": slidePageToIndex( currentSlideNumbers[ currentPageNumber ].slide + 1 ); break;
}
setSlideIndicators();
initSlideIndicatorsEvents();
}
);
});
}
function displayLeftIndicator( indicator, display ) {
if( display ) {
$( indicator ).css({ left: -40 });
$( indicator ).animate({ left: 0 }, 50 );
} else {
$( indicator ).animate({ left: -186 }, 50 );
}
}
function displayRightIndicator( indicator, display ) {
if( display ) {
$( indicator ).css({ right: -40 });
$( indicator ).animate({ right: 0 }, 50 );
} else {
$( indicator ).animate({ right: -186 }, 50 );
}
}
}
function setSlideIndicators() {
var index = currentSlideNumbers[ currentPageNumber ].slide;
var amount = currentSlideNumbers[ currentPageNumber ].amount;
var count = 0;
var buttons = "";
while( count < amount ) {
if( count === index ) {
buttons += ( "<a href='#' class='indicator-button active-indicator-button'></a>" );
} else {
buttons += ( "<a href='#' class='indicator-button'></a>" );
}
count++;
}
// POPULATE BUTTONS ON LEFT INDICATOR
$( "#left div.slide-indicator div.indicator-container" ).css({ right: "30px" });
$( "#left div.slide-indicator div.indicator-container" ).html( buttons );
// POPULATE BUTTONS ON RIGHT INDICATOR
$( "#right div.slide-indicator div.indicator-container" ).css({ left: "30px" });
$( "#right div.slide-indicator div.indicator-container" ).html( buttons );
}
function displaySlideControls( display ) {
var offset = ( display ) ? "0px" : "-60px";
$( "#slide-controls-container" ).children().eq( 0 ).animate({ left: offset }, "fast" );
$( "#slide-controls-container" ).children().eq( 1 ).animate({ right: offset }, "fast" );
}
function initSlideIndicatorsEvents() {
var index = currentSlideNumbers[ currentPageNumber ].slide;
// INITIALIZE CLICK BEHAVIOUR ON LEFT SIDE
$( "#left div.slide-indicator div.indicator-container" ).each( function(){
$( "a", this ).click( function( evt ) {
evt.stopImmediatePropagation();
if( index !== $( this ).index()) {
slidePageToIndex( $( this ).index() );
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
// INITIALIZE CLICK BEHAVIOUR ON RIGHT SIDE
$( "#right div.slide-indicator div.indicator-container" ).each( function(){
$( "a", this ).click( function( evt ) {
evt.stopImmediatePropagation();
if( index !== $( this ).index()) {
slidePageToIndex( $( this ).index() );
setSlideIndicators();
initSlideIndicatorsEvents();
}
});
});
}
function slidePageToIndex( index ) {
// GET MAX INDEX OF CURRENT SLIDE NUMBER OBJECT
var maxIndex = currentSlideNumbers[ currentPageNumber ].amount;
// CURRENT PAGE WHICH IS BEING VIEWED
var currentPage = $( "#pages" ).children().eq( currentPageNumber );
if( index >= 0 && index <= maxIndex - 1 ) {
$( currentPage ).animate({ left: -1 * ( index * viewportSize().width )}, "fast" );
currentSlideNumbers[ currentPageNumber ] = { slide: index, amount: maxIndex };
} else {
// TOTAL AMOUNT OF PAGES
var amountPages = $( "#pages" ).children().size();
// LEFT CLICKS
if( index < 0 ) {
if( currentPageNumber <= 1 ) {
navigateToPageByIndex( amountPages - 1 );
} else {
navigateToPageByIndex( currentPageNumber - 1 );
}
}
// RIGHT CLICKS
if( index > maxIndex - 1 ) {
if( currentPageNumber >= amountPages - 1 ) {
navigateToPageByIndex( 1 );
} else {
navigateToPageByIndex( currentPageNumber + 1 );
}
}
setPageControls( true );
}
}
function resetAllPageSlides() {
$( "#pages" ).children().each( function() {
if( $( this ).index() !== currentPageNumber ) {
// RESET CURRENT INDEX OF SLIDE
var maxIndex = currentSlideNumbers[ $( this ).index() ].amount;
currentSlideNumbers[ $( this ).index() ] = { slide: 0, amount: maxIndex };
// RESET PAGE POSITION
$( this ).css({ left: "0px" });
}
});
}
$( document ).ready( function(){ $( "#pages" ).initSlides(); });
jQuery.fn.initAbout = function() {
// CONSTRUCT WEBSITE ASSETS AND ABOUT PAGE
$( "#header-container" ).css({ top: "-100px" });
$( "#about .slide .slide-background" ).hide();
$( "#about .slide .slide-content" ).css({ "margin-top": "-700px" });
var total = $( "#about img" ).size();
var amount = 0;
$( "#about img" ).each( function(){
$( this ).load( function() {
amount += 1;
if( amount === total ) {
$( "#about .slide .slide-background" ).fadeIn( "slow", "linear", function() {
$( "#header-container" ).delay( 300 ).animate({ "top": "0px" }, 400, function() {
$( "#about .slide .slide-content" ).css({ "margin-top": "-186px" });
$( "#about .slide .slide-content" ).animate({ "margin-top": "93px" }, 200 );
});
});
}
});
});
}
$( document ).ready( function(){ $( "#pages" ).initAbout(); });
jQuery.fn.initCanvas = function() {
$( window ).resize( function() {
resizeCanvas();
repositionCanvas();
}).trigger( "resize" );
function resizeCanvas() {
// resize slides within canvas
$( "#pages" ).children().each( function() {
// RESZIZE THE WIDTH OF EACH PAGE
resizeDiv( $( this ), $( this ).children().size());
// RESIZE EACH SLIDE
resizeDiv( $( ".slide", this ), 1 );
// RESIZE THE BACKGROUND OF EACH SLIDE
resizeDiv( $( ".slide-background", this ), 1 );
// REPOSITION THE CONTENT OF EACH SLIDE
repositionDiv( $( ".slide-content", this ));
$( this ).children().each( function() {
// DETERMINE WHETHER THE IMAGE IN THE BACKGROUND SHOULD BE STRETCHED OR CENTERED
switch( $( ".slide-background", this ).attr( "data-display" ) ) {
// RESIZE IMAGE WITHIN THE BACKGROUND OF EACH SLIDE
case "stretched": resizeImage( $( ".slide-background img", this )); break;
case "top": repositionImage( $( ".slide-background img", this )); break;
}
});
});
// REPOSITION VIDEOS IN SLIDES
$( "#pages .slide-video" ).children().each( function() {
repositionVideo( $( this ));
});
}
function resizeDiv( div, amount ) {
$( div ).css({ width: viewportSize().width * amount, height: viewportSize().height });
}
function repositionDiv( div ) {
var offset = Math.round(( viewportSize().width / 2 ) - ( 940 / 2 ));
$( div ).css({ left: offset });
}
function resizeImage( image ) {
var imageRatio = $( image ).width() / $( image ).height();
var screenRatio = viewportSize().width / viewportSize().height;
var newWidth = 0;
var newHeight = 0;
var newLeft = 0;
var newTop = 0;
if( screenRatio < imageRatio ) {
newWidth = Math.round(( $( image ).width() / $( image ).height()) * viewportSize().height );
newHeight = viewportSize().height;
} else {
newWidth = viewportSize().width;
newHeight = Math.round(( $( image ).height() / $( image ).width()) * viewportSize().width );
}
newLeft = Math.round(( viewportSize().width / 2 ) - ( newWidth / 2 ));
newTop = Math.round(( viewportSize().height / 2 ) - ( newHeight / 2 ));
$( image ).css({ width: newWidth, height: newHeight, position: "relative", left: newLeft, top: newTop });
}
function repositionImage( image ) {
var newLeft = 0;
var newTop = 0;
newLeft = Math.round(( viewportSize().width / 2 ) - ( $( image ).width() / 2 ));
newTop = 0;
$( image ).css({ position: "relative", left: newLeft, top: newTop });
}
function repositionVideo( video ) {
var newLeft = 0;
var newTop = 0;
newLeft = Math.round(( viewportSize().width / 2 ) - ( $( video ).width() / 2 ));
newTop = Math.round( 45 + ( viewportSize().height / 2 ) - ( $( video ).height() / 2 ));;
$( video ).css({ position: "absolute", left: newLeft, top: newTop });
}
function repositionCanvas() {
// REPOSITION PAGES VERTICALLY
$( "#pages" ).css({ top: -1 * ( currentPageNumber * viewportSize().height )});
// REPOSITION PAGES AND SLIDES HORIZONTALLY
var index = 0;
while( index < $( "#pages" ).children().size()) {
var page = $( "#pages" ).children().eq( index );
var currentSlideNumber = currentSlideNumbers[ index ].slide;
$( page ).css({ left: -1 * ( currentSlideNumber * viewportSize().width )});
index++;
}
}
}
$( document ).ready( function(){ $( "body" ).initCanvas(); });
