var $ = jQuery.noConflict();
$(window).load(function() {
// ***************** FOR DEVELOPMENT VERSION ONLY
var string = "";
string = " \n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
"
$('head').append(string);
string = " \n\
\n\
"
$('#top').prepend(string);
/******************************************
STYLESHEET TOGGLER
******************************************/
/*Stylesheet toggle variation on styleswitch stylesheet switcher.
Built on jQuery.
Under an CC Attribution, Share Alike License.
By Kelvin Luck ( http://www.kelvinluck.com/ )*/
(function($){
$(document).ready(function(){
$('.styleswitch').click(function(){
switchStylestyle(this.getAttribute("rel"));
loadCufonNivo();
return false
});
var c=readCookie('style');
if(c)switchStylestyle(c)
});
function switchStylestyle(styleName){
$('link[@rel*=style][title]').each(function(i){
this.disabled=true;
if(this.getAttribute('title')==styleName)this.disabled=false
});
createCookie('style',styleName,365)
}
})(jQuery);
function createCookie(name,value,days){
if(days){
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires="; expires="+date.toGMTString()
}else var expires="";
document.cookie=name+"="+value+expires+"; path=/"
}
function readCookie(name){
var nameEQ=name+"=";
var ca=document.cookie.split(';');
for(var i=0;i");
/******************************************
BORDER FOR THE FEATURED SLIDER
******************************************/
$('#featured .wrap').append("");
/******************************************
CLASS FOR THE CAPTION HEADERS
******************************************/
$('.caption h1, .caption h2, .caption h3, .caption h4, .caption h5, .caption h6').addClass('caption_title');
/******************************************
CLEARING DIVS
******************************************/
$('ul.post_list li').append("");
$('ul.comment_list li').append("");
$('ul.advertising_list').append("");
$('.tabs').after("");
/******************************************
DIVIDERS
******************************************/
$('#teaser .scrollable_widget').after("")
$('.post_entry').after('');
$('.paging').before('');
$('#main .wrap').append('');
/******************************************
PRETTY PHOTO
******************************************/
//Append necessary elements
$('.prettyPhoto.image').append("").show();
$('.prettyPhoto.video').append("").show();
//Animation on MouseOver, MouseOut
$(".prettyPhoto").hover(function(){
//Important variables (width and height)
var h = $(this).find('img').height() + 2;
var w = $(this).find('img').width() + 2;
$(this).find('.frame').css({
height: h,
width: w
});
//Centering of the frame
var position = $(this).find('img').position();
$(this).find('.frame').css({
left: position.left + 3,
top: position.top + 20
});
//Centering of the icons...
var x = (w/2) - 32;
var y = (h/2) - 50;
x = x + 'px';
y = y + 'px';
//Image icon
$(this).find('.zoom_image').css({
left: x,
top: y
});
//Video icon
$(this).find('.zoom_video').css({
left: x,
top: y
});
//Show the frame and the icon
$(this).find('.frame').stop().fadeTo(300, 0.7);
$(this).find('.frame img').stop().fadeTo(10, 1);
//If the image uses the 'caption' effect then hide the caption
$(this).parent().find('.caption').stop().fadeTo(300, 0);
},
function(){
//Hide the frame and the icon
$(this).find('.frame').stop(false, false).fadeTo(300, 0);
$(this).find('.frame img').stop(false, false).fadeTo(10, 0);
//If the image uses the 'caption' effect then show the caption again
if ($.support.opacity){
$(this).parent().find('.caption').stop().fadeTo(300, 0.7);
} else {
$(this).parent().find('.caption').stop().fadeTo(300, 1);
}
});
/******************************************
SHADOW BG FOR ALL .ADD_SHADOW ELEMENTS(FIX FOR IE)
******************************************/
if (! $.support.opacity){
$('.add_shadow:not(.panes .add_shadow)').dropShadow({
left:-1,
top:2,
blur:1,
opacity: 0.2
});
}
/******************************************
VERTICAL SCROLLER NAV BUTTONS
******************************************/
string= "" +
"
" +
"" +
"" +
"
";
$('.scrollable_vertical').before(string);
/******************************************
PLUGINS INITIALIZATION
*****************************************/
/******************************************
CUFON FONTS
******************************************/
//If not IE then...
if ($.support.opacity){
//COOLVETICA
coolvetica();
} else {
//COOLVETICA
coolvetica_ie();
}
/******************************************
NIVO SLIDER
*****************************************/
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:700, //Slide transition speed
pauseTime:7000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3... * NOT IMPLEMENTED
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:false, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
/******************************************
PIECEMKAER 3D SLIDER
*****************************************/
var flashvars = {};
flashvars.xmlSource = "piecemaker/piecemaker.xml";
flashvars.cssSource = "css/piecemaker.css";
flashvars.imageSource = "imagens/slider/";
var attributes = {};
attributes.wmode = "transparent";
swfobject.embedSWF("piecemaker/piecemaker.swf", "flashcontent", "960", "450", "0","piecemaker/expressInstall.swf", flashvars, attributes);
/******************************************
PRELOADER
*****************************************/
$("#main img").lazyload({
placeholder : "images/preloader.gif",
threshold : 2000
});
/******************************************
PRETTY PHOTO
*****************************************/
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square' // light_rounded / dark_rounded / light_square / dark_square / facebook
});
/******************************************
TABS
*****************************************/
//Add new effect('show') to the tabs (FOR IE)
$.tools.tabs.addEffect("show", function(i, done) {
this.getPanes().hide();
this.getPanes().eq(i).show();
done.call();
});
//If not IE...
if ($.support.opacity){
$("ul.tabs").tabs("div.panes > div", {
effect: 'fade'
});
} else {
$("ul.tabs").tabs("div.panes > div", {
effect: 'show'
});
}
/******************************************
TWEETABLE PLUGIN
*****************************************/
$('.tweets').tweetable({
username: 'giantbomb',
//Show tweet post time?
time: true,
//Number of recent tweets to pull
limit: 20
});
/******************************************
TOOLTIPS
*****************************************/
//Small tooltips, used on the social icons
$("#social_icons.has_tooltips img[title]").tooltip({
// name of the class
tipClass: 'small_tooltip',
// tweak the position
offset: [-2, 4],
// use the "slide" effect
effect: 'slide'
});
//Normal tooltips
$(".has_tooltips img[title]").tooltip({
// tweak the position
offset: [70, 0],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
//Large tooltips
$(".has_tooltips_large img[title]").tooltip({
// name of the class
tipClass: 'tooltip_large',
// tweak the position
offset: [70, 20],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
/******************************************
SCROLLABLE
*****************************************/
$("div.scrollable").scrollable({
speed: 500
});
/******************************************
VERTICAL SCROLLABLE
*****************************************/
$("div.scrollable_vertical:not(.tweets)").scrollable({
vertical: true,
//support for mousewheel
mousewheel: false
}).autoscroll({
autoplay: false,
interval: 3000
});
/******************************************
ALIGNMENT
*****************************************/
//Number of menu options
var no_items = $('ul#nav > li').size();
$('ul#nav').css({'width':no_items*82})
/******************************************
ANIMATION
*****************************************/
/******************************************
Links - Fade Animation
*****************************************/
if ($.support.opacity) {
//Images with links
$("a > img").hover(function(){
$(this).stop().fadeTo(500, 0.5);
},function(){
$(this).stop(false, false).fadeTo(500, 1);
});
//Headers with links
$("h1 a, h2 a, h3 a, h4 a, h5 a, h6 a").hover(function(){
$(this).stop().fadeTo(500, 0.7);
},function(){
$(this).stop(false, false).fadeTo(500, 1);
});
}
/******************************************
Social Icons - Fade Animation
*****************************************/
// On mouseover on a social icon then...
$("#social_icons img.a").hover(
// show the colored img
function() {
$(this).stop().animate({
opacity: 0
}, 800);
},
// On mouseout hide the colored img and showed the grayed one
function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
/******************************************
Button Post - Fade Animation
*****************************************/
// On mouseover on a '.button_post' button then...
$(".button_post .inactive").hover(
// show the colored img
function() {
$(this).stop().animate({
opacity: 0
}, 500);
},
// On mouseout hide the colored img and showed the grayed one
function() {
$(this).stop().animate({
opacity: 1
}, 300);
});
/******************************************
List Items - Margin Animation
*****************************************/
$("ul.style_1 li a, ul.style_2 li a, ul.style_3 li a, ul.style_4 li a, ul.style_5 li a, ul.style_6 li a, \n\
ul.style_7 li a, ul.style_8 li a").hover(function() {
var li = $(this).parent();
//Move the list item to the right
li.stop().animate({
marginLeft: "8px"
}, 50, function() {
li.animate({
marginLeft: "5px"
}, 50);
});
//Return the list item to the left
},function(){
var li = $(this).parent();
li.stop().animate({
marginLeft: "-5px"
}, 200, function(){
li.animate({
marginLeft: "0px"
},100);
});
});
/******************************************
Main Menu Animations
*****************************************/
//Slide Animation
var nav = $('ul#nav li').children('ul').hide().end();
// on mouseover over an item of the nav menu then...
nav.hover(function() {
//If not IE...
if ($.support.opacity){
// fade in the list of sub-items
$(this).find('> ul').stop(true, true).fadeIn(500);
} else {
$(this).find('> ul').stop(true, true).show();
}
//If the user clicks the link while hovering hide the submenu
$(this).click(function(){
//IF not IE...
if ($.support.opacity){
//Hides the submenu
$(this).find('> ul').stop(true, true).hide();
}
});
},
function() {
// On mouseout hide the children
$(this).find('> ul').stop(true, true).hide();
});
/******************************************
Main Menu Children Animation
*****************************************/
//Add the span that acts as the arrow to very item in the menu
$("ul#nav li ul a").before("")
//When the mouse hovers over an item of the menu then...
$("ul#nav li ul a").hover(function(){
//move the a tag to the right
$(this).stop().animate({
marginLeft: "10px"
}, 400).css('background', 'none');
//display the arrow animation
$(this).parent().find('> .menu_item_arrow').css({
'display':'block'
}).fadeTo(0, 0).stop().animate({
marginLeft: "20px",
opacity: 1
}, 200);
//On mouseout...
},function(){
//move the a tag to the left (returning to the original position)
$(this).stop().animate({
marginLeft: "0px"
}, 300);
//hide the arrow
$(this).parent().find('> .menu_item_arrow').stop().animate({
marginLeft: "10px",
opacity: 0
}, 100, function(){
$(this).hide();
});
});
/******************************************
Portfolio - Caption Sliding Animation
*****************************************/
$('.caption').each(function(){
//sets the width of the caption (image it contains - padding of caption itself)
$(this).width($(this).parent().find('img').width() - 35);
//on mouseover over the caption then...
$(this).hover(function(){
//Display the entire caption
if ($.support.opacity){
$(this).stop().fadeTo(500, 0.9);
$(this).find('.description').stop(true, true).slideDown(200);
} else{
$(this).find('.description').stop(true, true).show();
}
//Hide to the original size
}, function() {
if ($.support.opacity){
$(this).stop().fadeTo(500, 0.8);
$(this).find('.description').stop(true, true).slideUp(200);
}else {
$(this).find('.description').hide();
}
});
});
/******************************************
ScrollToTop Animation
*****************************************/
$('a[href=#top]').click(function(){
//If Safari or Chrome...
if ($.browser.webkit) {
$('body').animate({
scrollTop:0
}, 'slow');
return false;
} else {
$('html').animate({
scrollTop:0
}, 'slow');
return false;
}
});
});
//0x00
");
/******************************************
BORDER FOR THE FEATURED SLIDER
******************************************/
$('#featured .wrap').append("");
/******************************************
CLASS FOR THE CAPTION HEADERS
******************************************/
$('.caption h1, .caption h2, .caption h3, .caption h4, .caption h5, .caption h6').addClass('caption_title');
/******************************************
CLEARING DIVS
******************************************/
$('ul.post_list li').append("");
$('ul.comment_list li').append("");
$('ul.advertising_list').append("");
$('.tabs').after("");
/******************************************
DIVIDERS
******************************************/
$('#teaser .scrollable_widget').after("")
$('.post_entry').after('');
$('.paging').before('');
$('#main .wrap').append('');
/******************************************
PRETTY PHOTO
******************************************/
//Append necessary elements
$('.prettyPhoto.image').append("
").show();
$('.prettyPhoto.video').append("
").show();
//Animation on MouseOver, MouseOut
$(".prettyPhoto").hover(function(){
//Important variables (width and height)
var h = $(this).find('img').height() + 2;
var w = $(this).find('img').width() + 2;
$(this).find('.frame').css({
height: h,
width: w
});
//Centering of the frame
var position = $(this).find('img').position();
$(this).find('.frame').css({
left: position.left + 3,
top: position.top + 20
});
//Centering of the icons...
var x = (w/2) - 32;
var y = (h/2) - 50;
x = x + 'px';
y = y + 'px';
//Image icon
$(this).find('.zoom_image').css({
left: x,
top: y
});
//Video icon
$(this).find('.zoom_video').css({
left: x,
top: y
});
//Show the frame and the icon
$(this).find('.frame').stop().fadeTo(300, 0.7);
$(this).find('.frame img').stop().fadeTo(10, 1);
//If the image uses the 'caption' effect then hide the caption
$(this).parent().find('.caption').stop().fadeTo(300, 0);
},
function(){
//Hide the frame and the icon
$(this).find('.frame').stop(false, false).fadeTo(300, 0);
$(this).find('.frame img').stop(false, false).fadeTo(10, 0);
//If the image uses the 'caption' effect then show the caption again
if ($.support.opacity){
$(this).parent().find('.caption').stop().fadeTo(300, 0.7);
} else {
$(this).parent().find('.caption').stop().fadeTo(300, 1);
}
});
/******************************************
SHADOW BG FOR ALL .ADD_SHADOW ELEMENTS(FIX FOR IE)
******************************************/
if (! $.support.opacity){
$('.add_shadow:not(.panes .add_shadow)').dropShadow({
left:-1,
top:2,
blur:1,
opacity: 0.2
});
}
/******************************************
VERTICAL SCROLLER NAV BUTTONS
******************************************/
string= "" +
"";
$('.scrollable_vertical').before(string);
/******************************************
PLUGINS INITIALIZATION
*****************************************/
/******************************************
CUFON FONTS
******************************************/
//If not IE then...
if ($.support.opacity){
//COOLVETICA
coolvetica();
} else {
//COOLVETICA
coolvetica_ie();
}
/******************************************
NIVO SLIDER
*****************************************/
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:700, //Slide transition speed
pauseTime:7000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3... * NOT IMPLEMENTED
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:false, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
/******************************************
PIECEMKAER 3D SLIDER
*****************************************/
var flashvars = {};
flashvars.xmlSource = "piecemaker/piecemaker.xml";
flashvars.cssSource = "css/piecemaker.css";
flashvars.imageSource = "imagens/slider/";
var attributes = {};
attributes.wmode = "transparent";
swfobject.embedSWF("piecemaker/piecemaker.swf", "flashcontent", "960", "450", "0","piecemaker/expressInstall.swf", flashvars, attributes);
/******************************************
PRELOADER
*****************************************/
$("#main img").lazyload({
placeholder : "images/preloader.gif",
threshold : 2000
});
/******************************************
PRETTY PHOTO
*****************************************/
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square' // light_rounded / dark_rounded / light_square / dark_square / facebook
});
/******************************************
TABS
*****************************************/
//Add new effect('show') to the tabs (FOR IE)
$.tools.tabs.addEffect("show", function(i, done) {
this.getPanes().hide();
this.getPanes().eq(i).show();
done.call();
});
//If not IE...
if ($.support.opacity){
$("ul.tabs").tabs("div.panes > div", {
effect: 'fade'
});
} else {
$("ul.tabs").tabs("div.panes > div", {
effect: 'show'
});
}
/******************************************
TWEETABLE PLUGIN
*****************************************/
$('.tweets').tweetable({
username: 'giantbomb',
//Show tweet post time?
time: true,
//Number of recent tweets to pull
limit: 20
});
/******************************************
TOOLTIPS
*****************************************/
//Small tooltips, used on the social icons
$("#social_icons.has_tooltips img[title]").tooltip({
// name of the class
tipClass: 'small_tooltip',
// tweak the position
offset: [-2, 4],
// use the "slide" effect
effect: 'slide'
});
//Normal tooltips
$(".has_tooltips img[title]").tooltip({
// tweak the position
offset: [70, 0],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
//Large tooltips
$(".has_tooltips_large img[title]").tooltip({
// name of the class
tipClass: 'tooltip_large',
// tweak the position
offset: [70, 20],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
/******************************************
SCROLLABLE
*****************************************/
$("div.scrollable").scrollable({
speed: 500
});
/******************************************
VERTICAL SCROLLABLE
*****************************************/
$("div.scrollable_vertical:not(.tweets)").scrollable({
vertical: true,
//support for mousewheel
mousewheel: false
}).autoscroll({
autoplay: false,
interval: 3000
});
/******************************************
ALIGNMENT
*****************************************/
//Number of menu options
var no_items = $('ul#nav > li').size();
$('ul#nav').css({'width':no_items*82})
/******************************************
ANIMATION
*****************************************/
/******************************************
Links - Fade Animation
*****************************************/
if ($.support.opacity) {
//Images with links
$("a > img").hover(function(){
$(this).stop().fadeTo(500, 0.5);
},function(){
$(this).stop(false, false).fadeTo(500, 1);
});
//Headers with links
$("h1 a, h2 a, h3 a, h4 a, h5 a, h6 a").hover(function(){
$(this).stop().fadeTo(500, 0.7);
},function(){
$(this).stop(false, false).fadeTo(500, 1);
});
}
/******************************************
Social Icons - Fade Animation
*****************************************/
// On mouseover on a social icon then...
$("#social_icons img.a").hover(
// show the colored img
function() {
$(this).stop().animate({
opacity: 0
}, 800);
},
// On mouseout hide the colored img and showed the grayed one
function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
/******************************************
Button Post - Fade Animation
*****************************************/
// On mouseover on a '.button_post' button then...
$(".button_post .inactive").hover(
// show the colored img
function() {
$(this).stop().animate({
opacity: 0
}, 500);
},
// On mouseout hide the colored img and showed the grayed one
function() {
$(this).stop().animate({
opacity: 1
}, 300);
});
/******************************************
List Items - Margin Animation
*****************************************/
$("ul.style_1 li a, ul.style_2 li a, ul.style_3 li a, ul.style_4 li a, ul.style_5 li a, ul.style_6 li a, \n\
ul.style_7 li a, ul.style_8 li a").hover(function() {
var li = $(this).parent();
//Move the list item to the right
li.stop().animate({
marginLeft: "8px"
}, 50, function() {
li.animate({
marginLeft: "5px"
}, 50);
});
//Return the list item to the left
},function(){
var li = $(this).parent();
li.stop().animate({
marginLeft: "-5px"
}, 200, function(){
li.animate({
marginLeft: "0px"
},100);
});
});
/******************************************
Main Menu Animations
*****************************************/
//Slide Animation
var nav = $('ul#nav li').children('ul').hide().end();
// on mouseover over an item of the nav menu then...
nav.hover(function() {
//If not IE...
if ($.support.opacity){
// fade in the list of sub-items
$(this).find('> ul').stop(true, true).fadeIn(500);
} else {
$(this).find('> ul').stop(true, true).show();
}
//If the user clicks the link while hovering hide the submenu
$(this).click(function(){
//IF not IE...
if ($.support.opacity){
//Hides the submenu
$(this).find('> ul').stop(true, true).hide();
}
});
},
function() {
// On mouseout hide the children
$(this).find('> ul').stop(true, true).hide();
});
/******************************************
Main Menu Children Animation
*****************************************/
//Add the span that acts as the arrow to very item in the menu
$("ul#nav li ul a").before("")
//When the mouse hovers over an item of the menu then...
$("ul#nav li ul a").hover(function(){
//move the a tag to the right
$(this).stop().animate({
marginLeft: "10px"
}, 400).css('background', 'none');
//display the arrow animation
$(this).parent().find('> .menu_item_arrow').css({
'display':'block'
}).fadeTo(0, 0).stop().animate({
marginLeft: "20px",
opacity: 1
}, 200);
//On mouseout...
},function(){
//move the a tag to the left (returning to the original position)
$(this).stop().animate({
marginLeft: "0px"
}, 300);
//hide the arrow
$(this).parent().find('> .menu_item_arrow').stop().animate({
marginLeft: "10px",
opacity: 0
}, 100, function(){
$(this).hide();
});
});
/******************************************
Portfolio - Caption Sliding Animation
*****************************************/
$('.caption').each(function(){
//sets the width of the caption (image it contains - padding of caption itself)
$(this).width($(this).parent().find('img').width() - 35);
//on mouseover over the caption then...
$(this).hover(function(){
//Display the entire caption
if ($.support.opacity){
$(this).stop().fadeTo(500, 0.9);
$(this).find('.description').stop(true, true).slideDown(200);
} else{
$(this).find('.description').stop(true, true).show();
}
//Hide to the original size
}, function() {
if ($.support.opacity){
$(this).stop().fadeTo(500, 0.8);
$(this).find('.description').stop(true, true).slideUp(200);
}else {
$(this).find('.description').hide();
}
});
});
/******************************************
ScrollToTop Animation
*****************************************/
$('a[href=#top]').click(function(){
//If Safari or Chrome...
if ($.browser.webkit) {
$('body').animate({
scrollTop:0
}, 'slow');
return false;
} else {
$('html').animate({
scrollTop:0
}, 'slow');
return false;
}
});
});
//0x00