Effect.TextHighlight = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({ startcolor: '#000000' }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    // Prevent executing on elements not in the layout flow
    if (this.element.getStyle('display')=='none') { this.cancel(); return; }
    // Disable background image during the effect
    this.oldStyle = { };
    if (!this.options.endcolor)
      this.options.endcolor = this.element.getStyle('color').parseColor('#ffffff');
    if (!this.options.restorecolor)
      this.options.restorecolor = this.element.getStyle('color');
    // init color calculations
    this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
    this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
  },
  update: function(position) {
    this.element.setStyle({color: $R(0,2).inject('#',function(m,v,i){
      return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
  },
  finish: function() {
    this.element.setStyle(Object.extend(this.oldStyle, {
      color: this.options.restorecolor
    }));
  }
});


Effect.MoveMargin = Class.create(Effect.Base, {

  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'relative'
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.originalLeft = parseFloat(this.element.getStyle('marginLeft') || '0');
    this.originalTop  = parseFloat(this.element.getStyle('marginTop')  || '0');
    if (this.options.mode == 'absolute') {
      this.options.x = this.options.x - this.originalLeft;
      this.options.y = this.options.y - this.originalTop;
    }
  },
  update: function(position) {
    this.element.setStyle({
      'marginLeft': (this.options.x  * position + this.originalLeft).round() + 'px',
      'marginTop':  (this.options.y  * position + this.originalTop).round()  + 'px'
    });
  }
});

Effect.MoveBG = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'relative'
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.originalPos = $w(this.element.getStyle('backgroundPosition'))

	this.originalPos = $w("0px -160px");

    this.originalLeft = parseFloat(this.originalPos[0].split("px")[0]);
    this.originalTop  = parseFloat(this.originalPos[1].split("px")[0]);

    if (this.options.mode == 'absolute') {
      this.options.x = this.options.x - this.originalLeft;
      this.options.y = this.options.y - this.originalTop;
    }
  },
  update: function(position) {
    this.element.setStyle({
      'backgroundPosition': (this.options.x  * position + this.originalLeft).round() + 'px ' + (this.options.y  * position + this.originalTop).round() +"px" });
  }
});

Element.addMethods(Effect.Methods);

function test() {

new Effect.MoveBG('test', {x:0,y:160, mode:'relative',duration:0.2});


}



var multicardCarousel = Class.create();

multicardCarousel.prototype = {


	// initialize()
    	// Constructor runs on completion of the Page loading.     	//

    	initialize: function() {

		this.unhighlightTimeout = new Array();
		this.highlightActive = false;
		this.highlightTimeout = new Array();
		this.thumbCount = 0;
		this.totalThumbs = "";
    		this.thumbWidth = 100;
    		this.thumbHeight = 160;
    		this.thumbBgDuration = 0.4;
    		this.selectedThumb = "";
    		this.viewableThumbs = 6;
    		this.thumbPosition = 0;
    		this.compareTotal = 3;
    		this.compareCount = 0;
    		this.compareBox = 0;
    		this.compareIDsString = "";
    		this.fadeSpeed = 0.3;
    		this.compareLightboxWidth = 900;
    		this.defaultStartColor = "#000000";
    		this.defaultEndColor = "#000000";

			this.findMulticardCarousel();

	},


	findMulticardCarousel: function() {

		if($("multicard-carousel")) {

			this.activateMulticardCarousel();

		}

	},

	activateCompareLink: function() {

		if($("compare-link")) {

			Event.observe($("compare-link"),"click", this.opencompareLightbox.bindAsEventListener(this));
			Event.observe($("compare-link"),"click", this.opencompareToolTip.bindAsEventListener(this));
			Event.observe($("compare-link"),"mouseout", this.closecompareToolTip.bindAsEventListener(this));

		}


	},

	activateMulticardCarousel: function() {

		if($$("#multicard-carousel-thumbs-window ul li a").length > 1) {

			$("multicard-carousel-thumbs-info").setStyle({'visibility':'visible'});
			this.findThumbs();
			this.writeArrows();
			this.activateSorting();
			this.writeCompareTable();
			this.activateCompareLink();
			this.checkCompareCount();
			this.activateThumbs("load", $$("#multicard-carousel-thumbs-window ul li a")[0])

		}

	},

	findThumbs: function() {

		this.totalThumbs = $$("#multicard-carousel-thumbs-window ul li a").length;

		$$("#multicard-carousel-thumbs-window ul li a").each(

			function(s) {


				this.idThumbs(s, this.thumbCount);
				this.onClickThumbs(s)
				this.writeCompareBoxes(s);
				this.checkThumbColor(s);

				this.thumbCount++;

			}.bind(this)

		);

	},

	idThumbs: function(element,count) {

		//element.writeAttribute("onclick","return false");
		element.writeAttribute("rel","card-detail-"+count);
		element.writeAttribute("href","#");


	},

	onClickThumbs: function(element) {

		Event.observe(element,"click", this.activateThumbs.bindAsEventListener(this, element));

	},

	checkThumbColor: function(element) {

		if(element.rev) {

			highlightValues = this.getHighlightValues(element.rev)

			if(highlightValues[0] != "")  {

			startColor = highlightValues[0]
			element.setStyle({'color':startColor})

			};


		}


	},

	writeCompareBoxes: function(element) {

		compareElement = $$("#"+element.id +" .compare")[0];
		compareElement.update("Compare");
		compareElement.addClassName("unselected");

		Event.observe(compareElement,"click", this.actionCompareBox.bindAsEventListener(this, element.id, compareElement));



	},

	actionCompareBox: function(e, id, compareElement) {

		elementClass = $(id).className;

		if(this.compareCount < this.compareTotal || this.compareBoxSelected(compareElement)) {

			this.swapCompareBox(compareElement, id, elementClass);

		} else {


		}

	},

	compareBoxSelected: function(element) {

		if(element.hasClassName("selected")) {

			return true;

		}

	},


	swapCompareBox: function(element, id, elementClass) {

		compareId = id.split("_")[0];

		if(element.hasClassName("unselected")) {

			this.addCompareElementId(id);
			this.activateCompareBox(id, elementClass);

			this.swapClassName(element,"unselected","selected");


			this.compareCount++;

		} else {

			this.removeCompareElementId(id);
			this.deactivateCompareBox(id, elementClass);

			this.swapClassName(element,"selected","unselected");

			this.compareCount--;




		}


		this.checkCompareCount();

	},

	checkCompareCount: function() {

		if (this.compareCount < 2) {

			$("compare-link").setStyle({'opacity':'0.3','cursor':'default'})

		} else {


			$("compare-link").setStyle({'opacity':'1','cursor':'pointer'})

		}

	},

	swapClassName: function(id,oldClass, newClass) {
		$(id).removeClassName(oldClass);
		$(id).addClassName(newClass);

	},

	addCompareElementId: function(id) {

		newId = id.split("_")[0];
		this.compareIDsString += newId+" "

	},

	removeCompareElementId: function(id) {

	    	newId = id.split("_")[0]
		newString = this.compareIDsString.replace(eval("/"+newId+"/i"), "")
		this.compareIDsString = newString

	},

	activateCompareBox: function(id, elementClass) {

		compareId = id.split("_")[0];

		cardDescription = $$("#"+ id +" .card-title")[0].innerHTML;
		compareElement = $$("#"+ id +" .compare")[0];
		comparisonId = elementClass;

		$$("#multicard-carousel-comparison-boxes ul li div")[this.compareBox].addClassName(elementClass).writeAttribute("id", compareId);
		$$("#multicard-carousel-comparison-boxes ul li div")[this.compareBox].down("span").update(cardDescription);


		Event.observe($$("#multicard-carousel-comparison-boxes ul li div")[this.compareBox],"click", this.actionCompareBox.bindAsEventListener(this, id, compareElement));

		this.compareBox++;

	},

	deactivateCompareBox: function(id, elementClass) {

		this.compareBox--;
		comparisonId = elementClass;

		$$("#multicard-carousel-comparison-boxes ul li div").each(function(s,i) {

			if (s.hasClassName(comparisonId)) {

				s.writeAttribute("id","");
				s.down("span").update();
				s.removeClassName(comparisonId);
				cardDescription = $$("#"+ id +" .card-title")[0];
				Event.stopObserving(s);

				if(i < this.compareBox) {

					for(j=i;j<this.compareBox;j++) {

						k = j+1;
						this.shiftCompareBoxes($$("#multicard-carousel-comparison-boxes ul li div")[j],$$("#multicard-carousel-comparison-boxes ul li div")[k])

					}
				}

			}

		}.bind(this))

	},

	shiftCompareBoxes: function(current,nextElement) {

		classToMove = nextElement.className;
		copyToMove = nextElement.down("span").innerHTML;
		nextRel = nextElement.id;

		compareElement = $$("#"+ nextRel +"_thumb .compare")[0];

		nextElement.removeClassName(classToMove).writeAttribute("id", "");
		nextElement.down("span").update();
		current.addClassName(classToMove).writeAttribute("id",nextRel);
		current.down("span").update(copyToMove);

		Event.stopObserving(nextElement);
		Event.stopObserving(current);

		Event.observe(current,"click", this.actionCompareBox.bindAsEventListener(this, nextRel+"_thumb", compareElement));


	},

	activateThumbs: function(e,element) {

		startColor = this.defaultStartColor;
		endColor = this.defaultEndColor;
		selectedStartColor = this.defaultStartColor;
		selectedEndColor = this.defaultEndColor;

		detailId = element.rel;

		if(element.rev) {

			highlightValues = this.getHighlightValues(element.rev)

			if(highlightValues[0] != "")  { startColor = highlightValues[0] };
			if(highlightValues[1] != "")  { endColor = highlightValues[1] };

		}


		this.moveCarousel(detailId);

		if(element.id != this.selectedThumb.id) {

			if (startColor != endColor) {

				new Effect.TextHighlight(element, {'startcolor':startColor,'endcolor':endColor,'restorecolor':endColor,'duration':this.thumbBgDuration});

			}

			new Effect.MoveBG(element, {'x':0,'y':this.thumbHeight, 'mode':'relative','duration':this.thumbBgDuration});

			if(this.selectedThumb != "") {


			if(this.selectedThumb.rev) {

				selectedHighlightValues = this.getHighlightValues(this.selectedThumb.rev)

				if(selectedHighlightValues[0] != "") { selectedStartColor = selectedHighlightValues[0] };
				if(selectedHighlightValues[1] != "") { selectedEndColor = selectedHighlightValues[1] };

			}

			if (selectedEndColor != selectedStartColor) {

				new Effect.TextHighlight(this.selectedThumb, {'startcolor':selectedEndColor,'endcolor':selectedStartColor,'restorecolor':selectedStartColor,'duration':this.thumbBgDuration});

			}

			new Effect.MoveBG(this.selectedThumb, {'x':0,'y':-this.thumbHeight, 'mode':'relative','duration':this.thumbBgDuration});

			}

			this.selectedThumb = element;

		}

	},

	getHighlightValues: function(stringValue) {

			stringValueSpl = stringValue.split("[")[1].split("]")[0].split(",");
			return stringValueSpl;

	},

	moveCarousel: function(id) {

		currentDetailWindowPos = $("multicard-carousel-detail-window").getStyle("margin-left");

		if (currentDetailWindowPos == null) {currentDetailWindowPos = 0}

		currentDetailWindowPosInt = parseFloat(currentDetailWindowPos);

		detailXPos = parseFloat($(id).positionedOffset()[0]);
		moveDistance = parseInt(currentDetailWindowPosInt - detailXPos);

		new Effect.Move('multicard-carousel-detail-window', {'x':moveDistance, 'mode':'absolute','duration':this.thumbBgDuration});


	},

	writeArrows: function() {

		prevArrowContainer = $("multicard-carousel-thumbs-left");
		nextArrowContainer = $("multicard-carousel-thumbs-right");


		if(this.totalThumbs > this.viewableThumbs) {

			if (this.thumbPosition >= 1) {


				prevArrow = new Element("a", { 'class':'prev-arrow', 'id':'prev-arrow'}).update("<span><<</span>");
				prevArrow.writeAttribute("onclick", "return false");
				prevArrow.onclick = this.moveThumbs.bindAsEventListener(this, this.thumbPosition-1);

				prevArrowContainer.update(prevArrow)

			} else {


				prevArrow = new Element("div", { 'class':'prev-arrow', 'id':'prev-arrow'}).update("<span><<</span>")
				prevArrowContainer.update(prevArrow)


			}


			if (this.thumbPosition < (this.totalThumbs - this.viewableThumbs)) {


				nextArrow = new Element("a", { 'class':'next-arrow', 'id':'next-arrow'}).update("<span><<</span>")
				nextArrow.writeAttribute("onclick", "return false");
				nextArrow.onclick = this.moveThumbs.bindAsEventListener(this, this.thumbPosition+1);

				nextArrowContainer.update(nextArrow)

			} else {


				nextArrow = new Element("div", { 'class':'next-arrow', 'id':'next-arrow'}).update("<span><<</span>")
				nextArrowContainer.update(nextArrow)


			}

		} else {

			$("multicard-carousel-thumbs-left").remove();
			$("multicard-carousel-thumbs-right").remove();
			$("multicard-carousel-thumbs-center").setStyle({'width':'680px'})


		}



	},

	moveThumbs: function(e,thumbPosition) {

		thumbElement = $$("#multicard-carousel-thumbs-window ul li a")[thumbPosition]
		thumbElementXPos = parseFloat(thumbElement.positionedOffset()[0])

		currentThumbWindowPos = $("multicard-carousel-thumbs-window").getStyle("margin-left");
		currentThumbWindowPosInt = parseFloat(currentThumbWindowPos);

		moveDistance = -thumbElementXPos;

		new Effect.MoveMargin('multicard-carousel-thumbs-window', {x:moveDistance, mode:'absolute',duration:this.thumbBgDuration, afterFinish:function() { this.thumbPosition = thumbPosition }.bind(this)});

		this.thumbPosition = thumbPosition
		this.writeArrows();

	},

	getThumbPosition: function(id) {

		thumbNo = parseInt(id.substr(id.length-2,1))

		return thumbNo

	},

	activateSorting: function() {

		$$("#namelist li").each(function(s) {

			elementClass = s.className;
			Event.observe(s,"click",this.sortCards.bindAsEventListener(this,elementClass))


		}.bind(this))

	},

	sortCards: function(e,keyword) {



		$$("#card-thumb-list li").each(function(s){

			s.removeClassName("fade");

			if(!s.hasClassName(keyword)) {

				s.addClassName("fade");

				new Element.insert('card-thumb-list', {bottom:s});

			}

		}.bind(this))


	},

	writeCompareTable: function() {

		var th = this;
		(function(){
			var ids =
				'compareContentOverlay compareLightbox compareLightboxContainer compareLightboxContentContainer compareLightboxContent compareLightboxTitle compareLightboxClose compareLightboxLoading';
			$w(ids).each(function(id){ th[id] = $(id); });
		}).defer();


		var objBody = $$('body')[0];

		var clearer = new Element("div", {'class':'clear'});
		var compareContentOverlay = new Element("div", {'id':'compareContentOverlay'}).update("&nbsp;");
		var compareLightbox = new Element("div", {'id':'compareLightbox'});
		var compareLightboxContainer = new Element("div", {'id':'compareLightboxContainer'});
		var compareLightboxClose = new Element("div", {'id':'compareLightboxClose'}).update("<div>Close</div>");
		var compareLightboxContentContainer = new Element("div", {'id':'compareLightboxContentContainer'});
		var compareLightboxContent = new Element("div", {'id':'compareLightboxContent'});
		var compareLightboxHeader = new Element("div", {'id':'compareLightboxHeader'});
	   	var tableElement = new Element('table',{'cellPadding':'0','cellSpacing':'0','id':'compare-table'}).update(this.writeCompareTableRow(13));

		new Element.insert(objBody, {bottom:compareContentOverlay});

		new Element.insert(compareLightboxContainer,{bottom:compareLightboxContentContainer});
		new Element.insert(compareLightboxHeader,{bottom:compareLightboxClose});
		new Element.insert(compareLightboxContentContainer,{bottom:compareLightboxHeader});
		new Element.insert(compareLightboxContentContainer,{bottom:compareLightboxContent});
		new Element.insert(compareLightbox,{bottom:compareLightboxContainer});
		new Element.insert(objBody,{bottom:compareLightbox});
		new Element.insert(compareLightboxContent,{bottom:tableElement})

		compareLightbox.hide();

		compareContentOverlay.observe('click', (function() { this.end(); }).bind(this));
		compareLightboxClose.observe('click', (function() { this.end(); }).bind(this));


	},


	writeCompareTableRow: function(rows) {


		rowElmt = ""

		for(i=0;i<rows;i++) {

			rowElmt+="<tr id='table-row-"+ i +"'></tr>"

		}

		return rowElmt;


	},

	//
	//  end()
	//
	end: function() {

		new Effect.Fade(this.compareLightbox, { duration: this.fadeSpeed });
		new Effect.Fade(this.compareContentOverlay, { duration: this.fadeSpeed });

		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
	},


	opencompareLightbox: function(event) {

		if(this.compareCount < 2) {

		return false

		}


		Event.observe(window,"resize", this.adjustOverlayDimensions.bindAsEventListener(this,this.compareContentOverlay));
		Event.observe(window,"scroll", this.adjustOverlayDimensions.bindAsEventListener(this,this.compareContentOverlay));

		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

		this.adjustOverlayDimensions("none",this.compareContentOverlay)

		var arrayPageSize = this.getPageSize();

		posY = parseInt($$('body')[0].positionedOffset()[1]) + 40;
		posX = (arrayPageSize[0] / 2) - this.compareLightboxWidth / 2;
		$(this.compareLightbox).setStyle({'top': posY+'px','left':posX+'px'});

		this.getContentFromAJAX()

		new Effect.Appear(this.compareContentOverlay, { duration: this.fadeSpeed, from: 0.0, to: 0.7, afterFinish: function(){$(this.compareLightbox).show()}.bind(this) });



	},

	opencompareToolTip: function(event) {

		if(this.compareCount < 2) {

			posX = Event.pointerX(event) - 22;
			posY = Event.pointerY(event) - 80;

			var compareTooltip = new Element("div", {'id':'compareToolTip'}).update("<div>Please select <strong>up to three cards</strong> from the list opposite to compare</div>");

			compareTooltip.setStyle({'left':posX+'px','top':posY+'px'})

			var objBody = $$('body')[0];
			new Element.insert(objBody, {bottom:compareTooltip});

		}



	},

	closecompareToolTip: function(event) {

		if($("compareToolTip")) {

			$("compareToolTip").remove();

		}


	},

	adjustOverlayDimensions: function(e,element) {

		var arrayPageSize = this.getPageSize();
		element.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });


		pagePos = $$('body')[0].positionedOffset();
		this.compareContentOverlay.setStyle({'top': pagePos[0]+'px','left':pagePos[1]+'px'});


	},


	getContentFromAJAX : function() {

		cardStr = this.compareIDsString;

		cardArr = $w(cardStr);

		tableHeaders = new Array();
		tableHeaders[0] = "<td class=\"col-header\"></td>";
		tableHeaders[1] = "<th class=\"row-header\" scope=\"row\">This card would suit you if...</th>";
		tableHeaders[2] = "<th class=\"row-header\" scope=\"row\">Promotional balance transfer rate</th>";
		tableHeaders[3] = "<th class=\"row-header\" scope=\"row\">Promotional purchase rate</th>";
		tableHeaders[4] = "<th class=\"row-header\" scope=\"row\">Representative<br/>rate</th>";
		tableHeaders[5] = "<th class=\"row-header\" scope=\"row\">Cash back</th>";
		tableHeaders[6] = "<th class=\"row-header\" scope=\"row\">Rewards</th>";
		tableHeaders[7] = "<th class=\"row-header\" scope=\"row\">Card type</th>";
		tableHeaders[8] = "<th class=\"row-header\" scope=\"row\">Interest free period</th>";
		tableHeaders[9] = "<th class=\"last-row\" scope=\"row\">Next steps</th>";

		var rand = new Date;
	   	var url = "/virgin/assets/xml/multicard.xml?r="+rand.toGMTString();
;

	   	new Ajax.Request(url, {

		method: 'get',
		requestHeaders:["Content-type","text/xml"],
		onSuccess: function(transport) {

			xmlDoc = transport.responseXML

			cards = xmlDoc.getElementsByTagName("card")

			$$("#compare-table tr").each(

				function(s,i){
					s.update();
					s.insert({bottom:tableHeaders[i]});
					//Event.observe($(s.id),"mouseover", this.highlightRow.bindAsEventListener(this,s,'#FFFFFF','#FFFFCC'))
					//Event.observe($(s.id),"mouseout", this.unhighlightRow.bindAsEventListener(this,s,'#FFFFCC','#FFFFFF'))


				}.bind(this)
			);

			tableRows = $$("#compare-table tr")



			for (j=0;j<cardArr.length;j++) {

				for (i=0;i<cards.length; i++) {

					cardID = cards[i].getElementsByTagName("cardID")[0].firstChild.nodeValue;

					if(cardArr[j] == cardID) {

						cardName = this.getNodeContent(this,cards[i].getElementsByTagName("cardname")[0]);
						cardImg = this.getNodeContent(this,cards[i].getElementsByTagName("img")[0]);

						tableRows[0].insert({bottom:"<th class=\"col-header\" scope=\"col\"><img src=\""+ cardImg +"\" alt=\""+ cardName +"\"/><h3>"+ cardName +"</h3></th>"})

						cardSuit = this.getNodeContent(this,cards[i].getElementsByTagName("cardsuit")[0]);
						tableRows[1].insert({bottom:"<td class=\"card-cell\">"+ cardSuit +"</td>"})

						btRate = this.getNodeContent(this,cards[i].getElementsByTagName("btrate")[0]);
						tableRows[2].insert({bottom:"<td class=\"card-cell\">"+ btRate +"</td>"})

						purchaseRate = this.getNodeContent(this,cards[i].getElementsByTagName("purchaserate")[0]);
						tableRows[3].insert({bottom:"<td class=\"card-cell\">"+ purchaseRate +"</td>"})

						typicalRate = this.getNodeContent(this,cards[i].getElementsByTagName("typicalrate")[0]);
						tableRows[4].insert({bottom:"<td class=\"card-cell\">"+ typicalRate +"</td>"})

						cashback = this.getNodeContent(this,cards[i].getElementsByTagName("cashback")[0]);
						tableRows[5].insert({bottom:"<td class=\"card-cell\">"+ cashback +"</td>"})

						rewards = this.getNodeContent(this,cards[i].getElementsByTagName("rewards")[0]);
						tableRows[6].insert({bottom:"<td class=\"center card-cell\">"+ rewards+"</td>"})

						cardType = this.getNodeContent(this,cards[i].getElementsByTagName("cardType")[0]);
						tableRows[7].insert({bottom:"<td class=\"card-cell\">"+ cardType+"</td>"})

						interestFree = this.getNodeContent(this,cards[i].getElementsByTagName("interestfree")[0]);
						tableRows[8].insert({bottom:"<td class=\"card-cell\">"+ interestFree +"</td>"})

						findOutMore = this.getNodeContent(this,cards[i].getElementsByTagName("findoutmore")[0]);
						apply = this.getNodeContent(this,cards[i].getElementsByTagName("apply")[0]);

						findOutMoreElmt = "<a class=\"compare-find-out-more-link\" href=\""+ findOutMore +"\">More info</a>"
						applyElmt = "<a class=\"compare-apply-link\" href=\""+ apply +"\"><span>Apply</span></a>"

						tableRows[9].insert({bottom:"<td class=\"cta card-cell\">"+ findOutMoreElmt + applyElmt +"</td>"})

					}

				}

			}


		}.bind(this)

	   });

	},

		getNodeContent: function(e,element) {

			nodeContent = ""

			for(k=0;k<element.childNodes.length;k++) {

				nodeContent += element.childNodes[k].nodeValue

			}



			return nodeContent;


	},

	highlightRow: function(e, element,startHex,endHex) {

			window.clearTimeout(this.unhighlightTimeout[element.id]);

			if(!this.highlightTimeout[element.id] == true) {

				this.highlightTimeout[element.id] = true;

				new Effect.Highlight(element.id, {'startcolor':startHex,'endcolor':endHex,'restorecolor':endHex,'duration':this.thumbBgDuration});

			}

	},

	unhighlightRow: function(e, element,startHex,endHex) {

			this.unhighlightTimeout[element.id] = setTimeout(function() {

				this.highlightTimeout[element.id] = null;
				new Effect.Highlight(element.id, {'startcolor':startHex,'endcolor':endHex,'restorecolor':endHex,'duration':this.thumbBgDuration});

			}.bind(this), 200);

	},

	//  getPageSize()
	//
	getPageSize: function() {

		 var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;

		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth;
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else {
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){
			pageWidth = xScroll;
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}


}

document.observe('dom:loaded', function () {

new multicardCarousel();

});