/**
* Various transitions and effects to make the Papell theme look pretty
*/
jQuery.noConflict();
var behind_the_scenes_player = Object;
// I need to know if the user is on an iphone.
var agent = navigator.userAgent.toLowerCase();
var iphone_in_use = navigator.userAgent.match(/like Mac OS X/i);
// Fade the color of all links on hover
jQuery(document).ready(function () {
// Make sure every link except for the current page link fades on
// hover
jQuery("a").not(".current_page_item a").hover(function () {
jQuery(this).stop().animate({
color: 'white'
}, 200);
}, function () {
jQuery(this).stop().animate({
color: "#73694A"
}, 200);
});
jQuery("a").not(".current_page_item a").css({
color: "#73694a"
});
jQuery('#content').hide().fadeIn(500);
/**
* Display the site intro animation. This should be called with the element
* that the intro animation should be injected into.
*/
function site_intro(element) {
if (jQuery(element).length == 0) return;
element = jQuery(element);
// Give the animation enough room
element.css({ "width": "980px" });
// These images will be displayed during the animation
var image1 = jQuery("
");
var image2 = jQuery("
");
var image3 = jQuery("
");
var image4 = jQuery("
");
var collections_image = jQuery(
"" +
"
"
);
var apge_image = jQuery(
"
"
);
var lookbook_image = jQuery(
"
"
);
var hailey_logan_image = jQuery(
"" +
"
"
);
if (iphone_in_use) {
video_option = "";
padding = "62px"
} else {
video_option = "";
}
var video = jQuery(
video_option
);
var linked_images = new Array(
collections_image,
apge_image,
lookbook_image,
hailey_logan_image
);
video.css({
"background": "black",
"display": "none",
"float": "left",
"margin-right": "10px"
});
element.append(video);
if (!iphone_in_use) {
var player = flowplayer(
'intro-video', "http://builds.flowplayer.netdna-cdn.com/67888/34686/flowplayer-3.2.5-0.swf",
{
// player configuration goes here
clip: {
url: 'resources/video/AP_intro.flv',
onBeforeFinish: function () {
// do not finish, but repeat
return false;
},
autoPlay: false
}
}
);
}
// Initial styling for images. Hidden until further notice...
var image_style = {
'display': 'none',
'margin-right': '10px'
};
image1.css(image_style);
image2.css(image_style);
image3.css(image_style);
image4.css(image_style);
collections_image.css(image_style);
lookbook_image.css(image_style);
hailey_logan_image.css(image_style);
apge_image.css(image_style);
collections_image.css({ marginRight: "5px" });
collections_image.css('float', 'left');
apge_image.css('float', 'right');
apge_image.css('margin-right', '15px');
lookbook_image.css('float', 'right');
lookbook_image.css('margin-right', '15px');
lookbook_image.css('margin-top', '5px');
// Adjust these to tweak the animation.
var fade_duration = 1000;
var display_duration = 3000;
var deconflict = 100;
var first_animation_total = display_duration + fade_duration * 2;
var second_animation_total = display_duration + fade_duration * 2;
for (image_index in linked_images) {
linked_images[image_index].hover(
function () {
jQuery(this).stop().animate({ "opacity": "0.7" }, "fast");
},
function () {
jQuery(this).stop().animate({ "opacity": "1" }, "fast");
}
);
}
// Inject all hidden images
element.append(image1);
element.append(image2);
element.append(image3);
element.append(image4);
element.append(linked_images[0]);
element.append(linked_images[1]);
element.append(linked_images[2]);
element.append(linked_images[3]);
// Fade in, display and fade out the first large image
image1.fadeIn(
fade_duration
).delay(
display_duration
).fadeOut(
fade_duration
);
// Wait until the first image is gone, and then fade in, display and
// fade out each of the three small images. Animate opacity for fade
// out (as opposed to using "fadeOut()") because we want each image
// to keep their layout and not reflow while animating.
image2.delay(
first_animation_total + deconflict
).fadeIn(
fade_duration
).delay(
display_duration
).animate(
{ opacity: 0.0 }
);
image3.delay(
first_animation_total + fade_duration * 0.5
).fadeIn(
fade_duration
).delay(
display_duration
).animate(
{ opacity: 0.0 }
);
image4.delay(
first_animation_total + fade_duration
).fadeIn(
fade_duration
).delay(
display_duration
).animate(
{ opacity: 0.0 }
);
setTimeout(
function () {
var style = { "display": "none" };
image2.css(style);
image3.css(style);
image4.css(style);
},
first_animation_total + second_animation_total + (fade_duration / 2)
);
video.delay(
first_animation_total + second_animation_total + fade_duration
).fadeIn(fade_duration);
collections_image.delay(
first_animation_total + second_animation_total + (fade_duration * 1.5)
).fadeIn(fade_duration);
apge_image.delay(
first_animation_total + second_animation_total + (fade_duration * 2)
).fadeIn(fade_duration);
lookbook_image.delay(
first_animation_total + second_animation_total + (fade_duration * 2.5)
).fadeIn(fade_duration);
hailey_logan_image.delay(
first_animation_total + second_animation_total + (fade_duration * 3)
).fadeIn(fade_duration);
// Only continue if the use is not on an i phone.
if (iphone_in_use)
return;
setTimeout(
function () {
player.play();
},
first_animation_total + second_animation_total
);
// TODO: Insert final animation here...
}
function load_behind_the_scenes_player() {
if (jQuery('#behind_the_scenes_player').length == 0) return;
if (iphone_in_use) {
jQuery('#behind_the_scenes_player').html("
");
}
else {
jQuery('#behind_the_scenes_player').html('');
behind_the_scenes_player = flowplayer('behind_the_scenes_player',
{
src: "resources/audio/flowplayer-3.2.5.swf",
wmode: "transparent"
},
{
// player configuration goes here
clip: {
url: 'resources/video/behind-the-scenes-spring-2012.flv',
autoPlay: true
},
plugins: {
"controls": {
"borderRadius": "0px",
"timeColor": "#ffffff",
"slowForward": true,
"bufferGradient": "none",
"backgroundColor": "rgba(39, 29, 17, 1)",
"volumeSliderGradient": "none",
"slowBackward": false,
"timeBorderRadius": 20,
"progressGradient": "none",
"time": false,
"height": 26,
"volumeColor": "#4599ff",
"tooltips": { "marginBottom": 5, "scrubber": true, "volume": true, "buttons": false },
"fastBackward": false,
"opacity": 1,
"timeFontSize": 12,
"border": "0px",
"volumeSliderColor": "#ffffff",
"bufferColor": "rgba(50, 38, 23, 1)",
"buttonColor": "#ffffff",
"mute": false,
"autoHide": { "enabled": true, "hideDelay": 500, "hideStyle": "fade", "mouseOutDelay": 500, "hideDuration": 400, "fullscreenOnly": true },
"backgroundGradient": "none",
"width": "100pct",
"sliderBorder": "1px solid rgba(128, 128, 128, 0.7)",
"display": "block",
"buttonOverColor": "#ffffff",
"fullscreen": true,
"timeBgColor": "rgb(0, 0, 0, 0)",
"scrubberBarHeightRatio": 0.2,
"bottom": 0,
"stop": false,
"zIndex": 1,
"sliderColor": "rgba(50, 38, 23, 1)",
"borderColor": "rgba(50, 38, 23, 1)",
"scrubberHeightRatio": 0.6,
"tooltipTextColor": "#ffffff",
"spacing": { "time": 6, "volume": 8, "all": 2 },
"sliderGradient": "none",
"timeBgHeightRatio": 0.8,
"volumeSliderHeightRatio": 0.6,
"timeSeparator": " ", "name": "controls",
"volumeBarHeightRatio": 0.2,
"left": "50pct",
"tooltipColor": "rgba(50, 38, 23, 0)",
"playlist": false,
"durationColor": "#b8d9ff",
"play": true,
"fastForward": true,
"progressColor": "rgba(50, 38, 23, 1)",
"timeBorder": "0px solid rgba(0, 0, 0, 0.3)",
"scrubber": true,
"volume": false,
"builtIn": false,
"volumeBorder": "1px solid rgba(128, 128, 128, 0.7)",
"margins": [2, 6, 2, 12]
}
}
}
);
}
}
load_behind_the_scenes_player();
site_intro("#site-intro");
});
function play_fall_clip() {
behind_the_scenes_player.play('resources/video/behind-the-scenes-fall-2011.flv');
}
function play_spring_clip() {
behind_the_scenes_player.play('resources/video/behind-the-scenes-spring-2012.flv');
}
