/* JS Document */
/************************************************************************
*
* S I T E W I D E J A V A S C R I P T S
*
* Author: Daniel Stondin
* Date: 1 February 2011
* Web: http://creativemint.com
* Version: 1.0
*
*************************************************************************/
/*-----------------------------------------------------------------------
DOM Ready
------------------------------------------------------------------------*/
$(function() {
});
/*-----------------------------------------------------------------------
Global Variables
------------------------------------------------------------------------*/
var _listId;
/*-----------------------------------------------------------------------
Init
------------------------------------------------------------------------*/
function preload_highlights(listId) {
_listId = listId;
var imgArray = [];
var imageBucket = $("").attr({ id: "image-bucket" }).appendTo("body");
var loadIndicator = $("").attr({ id: "load-indicator" }).css({
height: 10,
position: "absolute",
top: 0,
left: 0,
width: "100%"
})
.appendTo("body")
.append($("").attr({id: "load-bar"})
.css({
height: 10,
background: "#A2C5DA",
width: "0%"
})
);
// Grab our images from the product link rel"s
$("ul#" + _listId + " li a").each(function(index){
var image = $(this).attr("rel");
if(image) {
imgArray.push(image);
}
});
// Preload Images
$.preload(imgArray, {
init: function(loaded, total) {
$("#load_bar").show();
},
loaded: function(img, loaded, total) {
// Hide loaded image and append container
$(img)
.css({ position: "absolute" })
.appendTo(imageBucket)
.hide();
// update indicator bar
var percent = Math.round((loaded / total) * 100);
$("#load-bar").css("width", percent+"%");
},
loaded_all: function(loaded, total) {
//FadeOut Load Indicator
$("#load-bar").fadeOut("slow");
// Ready to init highlight (home) states
if(_listId === "client-highlights") {
bind_highlight_hover();
bind_highlight_click();
} else if(_listId === "work-categories") {
bind_window_hover();
bind_window_click();
}
}
});
}
/*------------------------------------------------------------------------*/
function bind_highlight_hover() {
$("ul#" + _listId + " li a").hover(function() {
// Hide Stuff
$("#tagline").stop(true, true).animate({ opacity: 0 }, "fast");
$("#blocks .block:not('.fixed')").stop(true, true).animate({ opacity: 0 }, "fast");
// Init highlight box
init_highlight_details($(this));
var trigger = $(this).attr("rel");
var image = $('#image-bucket img[src="' + trigger + '"]');
image.maxImage({
verticalAlign: "center",
horizontalAlign: "center",
maxFollows: "both",
isBackground: true,
resizeMsg: {show: false},
showOnInit: false,
zIndex: -2,
onImageShow: function() {
}
});
// Show full screen background image
image.addClass("current-maximage").stop(true, false).show(0);
}, function() {
// Close highlight details box
$("#highlight-details").stop(true, true).animate({
width: 0,
opacity: 0
});
// Hide Max Image
$(".current-maximage").stop(true, false).hide(0);
// Short pause to check if we've finished hovering
setTimeout(function() {
if(!$("#image-bucket img").is(":visible")) {
$("#tagline").stop(true, true).animate({ opacity: 1 }, "fast");
$("#blocks .block:not('.fixed')").stop(true, true).animate({ opacity: 1 }, "fast");
}
}, 200);
})
.click(function() {
});
}
/*------------------------------------------------------------------------*/
function bind_highlight_click() {
}
/*------------------------------------------------------------------------*/
function init_highlight_details(elem) {
var block;
var details;
// Get parent block height
var _height = elem.closest(".block").height();
var _leftStart = elem.closest(".block").width() + parseInt(elem.closest(".block").css("marginRight"));
var _width = elem.closest("#blocks").width() - _leftStart;
// Check for existance
if(!$("#highlight-details").length) {
// Create highlight details container and position
// Append to the parent blocks div
block = $("").attr({
id: "highlight-details"
})
.css({
height: _height,
width: _width,
position: "absolute",
left: _leftStart,
top: 0,
opacity: 0,
background: "url('/public/images/layout/trans80grey.png') repeat top left"
})
.appendTo(elem.closest("#blocks"))
.animate({
width: _width,
opacity: 1
});
} else {
block = $("#highlight-details");
block.stop(true, true)
.animate({
width: _width,
opacity: 1
});
}
// Load the correct content
get_highlight_details(elem);
}
/*------------------------------------------------------------------------*/
function get_highlight_details(elem) {
var block = $("#highlight-details");
var logo = elem.next("div").children("img");
var tagline = elem.next("div").children("h3");
var src = logo.attr("src");
block.empty();
var container = $("").attr({
id: "highlight-details-inner"
}).css({
overflow: "hidden"
})
var img_block = $("").attr({
id: "details-logo"
}).css({
display: "block",
float: "left",
width: 300,
height: block.height(),
background: "url(" + src + ") center center no-repeat"
});
var h3_block = $("").attr({
id: "details-tagline"
}).css({
display: "block",
float: "left",
width: 380
});
container.append(img_block).append(h3_block).appendTo(block);
tagline.clone().appendTo(h3_block);
}
/*------------------------------------------------------------------------*/
function bind_window_hover() {
$("ul#" + _listId + " li a").hover(function() {
// Add "window" background
var peekaboo;
if($("#peekaboo").length) {
peekaboo = $("#peekaboo");
} else {
console.log("here");
$("").attr({
id: "peekaboo"
})
.appendTo("body");
}
// Trigger and Image Vars
var trigger = $(this).attr("rel");
var image = $('#image-bucket img[src="' + trigger + '"]');
image.maxImage({
verticalAlign: "center",
horizontalAlign: "center",
maxFollows: "both",
isBackground: true,
resizeMsg: {show: false},
showOnInit: false,
zIndex: -2,
onImageShow: function() {
}
});
// Show Peekaboo
$("#peekaboo").stop(true, false).animate({ opacity: 1 }, 0);
// Show full screen background image
image.css({ display: "block", opacity: 0 });
image.addClass("current-maximage").stop(true, false).animate({ opacity: 1 }, 0);
}, function() {
// Hide Max Image
$("#peekaboo").stop(true, false).animate({ opacity: 0 }, 0);
$(".current-maximage").stop(true, false).animate({ opacity: 0 }, 0);
})
.click(function() {
});
}
/*------------------------------------------------------------------------*/
function bind_window_click() {
}
/*------------------------------------------------------------------------*/
function init_deck_shuffle() {
$("#slide-deck ul li img").animate({
opacity: 1
});
}
/*------------------------------------------------------------------------*/
function init_cycle() {
$("#cycle").cycle({
fx: 'fade'
});
}
/*------------------------------------------------------------------------*/
function preload_deck_images() {
var imgArray = [];
// Grab our images from the li > img
$("#slide-deck ul li img").each(function(index){
var image = $(this).attr("src");
imgArray.push(image);
});
// Preload Images
$.preload(imgArray, {
init: function(loaded, total) {
},
loaded: function(img, loaded, total) {
// Find Corresponding Image and Fade In
var src = $(img).attr("src");
$("#slide-deck ul li img[src='" + src + "']").animate({
opacity: 1
}, 1000)
.parent().css("background", "white");
},
loaded_all: function(loaded, total) {
init_deck_shuffle();
}
});
}
/*------------------------------------------------------------------------*/
function init_auth_boxes() {
var image = $('img.maxbackground');
image.maxImage({
zIndex: -2,
maxFollows: 'both',
verticalOffset: 0,
horizontalOffset: 0,
leftSpace: 0,
topSpace: 0,
rightSpace: 0,
bottomSpace: 0,
overflow: 'hidden',
position: 'absolute',
isBackground: true,
zIndex: -10,
verticalAlign: 'top',
horizontalAlign: 'left',
maxAtOrigImageSize: false,
slideShow: false,
showOnInit: false
});
$("#login-top").css("paddingTop", (($(document).height() / 2) - ($("#login-wrapper").height() / 2) - 50));
$("#login-wrapper").animate({
opacity: 1
}, 500, function() {
image.fadeIn(1000);
});
}
/*----------------------------------------------------------------------*/
function init_shadowBox_video(video) {
Shadowbox.setup('#video_'+video['id'], {
height: video['height'],
width: video['width'],
flashVars: {
clip_id: video['id'],
autoplay: "1"
}
});
Shadowbox.init();
}
/*-----------------------------------------------------------------------
Extend
------------------------------------------------------------------------*/