// '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_1_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_1_page3 = {};

// A closure is defined and assined to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for refering
// to this object from elsewhere.
stacks.stacks_in_1_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;
	

// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// FADER STACK BY http://www.doobox.co.uk XXXXXXXX
// V-1.0.3 LAST UPDATED 24/3/2011 XXXXXXXXXXXXXXXX
// COPYRIGHT@2010 MR JG SIMPSON, TRADING AS DOOBOX
// ALL RIGHTS RESERVED XXXXXXXXXXXXXXXXXXXXXXXXXXX
// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


$(document).ready(function() {
	
	// get the main background image if one exists
	var bgimage = $('.stacks_in_1_page3background img').attr("src");


	// create the image array from the images the user has dropped in to the slides
    var FArray = $.makeArray($('.stacks_in_1_page3faderImageContainer img'));
    	$(FArray).hide();
	
	// set initial global variables
	var doowidth = 0;
	var dooheight = 0;
    var dooi = 0;
    var doox = 0;
    var dooy = 0;
    var stacks_in_1_page3total = FArray.length - 1;
    var stacks_in_1_page3delay = 1;
    var doofaderborder = 0 + "px solid #CCCCCC"
    var dootopmargin = 0;
    var dooleftmargin = 0;
    
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // get the size of the highest image in px
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    var dooheight = 0;
    $.each(FArray, function(index, height) {
    if($(height).height() > dooheight){
    dooheight = $(height).height();
    }
	});
	dooheight = dooheight +"px"; // add the px for ie
	
	
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	// get the size of the widest image in px
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    var doowidth = 0;
    $.each(FArray, function(index, width) {
    if($(width).width() > doowidth){
    doowidth = $(width).width();
    }
	});
	doowidth = doowidth + "px"; // add the px for ie
	
	
	 // remove the initial image container and images from the page(not needed)
    $('.stacks_in_1_page3faderImageContainer img').remove();
	
    
    // place the first slide right away, before the effect starts
    $(FArray[0]).appendTo(".stacks_in_1_page3faderbox").show();
    
 
    
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // setup the initial css for the faderbox
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    if("no" == "yes"){
		$(".stacks_in_1_page3faderbox").css("backgroundColor", "#FDFFFE");
	  }

   $(".stacks_in_1_page3faderbox").css({
    "background-image": "url("+bgimage+")",
    "padding":          "0px",
    "height":           dooheight + '',
    "width":            doowidth + '',
    "border":           doofaderborder + ''
});

   	 
   	 

    
    
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // The Main Fader Infinite Function XXXXX
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    function rotateFader(){
    // set up vars for negative centering margins (only applies if centering set in the hud to true)
    if("yes" == "yes"){
    dootopmargin = $(FArray[dooi]).height() / 2;
    dooleftmargin = $(FArray[dooi]).width() / 2;
    dootopmargin = "-" + Math.round(dootopmargin) + "px";
	dooleftmargin = "-" + Math.round(dooleftmargin) + "px";

    
    // take care of the css for each image as the images rotate (only applies if centering set in the hud to true)
    $(FArray[dooi]).css({
    	"position": "absolute",
    	"top": "50%" ,
    	"left": "50%",
    	"marginTop": dootopmargin,
    	"marginLeft": dooleftmargin
    });
    }
    
    
    
    
			$(FArray[dooi]).appendTo(".stacks_in_1_page3faderbox").delay(stacks_in_1_page3delay).fadeIn(2000, function() {
			

			
       	 		$(FArray[dooi]).delay(2000).fadeOut(2000, function() {
       	 		
       	 		// do something in a future upgrade, when fade out has ended.
     		 	});
     		 	
     			 if(dooi < stacks_in_1_page3total){dooi = dooi + 1;}
        		 else{dooi = 0;}
        		 stacks_in_1_page3delay = 2000;
        		 
        		 
        		 rotateFader();
        		 
      		});
    // set up vars for negative centering margins (only applies if centering set in the hud to true)
    if("yes" == "yes"){
    dootopmargin = $(FArray[dooi]).height() / 2;
    dooleftmargin = $(FArray[dooi]).width() / 2;
    dootopmargin = "-" + Math.round(dootopmargin) + "px";
	dooleftmargin = "-" + Math.round(dooleftmargin) + "px";

    
    // take care of the css for each image as the images rotate (only applies if centering set in the hud to true)
    $(FArray[dooi]).css({
    	"position": "absolute",
    	"top": "50%" ,
    	"left": "50%",
    	"marginTop": dootopmargin,
    	"marginLeft": dooleftmargin
    });
    $("#test").append("topmargin =  " + dootopmargin + "<br />leftmargin = " + dooleftmargin + "<br>" + "dooi" + dooi + "<br><br>");
    }
    
	}
	
	// initialize the fader function and rotate the images
    rotateFader();
    
});


// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// END DOOBOX FADER STACK XXXXXXXXXXXXXXXXXXXXX
// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	return stack;
})(stacks.stacks_in_1_page3);


// Javascript for stacks_in_8_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_8_page3 = {};

// A closure is defined and assined to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for refering
// to this object from elsewhere.
stacks.stacks_in_8_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;
	
                             
$(document).ready(function(){
            

$.fn.reverseOrder = function() {
	return this.each(function() {
		$(this).prependTo( $(this).parent() );
	});
};





            $('#stacks_in_8_page3 .listContainer').hover(function(){
					$(".sliderBox", this).stop().animate({top:'-60px'},{queue:false,duration:100});
				}, function() {
					$(".sliderBox", this).stop().animate({top:'0px'},{queue:false,duration:300});
                       
            });
                
                

               
               

       
});
            
     

 

	return stack;
})(stacks.stacks_in_8_page3);


// Javascript for stacks_in_19_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_19_page3 = {};

// A closure is defined and assined to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for refering
// to this object from elsewhere.
stacks.stacks_in_19_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;
	
                             
$(document).ready(function(){
            

$.fn.reverseOrder = function() {
	return this.each(function() {
		$(this).prependTo( $(this).parent() );
	});
};





            $('#stacks_in_19_page3 .listContainer').hover(function(){
					$(".sliderBox", this).stop().animate({top:'-60px'},{queue:false,duration:100});
				}, function() {
					$(".sliderBox", this).stop().animate({top:'0px'},{queue:false,duration:300});
                       
            });
                
                

               
               

       
});
            
     

 

	return stack;
})(stacks.stacks_in_19_page3);


// Javascript for stacks_in_37_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_37_page3 = {};

// A closure is defined and assined to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for refering
// to this object from elsewhere.
stacks.stacks_in_37_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 = '<canvas style="display:block;' + this.imgStyles + this.imgCssSize + '" ';               // amended changed from inline-block to block
    canvasStr += this.imgId + this.imgClass + this.imgTitle + this.imgAlt + '></canvas>';

    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 = '<span style="display:inline-block;' + this.imgStyles + this.imgCssSize + '" ';
    strNewHTML += this.imgId + this.imgClass + this.imgTitle + this.imgAlt + '>';
      strNewHTML += '<span style="' + blockInit + this.imgCssSize + this.imgFilter + '">';
      if (this.isPNG) {
        strNewHTML += '<span style="' + blockInit + this.imgCssSize;
        strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.src + '\', sizingMethod=\'crop\');">';
        strNewHTML += '</span>';
      } else {
        strNewHTML += '<img style="' + blockInit + this.imgCssSize + '" ' + this.imgTitle + this.imgAlt;
        strNewHTML += ' src="' + this.src + '">';
      }
      strNewHTML += '</span>';
    strNewHTML += '</span>';

    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_37_page3 img.imageStyle");
        var reverse = "$thisSprite.desaturate()";




        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_37_page3pair")
      .clone()
      .attr('id', '')
      .insertAfter($(this))
      .addClass('stacks_in_37_page3color')
      .hide()
    });
     
  }
     
 else {  
   
     // modified not to desaturate the clone
    $thisSprite.each(function(){
     $(this).addClass("stacks_in_37_page3pair")
      .clone()
      .attr('id', '')
      .insertAfter($(this))
      .addClass('stacks_in_37_page3color')
      $(this).hide()
    });
    }
    
     $thisSprite.desaturate()
     
     
         // add events for switch between color/gray versions
    $('.spriteContainer').bind('mouseenter mouseleave', function(){
     $(this).find('.stacks_in_37_page3pair').toggle().toggleClass('stacks_in_37_page3color');
    });
 
 

 });

	return stack;
})(stacks.stacks_in_37_page3);