/*
JUITTER 1.0.0 - 22/07/2009 - http://juitter.com
BY RODRIGO FANTE - http://rodrigofante.com

** jQuery 1.2.* or higher required

Juitter is distributed under the MIT License
Read more about the MIT License --> http://www.opensource.org/licenses/mit-license.php

This script is just a beta test version, download and use it at your own risk.
The Juitter developer shall have no responsability for data loss or damage of any kind by using this script.
*/
(function($j) {
	var conf = {},
		// JUITTER DEFAULT CONFIGURATION ========================
		// YOU CAN CHANGE THE DYNAMIC VARS ON CALLING THE start method, see the system.js for more information about it.

		numMSG = 20; // set the number of messages to be show
		containerDiv="juitterContainer", // //Set a place holder DIV which will receive the list of tweets example <div id="juitterContainer"></div>
		loadMSG="Loading messages...", // Loading message, if you want to show an image, fill it with "image/gif" and go to the next variable to set which image you want to use on
		imgName="loader.gif", // Loading image, to enable it, go to the loadMSG var above and change it to "image/gif"
		readMore="Read it on Twitter", // read more message to be show after the tweet content
		nameUser="image" // insert "image" to show avatar of "text" to show the name of the user that sent the tweet
		live:"live-20", //optional, disabled by default, the number after "live-" indicates the time in seconds to wait before request the Twitter API for updates, I do not recommend to use less than 60 seconds.
		// end of configuration

		// some global vars
		aURL="";msgNb=1;
		var mode,param,time,lang,contDiv,loadMSG,gifName,numMSG,readMore,fromID,ultID,filterWords;
		var running=false;
		// Twitter API Urls
		apifMultipleUSER = "http://search.twitter.com/search.json?from%3A";
		apifUSER = "http://search.twitter.com/search.json?q=from%3A";
		apitMultipleUSER = "http://search.twitter.com/search.json?to%3A";
		apitUSER = "http://search.twitter.com/search.json?q=to%3A";
		apiSEARCH = "http://search.twitter.com/search.json?q=";
	$j.Juitter = {
		registerVar: function(opt){
			mode=opt.searchType;
			param=opt.searchObject;
			timer=opt.live;
			lang=opt.lang?opt.lang:"";
			contDiv=opt.placeHolder?opt.placeHolder:containerDiv;
			loadMSG=opt.loadMSG?opt.loadMSG:loadMSG;
			gifName=opt.imgName?opt.imgName:imgName;
			numMSG=opt.total?opt.total:numMSG;
			readMore=opt.readMore?opt.readMore:readMore;
			fromID=opt.nameUser?opt.nameUser:nameUser;
			filterWords=opt.filter;
			openLink=opt.openExternalLinks?"target='_blank'":"";
		},
		start: function(opt) {
			ultID=0;
			if($j("#"+contDiv)){
				this.registerVar(opt);
				// show the load message
				this.loading();
				// create the URL  to be request at the Twitter API
				aURL = this.createURL();
				// query the twitter API and create the tweets list
				this.conectaTwitter(1);
				// if live mode is enabled, schedule the next twitter API query
				if(timer!=undefined&&!running) this.temporizador();
			}
		},
		update: function(){
			this.conectaTwitter(2);
			if(timer!=undefined) this.temporizador();
		},
		loading: function(){
			if(loadMSG=="image/gif"){
				$j("<img></img>")
					.attr('src', gifName)
					.appendTo("#"+contDiv);
			} else $j("#"+contDiv).html(loadMSG);
		},
		createURL: function(){
			var url = "";
			jlg=lang.length>0?"&lang="+lang:jlg="";
			var seachMult = param.search(/,/);
			if(seachMult>0) param = "&ors="+param.replace(/,/g,"+");
			if(mode=="fromUser" && seachMult<=0) url=apifUSER+param;
			else if(mode=="fromUser" && seachMult>=0) url=apifMultipleUSER+param;
			else if(mode=="toUser" && seachMult<=0) url=apitUSER+param;
			else if(mode=="toUser" && seachMult>=0) url=apitMultipleUSER+param;
			else if(mode=="searchWord") url=apiSEARCH+param+jlg;
			url += "&rpp="+numMSG;
			return url;
		},
		delRegister: function(){
			// remove the oldest entry on the tweets list
			if(msgNb>=numMSG){
				$j(".comment").each(
					function(o,elemLI){
						if(o>=numMSG) $j(this).hide("slow");
					}
				);
			}
		},
		conectaTwitter: function(e){
			// query the twitter api and create the tweets list
			$j.ajax({
				url: aURL,
				type: 'GET',
				dataType: 'jsonp',
				timeout: 1000,
				error: function(){ $j("#"+contDiv).html("fail#"); },
				success: function(json){
					if(e==1) $j("#"+contDiv).html("");
					$j.each(json.results,function(i,item) {
						if(e==1 || (i<numMSG && item.id>ultID)){
							if(i==0){


								tultID = item.id;
								$j("<ul></ul>")
									.attr('id', 'twittList'+ultID)
									.attr('class','twittList')
									.prependTo("#"+contDiv);
							}
							if (item.text != "undefined") {
								var link =  "http://twitter.com/"+item.from_user+"/status/"+item.id;

								var tweet = $j.Juitter.filter(item.text);

								if(fromID=="image") mHTML="<a href='http://www.twitter.com/"+item.from_user+"'><img src='"+item.profile_image_url+"' alt='"+item.from_user+"' class='juitterAvatar' /></a> "+$j.Juitter.textFormat(tweet)+" -| <span class='time'>"+item.created_at+"</span> |- <a href='" + link + "' class='JRM' "+openLink+">"+readMore+"</a>";
								else mHTML="<a href='http://www.twitter.com/"+item.from_user+"'>@"+item.from_user+":</a> "+$j.Juitter.textFormat(tweet)+" -| <span class='time'>"+item.created_at+"</span> |-  <a href='" + link + "' "+openLink+">"+readMore+"</a>";

								$j("<li></li>")
									.html(mHTML)
									.attr('id', 'twittLI'+msgNb)
									.attr('class', 'comment') //comment
									.appendTo("#twittList"+ultID);

								$j('#twittLI'+msgNb).hide();
								$j('#twittLI'+msgNb).show("slow");

								// remove old entries
								$j.Juitter.delRegister();
								msgNb++;
							}
						}
					});
					ultID=tultID;
				}
			});
		},
		filter: function(s){
			if(filterWords){
				searchWords = filterWords.split(",");
				if(searchWords.length>0){
					cleanHTML=s;
					$j.each(searchWords,function(i,item){
						sW = item.split("->").length>0 ? item.split("->")[0] : item;
						rW = item.split("->").length>0 ? item.split("->")[1] : "";
						regExp=eval('/'+sW+'/gi');
						cleanHTML = cleanHTML.replace(regExp, rW);
					});
				} else cleanHTML = s;
				return cleanHTML;
			} else return s;
		},
		textFormat: function(texto){
			//make links
			var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
			texto = texto.replace(exp,"<a href='$1' class='extLink' "+openLink+">$1</a>");
			var exp = /[\@]+([A-Za-z0-9-_]+)/ig;
			texto = texto.replace(exp,"<a href='http://twitter.com/$1' class='profileLink'>@$1</a>");
			var exp = /[\#]+([A-Za-z0-9-_]+)/ig;
			texto = texto.replace(exp,"<a href='http://juitter.com/#$1' onclick='$j.Juitter.start({searchType:\"searchWord\",searchObject:\"$1\"});return false;' class='hashLink'>#$1</a>");
			// make it bold
			if(mode=="searchWord"){
				tempParam = param.replace(/&ors=/,"");
				arrParam = tempParam.split("+");
				$j.each(arrParam,function(i,item){
					regExp=eval('/'+item+'/gi');
					newString = new String(' <b>'+item+'</b> ');
					texto = texto.replace(regExp, newString);
				});
			}
			return texto;
		},
		temporizador: function(){
			// live mode timer
			running=true;
			aTim = timer.split("-");
			if(aTim[0]=="live" && aTim[1].length>0){
				tempo = aTim[1]*1000;
				setTimeout("$j.Juitter.update()",tempo);
			}
		}
	};
})(jQuery);




/*
 * jQuery SuperBox! 0.9.1
 * Copyright (c) 2009 Pierre Bertet (pierrebertet.net)
 * Licensed under the MIT (MIT-LICENSE.txt)
 *
 * TODO :
 * - Document.load if init is before </body> against IE crash.
 * - Animations
 * - Image / Gallery mode : display a legend
*/
;(function($){

	// Local variables
	var $overlay, $wrapper, $container, $superbox, $closeBtn, $loading, $nextprev, $nextBtn, $prevBtn, settings,

	// Default settings
	defaultSettings = {
		boxId: "superbox",
		boxClasses: "pop-message",
		overlayOpacity: .8,
		boxWidth: "600",
		boxHeight: "400",
		loadTxt: "Espera un momento por favor...	",
		closeTxt: "<img src=\"/images/forms/btn_cerrar.gif\" />",
		prevTxt: "Previous",
		nextTxt: "Next",
		beforeShow: function(){}
	},



	galleryGroups = {},
	galleryMode = false,
	hideElts = $j([]);

	// Init dispatcher
	$.superbox = function(){

		// Settings
		settings = $.extend({}, defaultSettings, $.superbox.settings);

		// If IE6, select elements to hide
		if ($.browser.msie && $.browser.version < 7){
			hideElts = hideElts.add("select");
		}

		// Create base elements
		createElements();

		// Dispatch types
		dispatch();
	};

	// Dispatch types
	function dispatch(){

		// Match all superbox links
		$j("a[rel^=superbox],area[rel^=superbox]").each(function(){
			// Optimisation
			var $this = $j(this),
			relAttr = $this.attr("rel"),

			// Match type (ex : superbox[gallery#my_id.my_class][my_gallery] > gallery
			type = relAttr.match(/^superbox\[([^#\.\]]+)/)[1],

			// Match additionnal classes or IDs (#xxx.yyy.zzz)
			boxCurrentAttrs = relAttr.replace("superbox", "").match(/([#\.][^#\.\]]+)/g) || [],

			// Box ID and classes
			newBoxId = settings.boxId,
			newBoxClasses = settings.boxClasses;

			// Additionnal rel settings
			this._relSettings = relAttr.replace("superbox["+ type + boxCurrentAttrs.join("") +"]", "");

			// Redefine settings
			$.each(boxCurrentAttrs, function(i, val){ // each class or id
				if (val.substr(0,1) == "#"){
					newBoxId = val.substr(1);
				}
				else if (val.substr(0,1) == "."){
					newBoxClasses += " " + val.substr(1);
				}
			});

			// Call type method
			if (type.search(/^image|gallery|iframe|content|ajax$/) != -1) {
				$this.superbox(type, {boxId: newBoxId, boxClasses: newBoxClasses});
			}
		});
	};

	/*-- Superbox Method --*/
	$.fn.superbox = function(type, curSettings){
		curSettings = $.extend({}, settings, curSettings);
		$.superbox[type](this, curSettings);
	};

	/*-- Types --*/
	$.extend($.superbox, {

		// Image
		image: function($elt, curSettings, type){

			var relSettings = getRelSettings($elt.get(0)),
			dimensions = false;

			// Extra settings
			if (relSettings && type == "gallery")
				dimensions = relSettings[1];
			else if (relSettings)
				dimensions = relSettings[0];



			// On click event
			$elt.click(function(e){
				e.preventDefault();


				prepareBox();

				// "Prev / Next" buttons
				if (type == "gallery")
					nextPrev($elt, relSettings[0]);

				// Loading anim
				initLoading(function(){

					// Dimensions
					var dims = false,

					// Image
					$curImg;

					if (dimensions) {
						dims = dimensions.split("x");
					}

					// Image
					$curImg = $j('<img src="'+ $elt.attr("href") +'" title="'+ ($elt.attr("title") || $elt.text()) +'" />');

					// On image load
					$curImg.load(function(){

						// Resize
						resizeImageBox($curImg, dims);

						// Id and Classes
						setBoxAttrs({boxClasses: "image " + curSettings.boxClasses, boxId: curSettings.boxId});

						// Show box
						showBox();

					}).appendTo($innerbox);

				});

			});
		},

		// Gallery
		gallery: function($elt, curSettings){

			// Extra settings
			var extraSettings = getRelSettings($elt.get(0));

			// Create group
			if(!galleryGroups[extraSettings[0]]) {
			    galleryGroups[extraSettings[0]] = [];
			}

			// Add element to current group
			galleryGroups[extraSettings[0]].push($elt);

			$elt.get(0)._superboxGroupKey = (galleryGroups[extraSettings[0]].length - 1);

			// Image Box
			$.superbox["image"]($elt, curSettings, "gallery");
		},

		// iframe
		iframe: function($elt, curSettings){

			// Extra settings
			var extraSettings = getRelSettings($elt.get(0));

			// On click event
			$elt.click(function(e){
				e.preventDefault();
				$j(window).scrollTop(0);

				prepareBox();

				// Loading anim
				initLoading(function(){

					// Dimensions
					var dims = false,

					// iframe
					$iframe;

					if (extraSettings) {
						dims = extraSettings[2].split("x");
					}

					curSettings = $.extend({}, curSettings, {
						boxWidth: dims[0] || curSettings.boxWidth,
						boxHeight: dims[1] || curSettings.boxHeight
					});

					// iframe
					$iframe = $j('<iframe src="'+ $elt.attr("href") +'" name="'+ $elt.attr("href") +'" frameborder="0" scrolling="auto" hspace="0"></iframe>');

					// On iframe load
					$iframe.load(function(){

						// Specified dimensions
						$superbox.width( curSettings.boxWidth+"px" );
						$innerbox.height( curSettings.boxHeight+"px" );

						// Id and Classes
						setBoxAttrs({boxClasses: "iframe " + curSettings.boxClasses, boxId: curSettings.boxId});

						// Show box
						showBox();
//						alert($superbox.css('top'))
					}).appendTo($innerbox);
				});

			});
		},

		// Content
		content: function($elt, curSettings){
			// Extra settings
			var extraSettings = getRelSettings($elt.get(0));

			// On click event
			$elt.click(function(e){
				e.preventDefault();

				prepareBox();

				// Loading anim
				initLoading(function(){

					// Dimensions
					var dims = false;
					if (extraSettings)
						dims = extraSettings[0].split("x");

					curSettings = $.extend({}, curSettings, {
						boxWidth: dims[0] || curSettings.boxWidth,
						boxHeight: dims[1] || curSettings.boxHeight
					});

					// Specified dimensions
					$superbox.width( curSettings.boxWidth+"px" );
					$innerbox.height( curSettings.boxHeight+"px" );

					$j($elt.attr('href')).clone().appendTo($innerbox).show();

					// Id and Classes
					setBoxAttrs({boxClasses: "content " + curSettings.boxClasses, boxId: curSettings.boxId});

					// Show box
					showBox();
				});

			});
		},

		// Ajax
		ajax: function($elt, curSettings){

			// Extra settings
			var extraSettings = getRelSettings($elt.get(0));
			// On click event
			$elt.click(function(e){
				e.preventDefault();

				prepareBox();

				// Loading anim
				initLoading(function(){

					// Dimensions
					var dims = false;
					if (extraSettings && extraSettings[0]) {
						dims = extraSettings[0].split("x");
					}


					// Extend default dimension settings
					curSettings = $.extend({}, curSettings, {
						boxWidth: dims[0] || curSettings.boxWidth,
						boxHeight: dims[1] || curSettings.boxHeight
					});

					// Specified dimensions
					$superbox.width( curSettings.boxWidth+"px" );
					$innerbox.height( curSettings.boxHeight+"px" );

					$.get( $elt.attr("hrefAjax"), function(data){
						$j(data).appendTo($innerbox);
					});

					// Id and Classes
					setBoxAttrs({boxClasses: "ajax " + curSettings.boxClasses, boxId: curSettings.boxId});

					// Show box
					showBox();
				});
			});
		}
	});


	// Get extra settings in rel attribute
	function getRelSettings(elt){
		return elt._relSettings.match(/([^\[\]]+)/g);
	};

	// Set image box dimensions
	function resizeImageBox($curImg, dims){

		// Auto
		$superbox.width($curImg.width() + ($innerbox.css("paddingLeft").slice(0,-2)-0) + ($innerbox.css("paddingRight").slice(0,-2)-0)); // Padding ajouté, pour corriger le problème de définition padding sur $innerbox
		$innerbox.height($curImg.height());

		// Specified
		if (dims && dims[0] != "") {
			$superbox.width(dims[0] + "px");
		}
		if (dims && dims[1] != "" && dims[1] > $curImg.height()) {
			$innerbox.height(dims[1] + "px");
		}
	};

	// Next / Previous
	function nextPrev($elt, group){
		$nextprev.show();

		galleryMode = true;

		var nextKey = $elt.get(0)._superboxGroupKey + 1,
		    prevKey = nextKey - 2;

		// Next
		if (galleryGroups[group][nextKey]){
			$nextBtn.removeClass("disabled").unbind("click").bind("click", function(){
				galleryGroups[group][nextKey].click();
			});
		}
		else
			$nextBtn.addClass("disabled").unbind("click");

		// Prev
		if (galleryGroups[group][prevKey]){
			$prevBtn.removeClass("disabled").unbind("click").bind("click", function(){
				galleryGroups[group][prevKey].click();
			});
		}
		else
			$prevBtn.addClass("disabled").unbind("click");
	};

	// Set ID and Class
	function setBoxAttrs(attrs){
		$superbox.attr("id", attrs.boxId).attr("class", attrs.boxClasses);
	};

	// Hide Box
	function hideBox(){
		$j(document).unbind("keydown");
		$loading.hide();
		$nextprev.hide();
		$wrapper.hide().css({position: "fixed", top: 0});
		$innerbox.empty();
	};

	// Hide Box + Overlay
	function hideAll(callback){
		hideBox();
		$overlay.fadeOut(300, function(){
			// Show hidden elements for IE6
			hideElts.show();
		});
		galleryMode = false;
	};

	// "Loading..."
	function initLoading(callback){

		var loading = function(){

			// IE6
			if($.browser.msie && $.browser.version < 7){
				$wrapper.css({position: "absolute", top:"50%"});
			}

			// Hide elements for IE6
			hideElts.hide();

			$loading.show();
			callback();
		};

		if (galleryMode){
			$overlay.css("opacity", settings.overlayOpacity).show();
			loading();
		}
		else {
			$overlay.css("opacity", 0).show().fadeTo(300, settings.overlayOpacity, loading);
		}
	};

	// "Prepare" box : Show $superbox with top:-99999px;
	function prepareBox(){
		$wrapper.show();
		$innerbox.empty();
		$superbox.css({position: "absolute", top: "-99999px"});
	};

	// Display box
	function showBox(curSettings, $elt){
		// Stop "Loading..."
		$loading.hide();

		// Keys shortcuts
		$j(document).unbind("keydown").bind("keydown",function(e){
			// Escape
			if (e.keyCode == 27)
				hideAll();
			// Left/right arrows
			if (e.keyCode == 39 && $nextBtn.is(":visible"))
				$nextBtn.click();
			if (e.keyCode == 37 && $prevBtn.is(":visible"))
				$prevBtn.click();
		});

		// Show $superbox
		$superbox.css({position: "static", top: 0, opacity: 0});

		// IE6 and IE7
		/*
if ($.browser.msie && $.browser.version < 8){
			$superbox.css({position: "relative", top:"-50%"});
*/
		// IE6
		if ($.browser.msie && $.browser.version < 7) {
			$wrapper.css({position: "absolute", top:"50%"});
		}

		// Position absolute if image height > window height
		if ( $j(window).height() < $wrapper.height() ){
			$wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"});
		}

		settings.beforeShow();

		$superbox.fadeTo(300,1);

	};

	// Create base elements (overlay, wrapper, box, loading)
	function createElements(){
		if (!$.superbox.elementsReady){

			// Overlay (background)
			$overlay = $j('<div id="superbox-overlay"></div>').appendTo("body").hide();

			// Wrapper
			$wrapper = $j('<div id="superbox-wrapper"></div>').appendTo("body").hide();

			// Box container
			$container = $j('<div id="superbox-container"></div>').appendTo($wrapper);

			// Box
			$superbox = $j('<div id="superbox"></div>').appendTo($container);

			// Inner box
			$innerbox = $j('<div id="superbox-innerbox"></div>').appendTo($superbox);

			// "Next / Previous"
			$nextprev = $j('<p class="nextprev"></p>').appendTo($superbox).hide();
			$prevBtn = $j('<a class="prev"><strong><span>'+ settings.prevTxt +'</span></strong></a>').appendTo($nextprev);
			$nextBtn = $j('<a class="next"><strong><span>'+ settings.nextTxt +'</span></strong></a>').appendTo($nextprev);

			// Add close button
			$closeBtn = $j('<p class="close"><a><strong><span>'+ settings.closeTxt +'</span></strong></a></p>').prependTo($superbox).find("a");

			// "Loading..."
			$loading = $j('<p class="loading">'+ settings.loadTxt +'</p>').appendTo($container).hide();

			// Hide on click
			$overlay.add($closeBtn).click(function(){
				hideAll();
			});

			// Remove "hide on click" on superbox
			$superbox.click(function(e){
				e.stopPropagation();
			});

			// Dont call this function twice
			$.superbox.elementsReady = true;
		}
	};

})(jQuery);


/*
$j.superbox.settings = {
	loadTxt: "Aguarde un instante...", // Loading text
	closeTxt: '<img src="/images/forms/btn_cerrar.gif" />', // "Close" button text
};
*/
jQuery.noConflict()

var stepcarousel={
    ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
    defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
    configholder: {},

    getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
        return (val=="auto")? 0 : parseInt(val)
    },

    getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
        config.$belt.html(this.ajaxloadingmsg)
        $j.ajax({
            url: config.contenttype[1], //path to external content
            async: true,
            error:function(ajaxrequest){
                config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
                config.$belt.html(content)
                config.$panels=config.$gallery.find('.'+config.panelclass)
                stepcarousel.alignpanels($, config)
            }
        })
    },

    getoffset:function(what, offsettype){
        return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
    },

    getCookie:function(Name){
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },

    setCookie:function(name, value){
        document.cookie = name+"="+value
    },

    fadebuttons:function(config, currentpanel){
        config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1)
        config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1)
        if (currentpanel==config.lastvisiblepanel){
            stepcarousel.stopautostep(config)
        }

    },

    addnavbuttons:function($, config, currentpanel){
        config.$leftnavbutton=$j('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
        config.$rightnavbutton=$j('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
        config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers
            stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
        })
        config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers
            stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
        })
        if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
            this.fadebuttons(config, currentpanel)
        }
        return config.$leftnavbutton.add(config.$rightnavbutton)
    },

    alignpanels:function($, config){
        var paneloffset=0
        config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
        config.panelwidths=[] //array to store widths of each panel
        config.$panels.each(function(index){ //loop through panels
            var $currentpanel=$j(this)
            $currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel
            $currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
            paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
            config.paneloffsets.push(paneloffset) //remember this offset
            config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
        })
        config.paneloffsets.pop() //delete last offset (redundant)
        var addpanelwidths=0
        var lastpanelindex=config.$panels.length-1
        config.lastvisiblepanel=lastpanelindex
        for (var i=config.$panels.length-1; i>=0; i--){
            addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i])
            if (config.gallerywidth>addpanelwidths){
                config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
            }
        }
        config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths
        config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(config.galleryid+"persist")) : 0 //determine 1st panel to show by default
        config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
        var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset)
        config.$belt.css({left: -endpoint+'px'})
        if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
            var $navbuttons=this.addnavbuttons($, config, config.currentpanel)
            $j(window).bind("load resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
                config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
                config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
                config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})
            })
        }
        if (config.autostep && config.autostep.enable){ //enable auto stepping of Carousel?
            var $carouselparts=config.$gallery.add(typeof $navbuttons!="undefined"? $navbuttons : null)
            $carouselparts.bind('click', function(){
                config.autostep.status="stopped"
                stepcarousel.stopautostep(config)
            })
            $carouselparts.hover(function(){ //onMouseover
                stepcarousel.stopautostep(config)
                config.autostep.hoverstate="over"
            }, function(){ //onMouseout
                if (config.steptimer && config.autostep.hoverstate=="over" && config.autostep.status!="stopped"){
                    config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause)
                    config.autostep.hoverstate="out"
                }
            })
            config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause) //automatically rotate Carousel Viewer
        } //end enable auto stepping check
        this.createpaginate($, config)
        this.statusreport(config.galleryid)
        config.oninit()
        config.onslideaction(this)
    },

    stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
        var config=stepcarousel.configholder[galleryid]
        if (typeof config=="undefined"){
            //alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
            return
        }
        stepcarousel.stopautostep(config)
        var pindex=Math.min(pindex-1, config.paneloffsets.length-1)
        var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset)
        if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
            this.fadebuttons(config, pindex)
        }
        config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
        config.currentpanel=pindex
        this.statusreport(galleryid)
    },

    stepBy:function(galleryid, steps, isauto){
        var config=stepcarousel.configholder[galleryid]
        if (typeof config=="undefined"){
            //alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
            return
        }
        if (!isauto) //if stepBy() function isn't called by autorotate() function
            stepcarousel.stopautostep(config)
        var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means backwards
        var pindex=config.currentpanel+steps //index of panel to stop at
        if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
            pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex
            if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel
                stepcarousel.fadebuttons(config, pindex)
            }
        }
        else{ //else, for normal stepBy behavior
            if (pindex>config.lastvisiblepanel && direction=="forward"){
                //if destination pindex is greater than last visible panel, yet we're currently not at the end of the carousel yet
                pindex=(config.currentpanel<config.lastvisiblepanel)? config.lastvisiblepanel : 0
            }
            else if (pindex<0 && direction=="back"){
                //if destination pindex is less than 0, yet we're currently not at the beginning of the carousel yet
                pindex=(config.currentpanel>0)? 0 : config.lastvisiblepanel /*wrap around left*/
            }
        }
        var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) //left distance for Belt DIV to travel to
        if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect
            config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){
                config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
            })
        }
        else
            config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)})
        config.currentpanel=pindex
        this.statusreport(galleryid)
    },

    autorotate:function(galleryid){
        var config=stepcarousel.configholder[galleryid]
        this.stepBy(galleryid, config.autostep.moveby, true)
    },

    stopautostep:function(config){
        clearTimeout(config.steptimer)
    },

    statusreport:function(galleryid){
        var config=stepcarousel.configholder[galleryid]
        if (config.statusvars.length==3){ //if 3 status vars defined
            var startpoint=config.currentpanel //index of first visible panel
            var visiblewidth=0
            for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel
                visiblewidth+=config.panelwidths[endpoint]
                if (visiblewidth>config.gallerywidth){
                    break
                }
            }
            startpoint+=1 //format startpoint for user friendiness
            endpoint=(endpoint+1==startpoint)? startpoint : endpoint //If only one image visible on the screen and partially hidden, set endpoint to startpoint
            var valuearray=[startpoint, endpoint, config.panelwidths.length]
            for (var i=0; i<config.statusvars.length; i++){
                window[config.statusvars[i]]=valuearray[i] //Define variable (with user specified name) and set to one of the status values
                config.$statusobjs[i].text(valuearray[i]+" ") //Populate element on page with ID="user specified name" with one of the status values
            }
        }
        stepcarousel.selectpaginate(jQuery, galleryid)
    },

    createpaginate:function($, config){
        if (config.$paginatediv.length==1){
            var $templateimg=config.$paginatediv.find('img["data-over"]:eq(0)') //reference first matching image on page
            var controlpoints=[], controlsrc=[], imgarray=[], moveby=$templateimg.attr("data-moveby") || 1
            var asize=(moveby==1? 0:1) + Math.floor((config.lastvisiblepanel+1) / moveby) //calculate # of pagination links to create
            var imghtml=$j('<div>').append($templateimg.clone()).html() //get HTML of first matching image
            srcs=[$templateimg.attr('src'), $templateimg.attr('data-over'), $templateimg.attr('data-select')] //remember control's over and out, and selected image src
            for (var i=0; i<asize; i++){
                var moveto=Math.min(i*moveby, config.lastvisiblepanel)
                imgarray.push(imghtml.replace(/>$/, ' data-index="'+i+'" data-moveto="'+moveto+'" title="Move to Panel '+(moveto+1)+'">') +'\n')
                controlpoints.push(moveto) //store panel index each control goes to when clicked on
            }
            var $controls=$j('<span></span>').replaceAll($templateimg).append(imgarray.join('')).find('img') //replace template link with links and return them
            $controls.css({cursor:'pointer'})
            config.$paginatediv.bind('click', function(e){
                var $target=$j(e.target)
                if ($target.is('img') && $target.attr('data-over')){
                    stepcarousel.stepTo(config.galleryid, parseInt($target.attr('data-moveto'))+1)
                }
            })
            config.$paginatediv.bind('mouseover mouseout', function(e){
                var $target=$j(e.target)
                if ($target.is('img') && $target.attr('data-over')){
                    if (parseInt($target.attr('data-index')) != config.pageinfo.curselected) //if this isn't the selected link
                        $target.attr('src', srcs[(e.type=="mouseover")? 1 : 0])
                }
            })
            config.pageinfo={controlpoints:controlpoints, $controls:$controls,  srcs:srcs, prevselected:null, curselected:null}
        }
    },


    selectpaginate:function($, galleryid){
        var config=stepcarousel.configholder[galleryid]
        if (config.$paginatediv.length==1){
            for (var i=0; i<config.pageinfo.controlpoints.length; i++){
                if (config.pageinfo.controlpoints[i] <= config.currentpanel) //find largest control point that's less than or equal to current panel shown
                    config.pageinfo.curselected=i
            }
            if (typeof config.pageinfo.prevselected!=null) //deselect previously selected link (if found)
                config.pageinfo.$controls.eq(config.pageinfo.prevselected).attr('src', config.pageinfo.srcs[0])
            config.pageinfo.$controls.eq(config.pageinfo.curselected).attr('src', config.pageinfo.srcs[2]) //select current paginate link
            config.pageinfo.prevselected=config.pageinfo.curselected //set current selected link to previous
        }
    },


    loadcontent:function(galleryid, url){
        var config=stepcarousel.configholder[galleryid]
        config.contenttype=['ajax', url]
        stepcarousel.stopautostep(config)
        stepcarousel.resetsettings($, config)
        stepcarousel.init(jQuery, config)

    },

    init:function($, config){
        config.gallerywidth=config.$gallery.width()
        config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
        config.$belt=config.$gallery.find('.'+config.beltclass) //Find Belt DIV that contains all the panels
        config.$panels=config.$gallery.find('.'+config.panelclass) //Find Panel DIVs that each contain a slide
        config.$paginatediv=$j('#'+config.galleryid+'-paginate') //get pagination DIV (if defined)
        if (config.autostep)
            config.autostep.pause+=config.panelbehavior.speed
        config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick //attach custom "onpanelclick" event handler
        config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$j(beltobj).stop(); config.onslide()} //attach custom "onslide" event handler
        config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
        config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')) //Find length of Belt DIV's left margin
        config.statusvars=config.statusvars || []  //get variable names that will hold "start", "end", and "total" slides info
        config.$statusobjs=[$j('#'+config.statusvars[0]), $j('#'+config.statusvars[1]), $j('#'+config.statusvars[2])]
        config.currentpanel=0
        stepcarousel.configholder[config.galleryid]=config //store config parameter as a variable
        if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?
            stepcarousel.getremotepanels($, config)
        else
            stepcarousel.alignpanels($, config) //align panels and initialize gallery
    },

    resetsettings:function($, config){
        config.$gallery.unbind()
        config.$belt.stop()
        config.$panels.remove()
        if (config.$leftnavbutton){
            config.$leftnavbutton.remove()
            config.$rightnavbutton.remove()
        }
        if (config.$paginatediv.length==1){
            config.$paginatediv.unbind()
            config.pageinfo.$controls.eq(0).attr('src', config.pageinfo.srcs[0]).removeAttr('data-index').removeAttr('data-moveto').removeAttr('title') //reset first pagination link so it acts as template again
            .end().slice(1).remove() //then remove all but first pagination link
        }
        if (config.autostep)
            config.autostep.status=null
        if (config.panelbehavior.persist){
            stepcarousel.setCookie(window[config.galleryid+"persist"], 0) //set initial panel to 0, overridden w/ current panel if window.unload is invoked
        }
    },

    setup:function(config){
        //Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)
        document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
        jQuery(document).ready(function($){
            config.$gallery=$j('#'+config.galleryid)
            stepcarousel.init($, config)
        }) //end document.ready
        jQuery(window).bind('unload', function(){ //clean up on page unload
            stepcarousel.resetsettings($, config)
            if (config.panelbehavior.persist)
                stepcarousel.setCookie(config.galleryid+"persist", config.currentpanel)
            jQuery.each(config, function(ai, oi){
                oi=null
            })
            config=null
        })
    }
}



/*
var $preguntas = {
  'logo':'',
  'nombre':'este es el nombre de la encusta nombre de la encusta',
  'preguntas': [{
    'pregunta':'la respuesta es la 4',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':0},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':0},
      {'respuesta':'respuesta 4','correcto':1},
    ]
  },
  {
    'pregunta':'la respuesta es la 3',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':0},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':1},
      {'respuesta':'respuesta 4','correcto':0},
    ]
  },
  {
    'pregunta':'la respuesta es la 1',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':1},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':0},
      {'respuesta':'respuesta 4','correcto':0},
    ]
  },]
};


var configTrivia = {
      'trivia_contenidor':  '#triviaContenedor',
      'start_btn'  :        'btnTriviaStart',
      'start_count':        'lblTriviaCount',
      'trivia_nombre':      '.a',
      'trivia_puntos':      'trivia_puntos',
      'trivia_tiempo':      'trivia_time',

    };
*/
var jTrivia = {
  puntos:0,
  respuesta_corectas: 0,
  cursor_pregunta:0,
  time_start:null,
  time:  0,
  tiempo: null,
  tiempo_respuesta:0,
  jQ:  null,
  isSharedFb: false,
  preguntas:[],
  dataSaveScore: {},
  config:{
      'trivia_contenidor':  '#triviaContenedor',
      // paso 1
      'start_btn'  :        'btnTriviaStart',
      'start_count':        'lblTriviaCount',

      // pantalla de juego
      'trivia_nombre':      'trivia de algo',
      'trivia_puntos':      'trivia_puntos',
      'trivia_tiempo':      '.c',
      'letras':             ['A','B','C','D','E','F','G','H'],
      'permalink': '',
      'link_save':       ''
    },

  jqTrivia: function(configure, preguntas, $jQuery){
    this.jQ = $jQuery;
    this.config = this.jQ.extend({}, this.config, configure);
    this.preguntas = preguntas;
    // logo
    if(jTrivia.preguntas.logo != '' && jTrivia.preguntas.logo != undefined) {

      $box_imagen = this.jQ('<div/>')
              .attr('id', 'lblTriviaLogo')
              .appendTo('#trivia_body');
      this.jQ('<img/>')
              .attr('src','/uploads/trivia/'+jTrivia.preguntas.logo)
              .appendTo($box_imagen);

    }

    $ayuda_box = this.jQ('<div/>').attr('id', 'ayuda_box').css({'display':'none'}).appendTo('#trivia_body');
    this.jQ('<h1/>').addClass('ayuda_titulo').html('Ayuda').appendTo($ayuda_box);
    this.jQ('<div/>').addClass('ayuda_cerrar').html('cerrar').click(function(){
              jTrivia.jQ('#triviaContenedor').css({'display':'block'});
              jTrivia.jQ('#lblTriviaLogo')   .css({'display':'block'});
              jTrivia.jQ('#ayuda_box')       .css({'display':'none'});
            }).appendTo($ayuda_box);

    this.jQ('<p/>').html('Demuestra cuánto sabes de fútbol con la Trivia ImpreMUNDIAL. Cada semana encontrarás un nuevo cuestionario sobre distintos temas relacionados con el deporte más popular del mundo para que pongas a prueba tus conocimientos.<br /> Dale click al botón de Comienza tu Desafío y no pierdas el tiempo, cada segundo vale. Escoge la opción que creas correcta entre las respuestas posibles y enseguida encontrarás la pregunta siguiente. Mientras más rápido respondas, más puntos sumas: Por cada respuesta correcta obtendrás 10 puntos. Tienes 40 segundos para seleccionar tu opción, si aciertas sumarás 10 puntos más los segundos que te queden. Es decir, si respondes y todavía te quedan 36 segundos, sumarás 46 puntos. Una vez finalizado el set de preguntas, la pantalla final te dirá cuántos puntos sumaste. Si quieres guardar tu puntaje y seguir sumando con nuevos cuestionarios, tienes que estar registrado en la Comunidad de ImpreMUNDIAL. Si todavía no te registraste, puedes hacerlo <a href="/usuario/registro?login_ajax=1#iframe" rel="superbox[iframe][900x480][type#superbox.SBoxRegistro]">aquí</a> en menos de un minuto. ').appendTo($ayuda_box);

    $ayuda_link = this.jQ('<div/>')
            .attr('id', 'ayuda_link')
            .click(function () {
              jTrivia.jQ('#triviaContenedor').css({'display':'none'});
              jTrivia.jQ('#lblTriviaLogo')   .css({'display':'none'});
              jTrivia.jQ('#ayuda_box').css({'display':'block'});

            })
            .appendTo('#trivia_body');

    this.jQ('<img/>')
            .attr('src','/images/trivia/btn_ayuda.png')
              .appendTo($ayuda_link);

    jTrivia.jQ('<iframe/>')
            .attr('src', 'http://www.facebook.com/plugins/like.php?href='+jTrivia.config.permalink+'&layout=button_count&show_faces=false&width=115&action=like&font&colorscheme=dark&height=25')
            .attr('scrolling', 'no')
            .attr('frameborder', '0')
            .attr('style', 'border:none; overflow:hidden; width:115px; height:25px;')
            .attr('allowTransparency', 'true')
            .appendTo('#trivia_head');

    this.jQ('<div/>').addClass('ayuda_cerrar').html('cerrar').click(function(){
              jTrivia.jQ('#triviaContenedor').css({'display':'block'});
              jTrivia.jQ('#lblTriviaLogo')   .css({'display':'block'});
              jTrivia.jQ('#boxTriviaRank')       .css({'display':'none'});
            }).appendTo('#boxTriviaRank');

    $rank_link = this.jQ('<div/>')
            .attr('id', 'rank_link')
            .click(function () {
              jTrivia.jQ('#triviaContenedor').css({'display':'none'});
              jTrivia.jQ('#lblTriviaLogo')   .css({'display':'none'});
              jTrivia.jQ('#boxTriviaRank').css({'display':'block'});

            })
            .appendTo('#trivia_body');

    this.jQ('<img/>')
            .attr('src','/images/trivia/btn_rank.png')
              .appendTo($rank_link);


    this.renderBoxLogin();

    this.load();

  },
  load: function() {
    jTrivia.jQ('#'+jTrivia.config.trivia_puntos).css({'display':'none'});
    jTrivia.jQ('#'+jTrivia.config.trivia_tiempo).css({'display':'none'});

    jTrivia.jQ(jTrivia.config.trivia_contenidor).html('');

    // nombre
    jTrivia.jQ('<div/>').attr('id', 'lblTriviaNombre').html(jTrivia.preguntas.nombre ).appendTo(jTrivia.config.trivia_contenidor);
    // cantidad de preguntas
    jTrivia.jQ('<div/>').attr('id', jTrivia.config.start_count).html('Número de preguntas: <span>' + jTrivia.preguntas.preguntas.length + '</span>' ).appendTo(jTrivia.config.trivia_contenidor);
    // boton para empesar
    jTrivia.jQ('<div/>').attr('id', jTrivia.config.start_btn).click(jTrivia.start).appendTo(jTrivia.config.trivia_contenidor);

//    jTrivia.boxLoginRegistro();

  },
  start: function() {
    jTrivia.puntos          = 0;
    jTrivia.respuesta_corectas = 0;
    jTrivia.tiempo          = null;
    jTrivia.time_start      = null;
    jTrivia.time        = 0;
    jTrivia.isSharedFb = false;
    jTrivia.cursor_pregunta = 0;
    jTrivia.tiempo_respuesta = 0;
    jTrivia.dataSaveScore = {};

    jTrivia.jQ('#'+jTrivia.config.trivia_puntos)
            .html('Puntos: <span>0</span>')
            .css({'display':'inline'});
    jTrivia.jQ('#'+jTrivia.config.trivia_tiempo)
            .html('00:00')
            .css({'display':'inline'});
    jTrivia.armaPreguntas(0);

    jTrivia.time_start = setInterval("jTrivia.setTimeView()",1000);

  },

  onClickBien: function(){
    jTrivia.jQ(jTrivia.config.trivia_contenidor + ' a').unbind('click');
    jTrivia.puntos = jTrivia.puntos + 10;
    jTrivia.respuesta_corectas++;
    if( (40 - jTrivia.tiempo_respuesta) > 0 ) {
      jTrivia.puntos = jTrivia.puntos + (40 - jTrivia.tiempo_respuesta);
    }

    jTrivia.jQ(this).addClass('trivia_selected trivia_bien');
    jTrivia.jQ('<img/>')
            .attr('src','/images/trivia/paso2_bien.png')
            .css({'display':'none'})
            .appendTo(this)
            .delay(600)
            .fadeIn(400);

    jTrivia.jQ(jTrivia.config.trivia_contenidor)
            .delay(2000)
            .fadeOut('slow', function() {
              jTrivia.jQ(jTrivia.config.trivia_contenidor)
                      .html('')
                      .css({'display':'block'});
              jTrivia.siguiente();
             });

    },

  onClickMal: function(){
    jTrivia.jQ(jTrivia.config.trivia_contenidor + ' a').unbind('click');
    jTrivia.jQ(this).addClass('trivia_selected trivia_mal');
    $icon = jTrivia.jQ('<img/>')
            .attr('src','/images/trivia/paso2_mal.png')
            .css({'display':'none'})
            .appendTo(this)
            .delay(600)
            .fadeIn(400);



    jTrivia.jQ(jTrivia.config.trivia_contenidor)
            .delay(2000)
            .fadeOut('slow', function() {
              jTrivia.jQ(jTrivia.config.trivia_contenidor)
                      .html('')
                      .css({'display':'block'});
              jTrivia.siguiente();
             });

    },

  siguiente: function(){
    jTrivia.tiempo_respuesta = 0;
    this.cursor_pregunta = this.cursor_pregunta + 1;
    this.jQ('#'+this.config.trivia_puntos+' span').html(this.puntos);
    if(this.preguntas.preguntas.length > this.cursor_pregunta)
      jTrivia.armaPreguntas(this.cursor_pregunta);
    else
      this.end();

    },

  armaPreguntas: function($pregunta){
    this.jQ(this.config.trivia_contenidor).html('');

    // pregunta
    this.jQ('<div/>')
            .addClass('pregunta')
            .html(this.preguntas.preguntas[$pregunta].pregunta )
            .appendTo(this.config.trivia_contenidor);

    $listado_ul =  this.jQ('<ul />')
                 .attr('class', 'respuestas')
                 .appendTo(this.config.trivia_contenidor);
    if(this.preguntas.preguntas[$pregunta].imagen != '') {
      $listado_ul.addClass('respuestas_con_imagen');
      $box_imagen = this.jQ('<div/>')
              .attr('class', 'pregunta_imagen')
              .appendTo(this.config.trivia_contenidor);
      this.jQ('<img/>')
              .attr('src','/uploads/trivia/'+this.preguntas.preguntas[$pregunta].imagen)
              .appendTo($box_imagen);
    } else {
      $listado_ul.addClass('respuestas_sin_imagen');
    }


    $strRespuestas = '';
    for(x in this.preguntas.preguntas[$pregunta].repuestas) {
      $strTemp = this.preguntas.preguntas[$pregunta].repuestas[x].respuesta;

      $listado_li =  this.jQ('<li />').appendTo($listado_ul);

      $listado_a = this.jQ('<a />')
        .appendTo($listado_li);

      if(this.preguntas.preguntas[$pregunta].repuestas[x].correcto == 1)
        $listado_a.click(this.onClickBien);
      else
        $listado_a.click(this.onClickMal);

      $listado_a.html($strTemp);

      this.jQ('<strong />')
        .html(this.config.letras[x] + '- ')
        .prependTo($listado_a);

    }

/*    // respuesta
    this.jQ('<div/>')
            .attr('id', this.config.start_btn)
            .click(this.start)
            .css({'cursor':'point'})
            .html('COMENSAR TU DESAFIO')
            .appendTo(this.config.trivia_contenidor);
*/

    },


  end: function() {
    this.save();
    return;
    clearInterval(jTrivia.time_start);
    this.jQ(this.config.trivia_contenidor).html('');
    this.jQ('<div/>').attr('class', 'paso3_titulo').html('Puntaje Final:').appendTo(this.config.trivia_contenidor);
    this.jQ('<div/>').attr('class', 'paso3_puntos').html(this.puntos).appendTo(this.config.trivia_contenidor);
    this.jQ('<div/>').attr('class', 'paso3_respuestas').html( 'Respuestas correctas: <span>' + this.respuesta_corectas + '/' + this.preguntas.preguntas.length + '</span>').appendTo(this.config.trivia_contenidor);
    this.jQ('<div/>').attr('class', 'paso3_tiempo').html( 'Tiempo: <span>' + this.tiempo + '</span>').appendTo(this.config.trivia_contenidor);
    this.jQ('<div/>').attr('class', 'paso3_nuevo').click(this.load).appendTo(this.config.trivia_contenidor);
    this.jQ('<div/>').attr('class', 'paso3_continuar').click(this.save).appendTo(this.config.trivia_contenidor);

  },
  /* paso 4 */
  save: function() {
    clearInterval(jTrivia.time_start);

    jTrivia.jQ(jTrivia.config.trivia_contenidor).html('');

    $box = jTrivia.jQ('<div/>')
            .attr('class', 'paso4_box')
            .appendTo(jTrivia.config.trivia_contenidor);
    frace = ''
    if( jTrivia.puntos >= 0   && jTrivia.puntos <= 100 ) {
      frace = "¡Oye! Al fútbol se juega con los pies"; }
    else if( jTrivia.puntos >= 101 && jTrivia.puntos <= 200 ) {
      frace = "Ponchado, ¡dedícate al baseball!"; }
    else if( jTrivia.puntos >= 201 && jTrivia.puntos <= 300 ) {
      frace = "¿Te has dormido en el 2do tiempo?"; }
    else if( jTrivia.puntos >= 301 && jTrivia.puntos <= 400 ) {
      frace = "¡Ya puedes ser periodista deportivo!"; }
    else {
      frace = "¡Eres el sucesor de Joseph Blatter!"; }

    jTrivia.jQ('<div/>').attr('class', 'paso4_frace').html(frace).appendTo(jTrivia.config.trivia_contenidor);


    jTrivia.jQ('<div/>')
            .attr('class', 'paso4_puntos')
            .html( 'Puntaje Final: <span>'+jTrivia.puntos+'</span>' )
//            .html( 'Puntaje Final: <span>255</span>' )
            .appendTo($box);

    jTrivia.jQ('<div/>')
            .attr('class', 'paso4_respuestas')
            .html( 'Respuestas Corectas: <span>'+jTrivia.respuesta_corectas + '/' + jTrivia.preguntas.preguntas.length+'</span>' )
            .appendTo($box);
    jTrivia.jQ('<div/>')
            .attr('class', 'paso4_tiempo')
            .html( 'Tiempo: <span>'+jTrivia.tiempo+'</span>' )
            .appendTo($box);

    jTrivia.jQ('<div/>').attr('class', 'paso4_nuevo').click(jTrivia.load).appendTo(jTrivia.config.trivia_contenidor);

    $comparte = jTrivia.jQ('<div/>')
            .attr('class', 'paso4_compartir')
            .appendTo(jTrivia.config.trivia_contenidor);



    jTrivia.jQ('<a/>')
            .click(jTrivia.sharedFB)
            .html('<img src="/images/trivia/paso4_compartir.png"/>')
            .appendTo($comparte);


    jTrivia.jQ('<div/>')
            .attr('class', 'paso4_save')
            .click(function(){
              jTrivia.checkLogin(
              function(data){
                if(data.login == 1) {
                  jTrivia.saveScore(
function (data) {
        jTrivia.dataSaveScore = data;
        if(data.error == 0) {

          jTrivia.jQ('.paso4_save').css({'display':'none'});

                  $comparte = jTrivia.jQ('div.paso4_compartir').html('  ');

                  jTrivia.jQ('<a/>')
                          .attr('href', 'http://www.facebook.com/sharer.php?u='+encodeURIComponent(jTrivia.dataSaveScore.url)+'&t=averr' )
                          .attr('target', '_blank' )
                          .html('<img src="/images/trivia/paso4_compartir.png"/>')
                          .appendTo($comparte);


        }
      }
                  );
                }
                else
                  jTrivia.boxLoginRegistro();


              }
              );
            })
            .appendTo(jTrivia.config.trivia_contenidor);

  },
  sharedFB: function() {
    jTrivia.checkLogin(
                  function(data){
                    if(data.login == 1) {
                      jTrivia.isSharedFb = false;
                      jTrivia.saveScore(
                      function (data) {
                          jTrivia.dataSaveScore = data;
                          if(data.error == 0) {

                            jTrivia.jQ('.paso4_save').css({'display':'none'});
                            jTrivia.jQ('div.paso4_compartir').css({'display':'none'});
                            window.open('http://www.facebook.com/sharer.php?u='+jTrivia.dataSaveScore.url+'&t=averr', "Comparte en Facebook");
                          }
                        }
                      );

                    } else {
                      jTrivia.isSharedFb = true;
                      jTrivia.boxLoginRegistro();
                    }

              });
  },
  saveScore: function(successSaveScore) {
    jTrivia.jQ.ajax({
      type: 'POST',
      url: jTrivia.config.link_save,
      data: 'puntos='+jTrivia.puntos+'&tiempo='+jTrivia.tiempo,
      success: successSaveScore,
      dataType: "json"});
  },


  setTimeView: function() {
    jTrivia.time++;
    jTrivia.tiempo_respuesta++;
    if(jTrivia.time < 60 ) {
      if(jTrivia.time < 10)
        jTrivia.tiempo = '00:0'+jTrivia.time.toString();
      else
        jTrivia.tiempo = '00:'+jTrivia.time.toString();
    } else {
      minutos = parseInt(jTrivia.time / 60);
      if(minutos > 10)
        jTrivia.tiempo = minutos.toString();
      else
        jTrivia.tiempo = '0'+minutos.toString();
      segundos = (jTrivia.time - (minutos*60))

      jTrivia.tiempo += ':';

      if(segundos > 10)
        jTrivia.tiempo += segundos.toString();
      else
        jTrivia.tiempo += '0'+segundos.toString();


    }

    jTrivia.jQ('#'+jTrivia.config.trivia_tiempo)
            .html(jTrivia.tiempo);


  },

  checkLogin: function(successCheck) {
    jTrivia.jQ.ajax({
      type: 'POST',
      url: jTrivia.config.link_checkLogin,
      data: 'asd=asda',
      success: successCheck,
      dataType: "json"});
  },

  boxLoginRegistro: function() {
    jTrivia.jQ('#boxTriviaLogin').css({'display':'block'});
  },

  renderBoxLogin: function () {

    $backbround = jTrivia.jQ('<div/>').html('').attr('id', 'boxTriviaLogin').css({'display':'none'}).appendTo('#trivia_body');

    $box = jTrivia.jQ('<div/>').addClass('boxRegCenter').html( '' ).appendTo($backbround);

    jTrivia.jQ('<input/>').attr('name', 'AjaxInputUserName').attr('id',   'AjaxInputUser').attr('type', 'text').appendTo($box);

    jTrivia.jQ('<input/>').attr('name', 'AjaxInputPassName').attr('id',   'AjaxInputPass').attr('type', 'password').appendTo($box);

    jTrivia.jQ('<a/>').attr('id',   'AjaxOlvidar').click(function(){alert("asd");}).appendTo($box);

    jTrivia.jQ('<div/>')
            .attr('id',   'AjaxBtnIngresar')
            .click(function(){

              if(jTrivia.jQ('#AjaxInputUser').val()=='') {
                alert("Completa tu Usuario");
                return false;
              }
              if(jTrivia.jQ('#AjaxInputPass').val()=='') {
                alert("Completa tu Contraseña");
                return false;
              }
              jTrivia.jQ('#AjaxBtnIngresar').fadeOut('slow');
              jTrivia.jQ.ajax({
                type: 'POST',
                url: jTrivia.config.link_Login,
                data: 'user=' + jTrivia.jQ('#AjaxInputUser').val() + '&pass='+jTrivia.jQ('#AjaxInputPass').val(),
                success: function (data) {
                  if(data.login == 1) {
                    jTrivia.logCompletado();
                  }
                  else {
                    jTrivia.jQ('#AjaxBtnIngresar').fadeIn('slow');
                    alert("Los datos de usuario y contraseña son incorectos");
                  }
                },
                dataType: "json"});
            })
            .appendTo($box);
    jTrivia.jQ('<div><img src="/images/forms/btn_cerrar.gif" /></div>').attr('id', 'trivia_registro_close').click(function(){
      jTrivia.jQ('#boxTriviaLogin').css({'display':'none'});
    }).appendTo($box);
    jTrivia.jQ('<div/>').attr('id',   'AjaxBtnRegistrar').html('<a href="'+ jTrivia.config.link_registro+'#iframe" rel="superbox[iframe][900x480][type#superbox.SBoxRegistro]"><img src="/images/trivia/btn_registrarte.png" ></a>').appendTo($box);
    jTrivia.jQ('<div/>').attr('id',   'AjaxBtnRecuperar').html('<a href="'+jTrivia.config.link_recuperar+'#iframe" rel="superbox[iframe][485x190][type#superbox.SBoxPassword]">Olvidé mi contraseña</a>').appendTo($box);
  },

  registroTerminado: function () {
    jTrivia.jQ('#superbox-overlay')
            .css({'display':'none'});
    jTrivia.jQ('#superbox-wrapper')
            .css({'display':'none'});
    jTrivia.logCompletado();
  },

  logCompletado: function () {
    jTrivia.jQ('#boxTriviaLogin')
            .html('')
            .css({'display':'none'});
    if(jTrivia.isSharedFb)
      jTrivia.sharedFB();
    else
      jTrivia.saveScore();
  }


};







/*
var $preguntas = [[
  {
    'pregunta':'la respuesta es la 4',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':0},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':0},
      {'respuesta':'respuesta 4','correcto':1},
    ]
  },
  {
    'pregunta':'la respuesta es la 3',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':0},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':1},
      {'respuesta':'respuesta 4','correcto':0},
    ]
  },
  {
    'pregunta':'la respuesta es la 1',
    'repuestas':[
      {'respuesta':'respuesta 1','correcto':1},
      {'respuesta':'respuesta 2','correcto':0},
      {'respuesta':'respuesta 3','correcto':0},
      {'respuesta':'respuesta 4','correcto':0},
    ]
  },
]];
*/



	jQuery.fn.carousell = function(options)
	{
		
		var $this = $j(this);
		//alert($this.width());
		var rarrow = $this.children('.c-arrow.right');
		var larrow = $this.children('.c-arrow.left');
		
		var viewport = $this.children('.c-carousell-viewport');
		var belt = viewport.children('.c-carousell-belt');
		
		var total_width = 0;
		belt.children().each(function(i){
			total_width +=  $j(this).outerWidth(true);
		})
		total_width = belt.children().length * options.item_width;
		
		belt.width(total_width);
		
		if(total_width == 0 || viewport.width()==0) return false;
		
		var items = belt.children().length;
		var cpage = 0;
    if(options.cpage){
      cpage = options.cpage;
    }
		
		//var page_width = viewport.width();
		//var total_pages = Math.ceil(total_width / page_width);
		
		var items_per_page = Math.ceil(viewport.width() / options.item_width);
		var total_pages = Math.ceil(items / items_per_page);
		var page_width = options.item_width * items_per_page;
		
		rarrow.bind('click',function(evt){
			evt.preventDefault();
			
			cpage = Math.min(total_pages-1, cpage+1)
			move_me()
			this.blur();
		})
		larrow.bind('click',function(evt){
			evt.preventDefault();
			
			cpage = Math.max(0, cpage-1)
			
			move_me()
			this.blur();
		})
		
		function move_me()
		{
			//alert(cpage);
			
			var left = -cpage * page_width;
			
			belt.animate({'left': left}, 800);
		}
		
	}