// 'stacks' is the Stacks global object.
// All of the other Stacks related Javascript will
// be attatched to it.
var stacks = {};
// this call to jQuery gives us access to the globaal
// jQuery object.
// 'noConflict' removes the '$' variable.
// 'true' removes the 'jQuery' variable.
// removing these globals reduces conflicts with other
// jQuery versions that might be running on this page.
stacks.jQuery = jQuery.noConflict(true);
// Javascript for stacks_in_263_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_263_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_263_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
jQuery(document).ready(function($){
var splashStack = $("#stacks_in_263_page3").parent().html();
$("body > *").remove();
$("body").append(splashStack);
});
return stack;
})(stacks.stacks_in_263_page3);
// Javascript for stacks_in_269_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_269_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_269_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
/**
* Sprightly by http://www.doobox.co.uk integrated for rapidweaver from the code http://dev.artutkin.ru/desaturate/example.html
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() {
$.desaturate = {
defaults: {
'iefix': true, // autofix png for IE
'level': 1, // level of desaturation, ignored in IE
'rgb': [0.3333, 0.3333, 0.3333] // levels of RGB for compose grayscale, ignored in IE
},
customClass: 'js-desaturate-fixed' // usually no need to change this
};
$.desaturate.Image = function(obj) {
this.image = obj;
this.jImage = $(this.image);
this.src = this.jImage.attr('src');
this.isPNG = this.jImage.is("IMG[src$=.png]");
var styleWidth = new String(this.jImage.css('width')); styleWidth = styleWidth.replace(/px/, '');
var styleHeight = new String(this.jImage.css('height')); styleHeight = styleHeight.replace(/px/, '');
this.width = this.jImage.width() ? this.jImage.width() : (styleWidth ? styleWidth : this.jImage.attr('width'));
this.height = this.jImage.height() ? this.jImage.height() : (styleHeight ? styleHeight : this.jImage.attr('height'));
// var styles = ['padding', 'margin', 'border'];
// for (var i in styles) {
// this.imgCustomStyles += styles[i] + ':' + this.image.style[styles[i]]+';';
// this.image.style[styles[i]] = '';
// }
this.imgFilter = '';
if (this.image.style.filter) {
this.imgFilter = 'filter:'+this.image.style.filter+';';
this.image.style.filter = '';
}
this.image.style.width = '';
this.image.style.height = '';
this.imgId = this.jImage.attr('id') ? 'id="' + this.jImage.attr('id') + '" ' : '';
this.imgClass = 'class="' + this.jImage.attr('class') + ' ' + $.desaturate.customClass + '" ';
this.imgTitle = this.jImage.attr('title') ? 'title="' + this.jImage.attr('title') + '" ' : '';
this.imgAlt = this.jImage.attr('alt') ? 'alt="' + this.jImage.attr('alt') + '" ' : '';
this.imgStyles = this.image.style.cssText;
this.imgStyles += this.jImage.attr('align') ? 'float:' + this.jImage.attr('align') + ';' : '';
this.imgStyles += this.jImage.parent().attr('href') ? 'cursor:hand;' : '';
// nulled filter present as FILTER: in cssText
this.imgStyles = this.imgStyles.replace(/filter:/i,'');
this.imgCssSize = (this.width && this.height) ? 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;' : '';
};
$.desaturate.Image.prototype.replace = function(html) {
return $(html).replaceAll(this.image).get(0);
};
$.desaturate.Image.prototype.getCanvas = function(options) {
var canvasStr = '';
var canvas = $(canvasStr).get(0);
var canvasContext = canvas.getContext('2d');
var imgW = this.width;
var imgH = this.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(this.image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = imgPixels.data[i]*options.rgb[0] + imgPixels.data[i + 1]*options.rgb[1] + imgPixels.data[i + 2]*options.rgb[2];
imgPixels.data[i] = avg*options.level + imgPixels.data[i]*(1-options.level);
imgPixels.data[i + 1] = avg*options.level + imgPixels.data[i + 1]*(1-options.level);
imgPixels.data[i + 2] = avg*options.level + imgPixels.data[i + 2]*(1-options.level);
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas;
}
$.desaturate.Image.prototype.getIeFix = function(options) {
/* Some $ operations like fadeIn/Out can reset filter atribute, so we need 3 SPAN's: 1st for styles and
* correct work with $'s animation, 2rd for grayScale filter and last one for alpha image filter.
* Combined 2 filters in one span won't work too.
*/
var blockInit = 'display:block;background:transparent;padding:0;margin:0;';
var strNewHTML = '';
strNewHTML += '';
if (this.isPNG) {
strNewHTML += '';
strNewHTML += '';
} else {
strNewHTML += '![]()
';
}
strNewHTML += '';
strNewHTML += '';
return $(strNewHTML).get(0);
}
$.fn.desaturate = function(options) {
var ret = [];
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
this.each(function() {
var el = this;
var $opt = $.extend(true, {}, _opt, $.metadata ? $(el).metadata() : {}, $(el).data('desaturate'));
if ($.browser.msie && $(el).is("IMG") && $opt.iefix) {
// autofix IE images
var image = new $.desaturate.Image(el);
el = image.replace(image.getIeFix($opt));
}
if ($.browser.msie && ($(el).is("IMG") || $(el).hasClass($.desaturate.customClass))) {
// apply filter for IE
var el1 = el;
if ($(el).hasClass($.desaturate.customClass))
{
// if this element is our imgage fixed by pngIE - set grayscale filter to child span
el1 = $("SPAN", el).get(0);
}
el1.style.filter = (el1.style.filter ? el1.style.filter+' ' : '') +
'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}
if (!$.browser.msie && ($(el).is("IMG"))) {
// convert image to canvas
var image = new $.desaturate.Image(el);
el = image.replace(image.getCanvas($opt));
}
ret.push(el);
});
return this.pushStack(ret, "desaturate", "");
};
$.fn.desaturateImgFix = function(options) {
if (!$.browser.msie) {
return this;
}
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
var ret = [];
this.each(function() {
var $opt = $.extend(true, {}, _opt, $.metadata ? $(this).metadata() : {}, $(this).data('desaturate'));
if (!$(this).is("IMG")) {
ret.push(this);
} else {
var image = new $.desaturate.Image(this);
ret.push(image.replace(image.getIeFix($opt)));
}
});
return this.pushStack(ret, "desaturateImgFix", "");
};
});
// start new code
$(window).load(function() {
var paircount = 0;
var $thisSprite = $("#stacks_in_269_page3 img.imageStyle");
var reverse = "";
if ($.browser.msie)
{
// I need this only if desaturate png with aplha channel
$thisSprite = $thisSprite.desaturateImgFix();
}
if(reverse == ""){
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_269_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_269_page3color')
.hide()
});
}
else {
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_269_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_269_page3color')
$(this).hide()
});
}
$thisSprite.desaturate()
// add events for switch between color/gray versions
$('.spriteContainer').bind('mouseenter mouseleave', function(){
$(this).find('.stacks_in_269_page3pair').toggle().toggleClass('stacks_in_269_page3color');
});
});
return stack;
})(stacks.stacks_in_269_page3);
// Javascript for stacks_in_271_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_271_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_271_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
/**
* Sprightly by http://www.doobox.co.uk integrated for rapidweaver from the code http://dev.artutkin.ru/desaturate/example.html
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() {
$.desaturate = {
defaults: {
'iefix': true, // autofix png for IE
'level': 1, // level of desaturation, ignored in IE
'rgb': [0.3333, 0.3333, 0.3333] // levels of RGB for compose grayscale, ignored in IE
},
customClass: 'js-desaturate-fixed' // usually no need to change this
};
$.desaturate.Image = function(obj) {
this.image = obj;
this.jImage = $(this.image);
this.src = this.jImage.attr('src');
this.isPNG = this.jImage.is("IMG[src$=.png]");
var styleWidth = new String(this.jImage.css('width')); styleWidth = styleWidth.replace(/px/, '');
var styleHeight = new String(this.jImage.css('height')); styleHeight = styleHeight.replace(/px/, '');
this.width = this.jImage.width() ? this.jImage.width() : (styleWidth ? styleWidth : this.jImage.attr('width'));
this.height = this.jImage.height() ? this.jImage.height() : (styleHeight ? styleHeight : this.jImage.attr('height'));
// var styles = ['padding', 'margin', 'border'];
// for (var i in styles) {
// this.imgCustomStyles += styles[i] + ':' + this.image.style[styles[i]]+';';
// this.image.style[styles[i]] = '';
// }
this.imgFilter = '';
if (this.image.style.filter) {
this.imgFilter = 'filter:'+this.image.style.filter+';';
this.image.style.filter = '';
}
this.image.style.width = '';
this.image.style.height = '';
this.imgId = this.jImage.attr('id') ? 'id="' + this.jImage.attr('id') + '" ' : '';
this.imgClass = 'class="' + this.jImage.attr('class') + ' ' + $.desaturate.customClass + '" ';
this.imgTitle = this.jImage.attr('title') ? 'title="' + this.jImage.attr('title') + '" ' : '';
this.imgAlt = this.jImage.attr('alt') ? 'alt="' + this.jImage.attr('alt') + '" ' : '';
this.imgStyles = this.image.style.cssText;
this.imgStyles += this.jImage.attr('align') ? 'float:' + this.jImage.attr('align') + ';' : '';
this.imgStyles += this.jImage.parent().attr('href') ? 'cursor:hand;' : '';
// nulled filter present as FILTER: in cssText
this.imgStyles = this.imgStyles.replace(/filter:/i,'');
this.imgCssSize = (this.width && this.height) ? 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;' : '';
};
$.desaturate.Image.prototype.replace = function(html) {
return $(html).replaceAll(this.image).get(0);
};
$.desaturate.Image.prototype.getCanvas = function(options) {
var canvasStr = '';
var canvas = $(canvasStr).get(0);
var canvasContext = canvas.getContext('2d');
var imgW = this.width;
var imgH = this.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(this.image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = imgPixels.data[i]*options.rgb[0] + imgPixels.data[i + 1]*options.rgb[1] + imgPixels.data[i + 2]*options.rgb[2];
imgPixels.data[i] = avg*options.level + imgPixels.data[i]*(1-options.level);
imgPixels.data[i + 1] = avg*options.level + imgPixels.data[i + 1]*(1-options.level);
imgPixels.data[i + 2] = avg*options.level + imgPixels.data[i + 2]*(1-options.level);
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas;
}
$.desaturate.Image.prototype.getIeFix = function(options) {
/* Some $ operations like fadeIn/Out can reset filter atribute, so we need 3 SPAN's: 1st for styles and
* correct work with $'s animation, 2rd for grayScale filter and last one for alpha image filter.
* Combined 2 filters in one span won't work too.
*/
var blockInit = 'display:block;background:transparent;padding:0;margin:0;';
var strNewHTML = '';
strNewHTML += '';
if (this.isPNG) {
strNewHTML += '';
strNewHTML += '';
} else {
strNewHTML += '![]()
';
}
strNewHTML += '';
strNewHTML += '';
return $(strNewHTML).get(0);
}
$.fn.desaturate = function(options) {
var ret = [];
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
this.each(function() {
var el = this;
var $opt = $.extend(true, {}, _opt, $.metadata ? $(el).metadata() : {}, $(el).data('desaturate'));
if ($.browser.msie && $(el).is("IMG") && $opt.iefix) {
// autofix IE images
var image = new $.desaturate.Image(el);
el = image.replace(image.getIeFix($opt));
}
if ($.browser.msie && ($(el).is("IMG") || $(el).hasClass($.desaturate.customClass))) {
// apply filter for IE
var el1 = el;
if ($(el).hasClass($.desaturate.customClass))
{
// if this element is our imgage fixed by pngIE - set grayscale filter to child span
el1 = $("SPAN", el).get(0);
}
el1.style.filter = (el1.style.filter ? el1.style.filter+' ' : '') +
'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}
if (!$.browser.msie && ($(el).is("IMG"))) {
// convert image to canvas
var image = new $.desaturate.Image(el);
el = image.replace(image.getCanvas($opt));
}
ret.push(el);
});
return this.pushStack(ret, "desaturate", "");
};
$.fn.desaturateImgFix = function(options) {
if (!$.browser.msie) {
return this;
}
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
var ret = [];
this.each(function() {
var $opt = $.extend(true, {}, _opt, $.metadata ? $(this).metadata() : {}, $(this).data('desaturate'));
if (!$(this).is("IMG")) {
ret.push(this);
} else {
var image = new $.desaturate.Image(this);
ret.push(image.replace(image.getIeFix($opt)));
}
});
return this.pushStack(ret, "desaturateImgFix", "");
};
});
// start new code
$(window).load(function() {
var paircount = 0;
var $thisSprite = $("#stacks_in_271_page3 img.imageStyle");
var reverse = "";
if ($.browser.msie)
{
// I need this only if desaturate png with aplha channel
$thisSprite = $thisSprite.desaturateImgFix();
}
if(reverse == ""){
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_271_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_271_page3color')
.hide()
});
}
else {
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_271_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_271_page3color')
$(this).hide()
});
}
$thisSprite.desaturate()
// add events for switch between color/gray versions
$('.spriteContainer').bind('mouseenter mouseleave', function(){
$(this).find('.stacks_in_271_page3pair').toggle().toggleClass('stacks_in_271_page3color');
});
});
return stack;
})(stacks.stacks_in_271_page3);
// Javascript for stacks_in_273_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_273_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_273_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
/**
* Sprightly by http://www.doobox.co.uk integrated for rapidweaver from the code http://dev.artutkin.ru/desaturate/example.html
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() {
$.desaturate = {
defaults: {
'iefix': true, // autofix png for IE
'level': 1, // level of desaturation, ignored in IE
'rgb': [0.3333, 0.3333, 0.3333] // levels of RGB for compose grayscale, ignored in IE
},
customClass: 'js-desaturate-fixed' // usually no need to change this
};
$.desaturate.Image = function(obj) {
this.image = obj;
this.jImage = $(this.image);
this.src = this.jImage.attr('src');
this.isPNG = this.jImage.is("IMG[src$=.png]");
var styleWidth = new String(this.jImage.css('width')); styleWidth = styleWidth.replace(/px/, '');
var styleHeight = new String(this.jImage.css('height')); styleHeight = styleHeight.replace(/px/, '');
this.width = this.jImage.width() ? this.jImage.width() : (styleWidth ? styleWidth : this.jImage.attr('width'));
this.height = this.jImage.height() ? this.jImage.height() : (styleHeight ? styleHeight : this.jImage.attr('height'));
// var styles = ['padding', 'margin', 'border'];
// for (var i in styles) {
// this.imgCustomStyles += styles[i] + ':' + this.image.style[styles[i]]+';';
// this.image.style[styles[i]] = '';
// }
this.imgFilter = '';
if (this.image.style.filter) {
this.imgFilter = 'filter:'+this.image.style.filter+';';
this.image.style.filter = '';
}
this.image.style.width = '';
this.image.style.height = '';
this.imgId = this.jImage.attr('id') ? 'id="' + this.jImage.attr('id') + '" ' : '';
this.imgClass = 'class="' + this.jImage.attr('class') + ' ' + $.desaturate.customClass + '" ';
this.imgTitle = this.jImage.attr('title') ? 'title="' + this.jImage.attr('title') + '" ' : '';
this.imgAlt = this.jImage.attr('alt') ? 'alt="' + this.jImage.attr('alt') + '" ' : '';
this.imgStyles = this.image.style.cssText;
this.imgStyles += this.jImage.attr('align') ? 'float:' + this.jImage.attr('align') + ';' : '';
this.imgStyles += this.jImage.parent().attr('href') ? 'cursor:hand;' : '';
// nulled filter present as FILTER: in cssText
this.imgStyles = this.imgStyles.replace(/filter:/i,'');
this.imgCssSize = (this.width && this.height) ? 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;' : '';
};
$.desaturate.Image.prototype.replace = function(html) {
return $(html).replaceAll(this.image).get(0);
};
$.desaturate.Image.prototype.getCanvas = function(options) {
var canvasStr = '';
var canvas = $(canvasStr).get(0);
var canvasContext = canvas.getContext('2d');
var imgW = this.width;
var imgH = this.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(this.image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = imgPixels.data[i]*options.rgb[0] + imgPixels.data[i + 1]*options.rgb[1] + imgPixels.data[i + 2]*options.rgb[2];
imgPixels.data[i] = avg*options.level + imgPixels.data[i]*(1-options.level);
imgPixels.data[i + 1] = avg*options.level + imgPixels.data[i + 1]*(1-options.level);
imgPixels.data[i + 2] = avg*options.level + imgPixels.data[i + 2]*(1-options.level);
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas;
}
$.desaturate.Image.prototype.getIeFix = function(options) {
/* Some $ operations like fadeIn/Out can reset filter atribute, so we need 3 SPAN's: 1st for styles and
* correct work with $'s animation, 2rd for grayScale filter and last one for alpha image filter.
* Combined 2 filters in one span won't work too.
*/
var blockInit = 'display:block;background:transparent;padding:0;margin:0;';
var strNewHTML = '';
strNewHTML += '';
if (this.isPNG) {
strNewHTML += '';
strNewHTML += '';
} else {
strNewHTML += '![]()
';
}
strNewHTML += '';
strNewHTML += '';
return $(strNewHTML).get(0);
}
$.fn.desaturate = function(options) {
var ret = [];
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
this.each(function() {
var el = this;
var $opt = $.extend(true, {}, _opt, $.metadata ? $(el).metadata() : {}, $(el).data('desaturate'));
if ($.browser.msie && $(el).is("IMG") && $opt.iefix) {
// autofix IE images
var image = new $.desaturate.Image(el);
el = image.replace(image.getIeFix($opt));
}
if ($.browser.msie && ($(el).is("IMG") || $(el).hasClass($.desaturate.customClass))) {
// apply filter for IE
var el1 = el;
if ($(el).hasClass($.desaturate.customClass))
{
// if this element is our imgage fixed by pngIE - set grayscale filter to child span
el1 = $("SPAN", el).get(0);
}
el1.style.filter = (el1.style.filter ? el1.style.filter+' ' : '') +
'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}
if (!$.browser.msie && ($(el).is("IMG"))) {
// convert image to canvas
var image = new $.desaturate.Image(el);
el = image.replace(image.getCanvas($opt));
}
ret.push(el);
});
return this.pushStack(ret, "desaturate", "");
};
$.fn.desaturateImgFix = function(options) {
if (!$.browser.msie) {
return this;
}
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
var ret = [];
this.each(function() {
var $opt = $.extend(true, {}, _opt, $.metadata ? $(this).metadata() : {}, $(this).data('desaturate'));
if (!$(this).is("IMG")) {
ret.push(this);
} else {
var image = new $.desaturate.Image(this);
ret.push(image.replace(image.getIeFix($opt)));
}
});
return this.pushStack(ret, "desaturateImgFix", "");
};
});
// start new code
$(window).load(function() {
var paircount = 0;
var $thisSprite = $("#stacks_in_273_page3 img.imageStyle");
var reverse = "";
if ($.browser.msie)
{
// I need this only if desaturate png with aplha channel
$thisSprite = $thisSprite.desaturateImgFix();
}
if(reverse == ""){
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_273_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_273_page3color')
.hide()
});
}
else {
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_273_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_273_page3color')
$(this).hide()
});
}
$thisSprite.desaturate()
// add events for switch between color/gray versions
$('.spriteContainer').bind('mouseenter mouseleave', function(){
$(this).find('.stacks_in_273_page3pair').toggle().toggleClass('stacks_in_273_page3color');
});
});
return stack;
})(stacks.stacks_in_273_page3);
// Javascript for stacks_in_275_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_275_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_275_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
/**
* Sprightly by http://www.doobox.co.uk integrated for rapidweaver from the code http://dev.artutkin.ru/desaturate/example.html
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() {
$.desaturate = {
defaults: {
'iefix': true, // autofix png for IE
'level': 1, // level of desaturation, ignored in IE
'rgb': [0.3333, 0.3333, 0.3333] // levels of RGB for compose grayscale, ignored in IE
},
customClass: 'js-desaturate-fixed' // usually no need to change this
};
$.desaturate.Image = function(obj) {
this.image = obj;
this.jImage = $(this.image);
this.src = this.jImage.attr('src');
this.isPNG = this.jImage.is("IMG[src$=.png]");
var styleWidth = new String(this.jImage.css('width')); styleWidth = styleWidth.replace(/px/, '');
var styleHeight = new String(this.jImage.css('height')); styleHeight = styleHeight.replace(/px/, '');
this.width = this.jImage.width() ? this.jImage.width() : (styleWidth ? styleWidth : this.jImage.attr('width'));
this.height = this.jImage.height() ? this.jImage.height() : (styleHeight ? styleHeight : this.jImage.attr('height'));
// var styles = ['padding', 'margin', 'border'];
// for (var i in styles) {
// this.imgCustomStyles += styles[i] + ':' + this.image.style[styles[i]]+';';
// this.image.style[styles[i]] = '';
// }
this.imgFilter = '';
if (this.image.style.filter) {
this.imgFilter = 'filter:'+this.image.style.filter+';';
this.image.style.filter = '';
}
this.image.style.width = '';
this.image.style.height = '';
this.imgId = this.jImage.attr('id') ? 'id="' + this.jImage.attr('id') + '" ' : '';
this.imgClass = 'class="' + this.jImage.attr('class') + ' ' + $.desaturate.customClass + '" ';
this.imgTitle = this.jImage.attr('title') ? 'title="' + this.jImage.attr('title') + '" ' : '';
this.imgAlt = this.jImage.attr('alt') ? 'alt="' + this.jImage.attr('alt') + '" ' : '';
this.imgStyles = this.image.style.cssText;
this.imgStyles += this.jImage.attr('align') ? 'float:' + this.jImage.attr('align') + ';' : '';
this.imgStyles += this.jImage.parent().attr('href') ? 'cursor:hand;' : '';
// nulled filter present as FILTER: in cssText
this.imgStyles = this.imgStyles.replace(/filter:/i,'');
this.imgCssSize = (this.width && this.height) ? 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;' : '';
};
$.desaturate.Image.prototype.replace = function(html) {
return $(html).replaceAll(this.image).get(0);
};
$.desaturate.Image.prototype.getCanvas = function(options) {
var canvasStr = '';
var canvas = $(canvasStr).get(0);
var canvasContext = canvas.getContext('2d');
var imgW = this.width;
var imgH = this.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(this.image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = imgPixels.data[i]*options.rgb[0] + imgPixels.data[i + 1]*options.rgb[1] + imgPixels.data[i + 2]*options.rgb[2];
imgPixels.data[i] = avg*options.level + imgPixels.data[i]*(1-options.level);
imgPixels.data[i + 1] = avg*options.level + imgPixels.data[i + 1]*(1-options.level);
imgPixels.data[i + 2] = avg*options.level + imgPixels.data[i + 2]*(1-options.level);
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas;
}
$.desaturate.Image.prototype.getIeFix = function(options) {
/* Some $ operations like fadeIn/Out can reset filter atribute, so we need 3 SPAN's: 1st for styles and
* correct work with $'s animation, 2rd for grayScale filter and last one for alpha image filter.
* Combined 2 filters in one span won't work too.
*/
var blockInit = 'display:block;background:transparent;padding:0;margin:0;';
var strNewHTML = '';
strNewHTML += '';
if (this.isPNG) {
strNewHTML += '';
strNewHTML += '';
} else {
strNewHTML += '![]()
';
}
strNewHTML += '';
strNewHTML += '';
return $(strNewHTML).get(0);
}
$.fn.desaturate = function(options) {
var ret = [];
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
this.each(function() {
var el = this;
var $opt = $.extend(true, {}, _opt, $.metadata ? $(el).metadata() : {}, $(el).data('desaturate'));
if ($.browser.msie && $(el).is("IMG") && $opt.iefix) {
// autofix IE images
var image = new $.desaturate.Image(el);
el = image.replace(image.getIeFix($opt));
}
if ($.browser.msie && ($(el).is("IMG") || $(el).hasClass($.desaturate.customClass))) {
// apply filter for IE
var el1 = el;
if ($(el).hasClass($.desaturate.customClass))
{
// if this element is our imgage fixed by pngIE - set grayscale filter to child span
el1 = $("SPAN", el).get(0);
}
el1.style.filter = (el1.style.filter ? el1.style.filter+' ' : '') +
'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}
if (!$.browser.msie && ($(el).is("IMG"))) {
// convert image to canvas
var image = new $.desaturate.Image(el);
el = image.replace(image.getCanvas($opt));
}
ret.push(el);
});
return this.pushStack(ret, "desaturate", "");
};
$.fn.desaturateImgFix = function(options) {
if (!$.browser.msie) {
return this;
}
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
var ret = [];
this.each(function() {
var $opt = $.extend(true, {}, _opt, $.metadata ? $(this).metadata() : {}, $(this).data('desaturate'));
if (!$(this).is("IMG")) {
ret.push(this);
} else {
var image = new $.desaturate.Image(this);
ret.push(image.replace(image.getIeFix($opt)));
}
});
return this.pushStack(ret, "desaturateImgFix", "");
};
});
// start new code
$(window).load(function() {
var paircount = 0;
var $thisSprite = $("#stacks_in_275_page3 img.imageStyle");
var reverse = "";
if ($.browser.msie)
{
// I need this only if desaturate png with aplha channel
$thisSprite = $thisSprite.desaturateImgFix();
}
if(reverse == ""){
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_275_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_275_page3color')
.hide()
});
}
else {
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_275_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_275_page3color')
$(this).hide()
});
}
$thisSprite.desaturate()
// add events for switch between color/gray versions
$('.spriteContainer').bind('mouseenter mouseleave', function(){
$(this).find('.stacks_in_275_page3pair').toggle().toggleClass('stacks_in_275_page3color');
});
});
return stack;
})(stacks.stacks_in_275_page3);
// Javascript for stacks_in_277_page3
// ---------------------------------------------------------------------
// Each stack has its own object with its own namespace. The name of
// that object is the same as the stack's id.
stacks.stacks_in_277_page3 = {};
// A closure is defined and assigned to the stack's object. The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_277_page3 = (function(stack) {
// When jQuery is used it will be available as $ and jQuery but only
// inside the closure.
var jQuery = stacks.jQuery;
var $ = jQuery;
/**
* Sprightly by http://www.doobox.co.uk integrated for rapidweaver from the code http://dev.artutkin.ru/desaturate/example.html
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() {
$.desaturate = {
defaults: {
'iefix': true, // autofix png for IE
'level': 1, // level of desaturation, ignored in IE
'rgb': [0.3333, 0.3333, 0.3333] // levels of RGB for compose grayscale, ignored in IE
},
customClass: 'js-desaturate-fixed' // usually no need to change this
};
$.desaturate.Image = function(obj) {
this.image = obj;
this.jImage = $(this.image);
this.src = this.jImage.attr('src');
this.isPNG = this.jImage.is("IMG[src$=.png]");
var styleWidth = new String(this.jImage.css('width')); styleWidth = styleWidth.replace(/px/, '');
var styleHeight = new String(this.jImage.css('height')); styleHeight = styleHeight.replace(/px/, '');
this.width = this.jImage.width() ? this.jImage.width() : (styleWidth ? styleWidth : this.jImage.attr('width'));
this.height = this.jImage.height() ? this.jImage.height() : (styleHeight ? styleHeight : this.jImage.attr('height'));
// var styles = ['padding', 'margin', 'border'];
// for (var i in styles) {
// this.imgCustomStyles += styles[i] + ':' + this.image.style[styles[i]]+';';
// this.image.style[styles[i]] = '';
// }
this.imgFilter = '';
if (this.image.style.filter) {
this.imgFilter = 'filter:'+this.image.style.filter+';';
this.image.style.filter = '';
}
this.image.style.width = '';
this.image.style.height = '';
this.imgId = this.jImage.attr('id') ? 'id="' + this.jImage.attr('id') + '" ' : '';
this.imgClass = 'class="' + this.jImage.attr('class') + ' ' + $.desaturate.customClass + '" ';
this.imgTitle = this.jImage.attr('title') ? 'title="' + this.jImage.attr('title') + '" ' : '';
this.imgAlt = this.jImage.attr('alt') ? 'alt="' + this.jImage.attr('alt') + '" ' : '';
this.imgStyles = this.image.style.cssText;
this.imgStyles += this.jImage.attr('align') ? 'float:' + this.jImage.attr('align') + ';' : '';
this.imgStyles += this.jImage.parent().attr('href') ? 'cursor:hand;' : '';
// nulled filter present as FILTER: in cssText
this.imgStyles = this.imgStyles.replace(/filter:/i,'');
this.imgCssSize = (this.width && this.height) ? 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;' : '';
};
$.desaturate.Image.prototype.replace = function(html) {
return $(html).replaceAll(this.image).get(0);
};
$.desaturate.Image.prototype.getCanvas = function(options) {
var canvasStr = '';
var canvas = $(canvasStr).get(0);
var canvasContext = canvas.getContext('2d');
var imgW = this.width;
var imgH = this.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(this.image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = imgPixels.data[i]*options.rgb[0] + imgPixels.data[i + 1]*options.rgb[1] + imgPixels.data[i + 2]*options.rgb[2];
imgPixels.data[i] = avg*options.level + imgPixels.data[i]*(1-options.level);
imgPixels.data[i + 1] = avg*options.level + imgPixels.data[i + 1]*(1-options.level);
imgPixels.data[i + 2] = avg*options.level + imgPixels.data[i + 2]*(1-options.level);
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas;
}
$.desaturate.Image.prototype.getIeFix = function(options) {
/* Some $ operations like fadeIn/Out can reset filter atribute, so we need 3 SPAN's: 1st for styles and
* correct work with $'s animation, 2rd for grayScale filter and last one for alpha image filter.
* Combined 2 filters in one span won't work too.
*/
var blockInit = 'display:block;background:transparent;padding:0;margin:0;';
var strNewHTML = '';
strNewHTML += '';
if (this.isPNG) {
strNewHTML += '';
strNewHTML += '';
} else {
strNewHTML += '![]()
';
}
strNewHTML += '';
strNewHTML += '';
return $(strNewHTML).get(0);
}
$.fn.desaturate = function(options) {
var ret = [];
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
this.each(function() {
var el = this;
var $opt = $.extend(true, {}, _opt, $.metadata ? $(el).metadata() : {}, $(el).data('desaturate'));
if ($.browser.msie && $(el).is("IMG") && $opt.iefix) {
// autofix IE images
var image = new $.desaturate.Image(el);
el = image.replace(image.getIeFix($opt));
}
if ($.browser.msie && ($(el).is("IMG") || $(el).hasClass($.desaturate.customClass))) {
// apply filter for IE
var el1 = el;
if ($(el).hasClass($.desaturate.customClass))
{
// if this element is our imgage fixed by pngIE - set grayscale filter to child span
el1 = $("SPAN", el).get(0);
}
el1.style.filter = (el1.style.filter ? el1.style.filter+' ' : '') +
'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}
if (!$.browser.msie && ($(el).is("IMG"))) {
// convert image to canvas
var image = new $.desaturate.Image(el);
el = image.replace(image.getCanvas($opt));
}
ret.push(el);
});
return this.pushStack(ret, "desaturate", "");
};
$.fn.desaturateImgFix = function(options) {
if (!$.browser.msie) {
return this;
}
var _opt = $.extend(true, {}, $.desaturate.defaults, options);
var ret = [];
this.each(function() {
var $opt = $.extend(true, {}, _opt, $.metadata ? $(this).metadata() : {}, $(this).data('desaturate'));
if (!$(this).is("IMG")) {
ret.push(this);
} else {
var image = new $.desaturate.Image(this);
ret.push(image.replace(image.getIeFix($opt)));
}
});
return this.pushStack(ret, "desaturateImgFix", "");
};
});
// start new code
$(window).load(function() {
var paircount = 0;
var $thisSprite = $("#stacks_in_277_page3 img.imageStyle");
var reverse = "";
if ($.browser.msie)
{
// I need this only if desaturate png with aplha channel
$thisSprite = $thisSprite.desaturateImgFix();
}
if(reverse == ""){
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_277_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_277_page3color')
.hide()
});
}
else {
// modified not to desaturate the clone
$thisSprite.each(function(){
$(this).addClass("stacks_in_277_page3pair")
.clone()
.attr('id', '')
.insertAfter($(this))
.addClass('stacks_in_277_page3color')
$(this).hide()
});
}
$thisSprite.desaturate()
// add events for switch between color/gray versions
$('.spriteContainer').bind('mouseenter mouseleave', function(){
$(this).find('.stacks_in_277_page3pair').toggle().toggleClass('stacks_in_277_page3color');
});
});
return stack;
})(stacks.stacks_in_277_page3);