/* 
 * Script para el selector de tarjetas
 * y su respectivo el Slide
 * 
*/

$(document).ready(function(){
    //Efecto fade sobre las tarjetas
    $('#cardslist a img').hover(
        function () {
            if(!$(this).parent().hasClass("current")){
				//if (!$.browser.msie) {
					$(this).animate({
						opacity:1
					});
				  //}

                
            }
        }, 
        function () {
            if(!$(this).parent().hasClass("current")){
				//if (!$.browser.msie) {
                $(this).animate({
                    opacity:0.5
                });
				//}
            }
        })
                
    /*
     * Tabs
     */
    //Custom effect
    $.tools.tabs.addEffect("slideH", function(tabIndex, done) {
		tabClick(tabIndex)
        //obtengo el tab actual y le aplico la transparencia
		//if (!$.browser.msie) {
					this.getCurrentTab().find('img').css('opacity',0.5);
		//}
        //obtengo el indice del actual
        var oldIndex = this.getIndex();
        var slideValue,startValue;
        if(oldIndex != undefined){
            //comparo el indice actual con el nuevo
            // para saber para que lado debe ir el slider
            slideValue = (oldIndex<tabIndex)?'-=960':'+=960';
            startValue = (oldIndex<tabIndex)?960:-960;
            
            this.getPanes().eq(oldIndex).css({
                left: 0
            }).animate({
                left: slideValue
            },'slow');
            
            this.getPanes().eq(tabIndex).css({
                display:'block',
                left: startValue
            }).animate({
                left: slideValue
            },'slow');
            
        }else{
            this.getPanes().eq(tabIndex).fadeIn('slow');
        } 
        
        // the supplied callback must be called after the effect has finished its job
        done.call();
    });
	var cardAnchor = location.hash;
	function setIndex(cardAnchor){
		switch(cardAnchor){
			case '#teen':
				return 0;
				break;
			case '#visa':
				return 1;
				break;
			case '#oro':
				return 2;
				break;
			case '#american':
				return 3;
				break;
			case '#mastercard':
				return 4;
				break;
			case '#clasica':
				return 5;
				break;
			default:
				return 0;			
		}
	}
	function changeHash(theHash){
		var api = $("#cardslist ul").data("tabs");
		api.click(setIndex(theHash));
	}
	function getTheHash(theHref){
		return theHref.substr(theHref.lastIndexOf('#'));
	}
	$('.link-card').click(function(){
		changeHash(getTheHash($(this).attr('href')));
	})
	
	function tabClick(tabIndex){
		location.hash = getTheHash($("#cardslist ul a:eq(" + tabIndex + ")").attr('href'));
	}
	
    $("#cardslist ul").tabs(".cont-carddetails > div", {
        effect: 'slideH',
		initialIndex: setIndex(cardAnchor)
    });
})