<script type='text/javascript' src='@imagePath/xenfocus/js/cookie.js'></script>
<script type='text/javascript'>
$(document).ready(function($){
$("#backgroundPickerButton span").click(function(){
$("#toggle_background").slideToggle();
$(this).toggleClass("active");
});
<xen:if is="@transparentBars">var customBackground = 'html#XenForo, body .nodeList .categoryStrip, body .discussionList .sectionHeaders';<xen:else />var customBackground = 'html#XenForo';</xen:if>
$("#custom_background span").click(function(){
var backgroundImage = $(this).attr("data-backgroundImage");
var backgroundColor = $(this).attr("data-backgroundColor");
$("style#styleBackground").replaceWith('<style id="styleBackground" type="text/css"><xen:if is="@enableResponsive">@media (min-width:@maxResponsiveMediumWidth){' + customBackground + '{ background-color: ' + backgroundColor + '; background-image: url(@imagePath/xenfocus/backgrounds/' + backgroundImage + '.jpg); }}</xen:if></style>');
$.cookie('xfBackgroundImage',backgroundImage,{ expires: 365, path: '/'});
$.cookie('xfBackgroundHex',backgroundColor,{ expires: 365, path: '/'});
});
if (($.cookie('xfBackgroundImage') != null)){
$("style#styleBackground").replaceWith('<style id="styleBackground" type="text/css"><xen:if is="@enableResponsive">@media (min-width:@maxResponsiveMediumWidth){' + customBackground + '{ background-color: ' + $.cookie('xfBackgroundHex') + '; background-image: url(@imagePath/xenfocus/backgrounds/' + $.cookie('xfBackgroundImage') + '.jpg); }}</xen:if></style>');
}
else{
$("style#styleBackground").replaceWith('<style id="styleBackground" type="text/css"><xen:if is="@enableResponsive">@media (min-width:@maxResponsiveMediumWidth){' + customBackground + '{ background-color: @backgroundHexDefault; background-image: url("@imagePath/xenfocus/backgrounds/@backgroundImageDefault"); }}</xen:if></style>');
}
});
</script>
<style type='text/css' id='styleBackground'>html{ background-image: none; }</style>
<div id='backgroundPickerButton'><span title="Change background image">Change background image</span></div>
<div id='toggle_background'><div id='custom_background' class='clearfix'>
<span data-backgroundImage='background1' data-backgroundColor="@backgroundHex1" style='background-image: url(@imagePath/xenfocus/backgrounds/background1.jpg);'></span>
<span data-backgroundImage='background2' data-backgroundColor="@backgroundHex2" style='background-image: url(@imagePath/xenfocus/backgrounds/background2.jpg);'></span>
<span data-backgroundImage='background3' data-backgroundColor="@backgroundHex3" style='background-image: url(@imagePath/xenfocus/backgrounds/background3.jpg);'></span>
<span data-backgroundImage='background4' data-backgroundColor="@backgroundHex4" style='background-image: url(@imagePath/xenfocus/backgrounds/background4.jpg);'></span>
</div></div>
