Chinito script

chinito.js

var Chinito = (function() {
    var st = {
        voz: '#voz',
        viewVideo: '.video-panel',
        meGusta: '#megusta',
        compartir: '#compartir',
        aviso: '.aviso',
        buscaVehiculo: '.busca-vehiculo',
        btnRegister: '#btnRegister',
        btnSearch: '#btnSearch',
        error: '.error',
        txtName: '#txtName',
        txtEmail: '#txtEmail',
        chino: '.chino',
        mpTv: '#mpTv',
        mpWeb: '#mpWeb',
        frmRegister: '#frmRegister',
        btnLike: '#btnLike',
        btnShare: '.btn-share',
        btnViewVideo: '.view-video',
        gaTrack: '.gaTrack',
        iconFb: '.fb',
        iconYt: '.youtube',
        visitSite: '.visit-site',
        flecha: '.flecha',
        thanks: '#gracias',
        registered: '#registered',
        selMarca: '#selMarca',
        ytWeb: '#ytWeb',
        selModelo: '#selModelo',
        frmSearch: '#frmSearch',
        rdNuevo: '#rdNuevo',
        rdUsado: '#rdUsado',
        iRadio: '.iRadio',
        selAnio : '#selAnio',
        car : '.car',
        token: '#token',
        hoverArea: '.hoverArea',
        msn: ''
    },
    dom = {},
    catchDom = function() {
        dom.voz = $(st.voz)[0];
        dom.viewVideo = $(st.viewVideo);
        dom.meGusta = $(st.meGusta);
        dom.compartir = $(st.compartir);
        dom.aviso = $(st.aviso);
        dom.buscaVehiculo = $(st.buscaVehiculo);
        dom.btnRegister = $(st.btnRegister);
        dom.btnSearch = $(st.btnSearch);
        dom.error = $(st.error);
        dom.txtName = $(st.txtName);
        dom.txtEmail = $(st.txtEmail);
        dom.chino = $(st.chino);
        dom.mpWeb = $(st.mpWeb);
        dom.frmRegister = $(st.frmRegister);
        dom.btnLike = $(st.btnLike);
        dom.btnShare = $(st.btnShare);
        dom.btnViewVideo = $(st.btnViewVideo);
        dom.gaTrack = $(st.gaTrack);
        dom.iconFb = $(st.iconFb);
        dom.iconYt = $(st.iconYt);
        dom.visitSite = $(st.visitSite);
        dom.flecha = $(st.flecha);
        dom.thanks = $(st.thanks);
        dom.registered = $(st.registered);
        dom.selMarca = $(st.selMarca);
        dom.ytWeb = $(st.ytWeb);
        dom.ytTv = $(st.ytTv);
        dom.selModelo = $(st.selModelo);
        dom.frmSearch = $(st.frmSearch);
        dom.rdUsado = $(st.rdUsado);
        dom.rdNuevo = $(st.rdNuevo);
        dom.iRadio = $(st.iRadio);
        dom.selAnio = $(st.selAnio);
        dom.car = $(st.car);
        dom.hoverArea = $(st.hoverArea);
        dom.token = $(st.token);
    },
    bindEvents = function() {
        dom.chino.on('mouseenter', playVoice);
        dom.btnShare.on('click', shareVideo);
        dom.btnRegister.on('click', verifyValid);
        dom.iconFb.on('click', gaFb);
        dom.iconYt.on('click', gaYt);
        dom.visitSite.on('click', gaVisitSite);
        dom.aviso.on('click', gaAviso);
        dom.flecha.on('click', gaFlecha);
        dom.buscaVehiculo.on('click', gaBusca);
        dom.selMarca.on('change', selectMarca);
        dom.btnSearch.on('click', gaSearch);
        dom.btnSearch.on('click', redirectSearch);
        dom.btnSearch.on('click', resetSearch);
        dom.btnViewVideo.on('click', gaViewVideo);
    },
    runFunction = function() {
        initFancybox();
        vidYoutubeWeb();
        animateChinito();
        animateAviso();
        customRadio();
        validateFields();
        placeholderOld();
        searchAnimation();
    },
    analytics = function(act1, act2, act3) {

        if (act1 == undefined) {
            act1 = '';
        }
        if (act2 == undefined) {
            act2 = '';
        }
        if (act3 == undefined) {
            act3 = '';
        }
        _gaq.push(['_trackEvent', act1, act2, act3]);
        if (ENV == 1) {
            console.log(' param1: ', act1);        
            console.log(' param2: ', act2);        
            console.log(' param3: ', act3);  
            console.log("_gaq.push(['_trackEvent','"+ act1 +"','" + act2 +"','" + act3+"'])");      
        }


    },
    initFancybox = function() {
        dom.buscaVehiculo.fancybox();
        dom.aviso.fancybox();
        dom.meGusta.fancybox();
        dom.compartir.fancybox();
        dom.thanks.fancybox({
            beforeShow : function() {
                dom.registered.text(dom.txtName.val());
            }
        });

    },
    selectMarca = function() {
        $.ajax({
            url: '/publicidad/index/listarmodelos',
            type: 'post',
            data: 'selMarca='+dom.selMarca.val(),
            beforeSend : function() {
                dom.selMarca.attr('disabled','disabled');
            },
            success: function(data) {
                var data = $.parseJSON(data);
                dom.selMarca.removeAttr('disabled');
                dom.selModelo.removeAttr('disabled');
                dom.selModelo.css('color','#222');

                dom.selModelo.html('<option value>Todos</option>');
                $.each(data,function(index,value){
                     dom.selModelo.append('<option value="'+index+'">'+value+'</option>');
                });
            }
        })
    },

    redirectSearch = function() {
        $.ajax({
            url : '/publicidad/index/urldebusqueda',
            async : false,
            type: 'post',
            data: dom.frmSearch.serialize(),
            success : function(data) {
            	window.open(data, '_blank');
            }
        })
    },
    resetSearch = function() {
        dom.selMarca.prop('selectedIndex', 0);
        dom.selModelo.attr('disabled','disabled');
        dom.selModelo.css('color','#afafaf');
        dom.selModelo.prop('selectedIndex', 0);
        dom.selAnio.prop('selectedIndex', 0);
    },
    customRadio = function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_minimal',
            radioClass: 'iradio_minimal'
        });
    },
    customSelect = function() {
        if (!$.support.leadingWhitespace) { // if IE6/7/8
            $('select.wide')
                .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
                .bind('click', function() { $(this).toggleClass('clicked'); })
                .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
                .bind('blur', function() { $(this).removeClass('expand clicked'); });
        }
    },
    playVoice = function() {
    	if(browser.msie!=true&&browser.version!="8.0"){
	        dom.voz.play();		
    	}
    },
    validateFields = function() {
        dom.frmRegister.validate({
            rules: {
                txtName: {
                    required: true,
                    minlength: 2,
                    maxlength: 60,
                    nombre: true
                },
                txtEmail: {
                    required: true,
                    email: true,
                    maxlength: 90
                }
            },
            messages: {
                txtName: {
                    required: "Ingrese su nombre",
                    minlength: "Su nombre debe contener al menos 2 caracteres",
                    maxlength: "Su nombre debe contener máximo 60 caracteres"
                },
                txtEmail: {
                    required: "Ingrese su email",
                    email: "Ingrese un email válido",
                    maxlength: "Su email debe contener máximo 90 caracteres"
                }
            }
        });
        

    },
    verifyValid = function(e){
    	e.preventDefault();

    	if(dom.frmRegister.valid()){
    		$.ajax({
                    url : '/publicidad/index/registrarusuario',
                    type : 'post',
                    data : dom.frmRegister.serialize(),
                    beforeSend: function() {
                        dom.btnRegister.text('ESPERA...');
                    },
                    success: function(data) {
                    	var info = $.parseJSON(data);
                        dom.btnRegister.text('REGÍSTRATE');
                        if(info.codigo == 0) {
                            dom.token.before('<span class="errorMsg">No se pudo registrar, inténtelo más tarde.</span>')
                            if (dom.txtEmail.valid()) {
                                analytics("CarroCHINO-btoRegistrate", "EmailValido");
                            } else {
                                analytics("CarroCHINO-btoRegistrate", "EmailNoValido");
                            }
                            dom.btnRegister.text('REGÍSTRATE');
                        
                        } else if (info.codigo == 1) {
                            dom.thanks.trigger('click');
                            dom.txtEmail.val('');
                            dom.txtName.val('');
                            dom.txtEmail.removeClass('error');
                            analytics("CarroCHINO-btoRegistrate", "EmailValido");
                            dom.btnRegister.text('REGÍSTRATE');

                        } else if (info.codigo == 2) {
                        	dom.txtEmail.removeClass('valid');
                        	dom.txtEmail.addClass('error');
                        	dom.txtEmail.attr('original-title','');
                        	dom.txtEmail.after('<em id="errorEsp" class="errorie">Este email ya se encuentra registrado.</em>');
                            $('#errorMsg').remove();                            
                            analytics("CarroCHINO-btoRegistrate", "EmailNoValido");
                            dom.btnRegister.text('REGÍSTRATE');
                            
                        } else if (info.codigo == -1) {
                            dom.txtEmail.removeClass('valid');
                            dom.txtEmail.addClass('error');
                        	$.each (info.mensajes, function(index, value){
                        		if (value != undefined) {
                        			$('#'+index).after('<em id="errorEsp" class="errorie">'+ value +'.</em>');	
                        			$('#'+index).on('keyup',function(){
        								$('#errorEsp').remove();
                        			});
                        		}                        	
                        	});
                            dom.btnRegister.text('REGÍSTRATE');                
                            
                            analytics("CarroCHINO-btoRegistrate", "EmailNoValido");
                            
                        } 
                                                
                    }
                });
                
    	} else {
            if (!dom.txtEmail.valid()) {
                analytics("CarroCHINO-btoRegistrate", "EmailNoValido");
            } 
    		return false;
    	}

    	

        dom.txtEmail.on('keyup',function(){
        	$('#errorEsp').remove();
        });

    },
    shareVideo = function() {
        analytics('CarroCHINO-btoCompartirVideoFB');
        window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebooksharedialog', 'width=626,height=436');
        return false;
    },

    gaFb = function() {
        analytics('CarroCHINO-btoRedesSociales', 'CarroCHINO-FB');
    },
    gaYt = function() {
        analytics('CarroCHINO-btoRedesSociales', 'CarroCHINO-YoutTube');
    },
    gaVisitSite = function() {
        analytics('CarroCHINO-btoHome');
    },
    gaAviso = function() {
        analytics('CarroCHINO-btoPublicaPaso1');
    },
    gaFlecha = function() {
        analytics('CarroCHINO-btoPublicaPaso2');
    },
    gaBusca = function() {
        analytics('CarroCHINO-btoBuscarPaso1');
    },
    gaSearch = function() {
    	var estado,
    		estadoMarca,
    		marcaModeloAnio,
    		valMarca = dom.selMarca.val(),
    		valModelo = dom.selModelo.val(),
    		valAnio = dom.selAnio.val();

    		if (valMarca == ''){
    			valMarca = 'MARCA';
    		}
    		if (valModelo == ''){
				valModelo = 'MODELO';
    		}
			if (valAnio == ''){
				valAnio = 'AÑO';
			}
			
			$.each($(':input[name=estado]'),function(index,value){
			    if($(value).is(':checked')){
			        estado = $(value).val();
			    }
			});
			estadoMarca = estado+'-'+valMarca;
			marcaModeloAnio = valMarca+'-'+valModelo+'-'+valAnio;		
       analytics('CarroCHINO-btoBuscarPaso2', estadoMarca, marcaModeloAnio);
    },
    gaViewVideo = function() {
    	analytics('CarroCHINO-btoVerVideo');
    },
    openVideoWeb = function() {
        analytics('CarroCHINO-btoVerVideo');
        dom.viewVideo.fancybox({
            width: 640,
            height: 480,
            beforeShow: function() {
                var playerWeb = document.getElementById('playerWeb');
                playerWeb.play();
            },
            afterClose: function() {
                window.setTimeout(function() {
                    openLike();
                }, 100);
                analytics('CarroCHINO-btoCerrarVideo');
            }
        }).trigger('click');
    },
    openVideoTv = function() {
        dom.chino.fancybox({
            width: 640,
            height: 480,
            beforeShow: function() {
                var playerTv = document.getElementById('playerTv');
                playerTv.play();
            }
        })
    },
    openLike = function() {
        dom.meGusta.fancybox({
            beforeShow: function() {
                if (dom.btnLike.html().length == 0) {
                    dom.btnLike.append('<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fneoauto.pe&width=125&height=21&colorscheme=light&layout=button_count&action=like&show_faces=true&send=false&appId=168035333223428" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:125px; height:21px;" allowTransparency="true"></iframe>');
                }
            }
        }).trigger('click');
    },
    vidYoutubeWeb = function(){
        dom.ytWeb.fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            },
            afterClose: function() {
                window.setTimeout(function() {
                    openLike();
                }, 100);
                analytics('CarroCHINO-btoCerrarVideo');
            }
        }).trigger('click');
    },
    
    animateChinito = function() {
        var posChino = 201;

        actionChino = function(posChino) {
            dom.chino.css('background-position', '-' + posChino + 'px 0');
        }
        setInterval(function() {
            if (posChino <= 7638) {
                posChino = posChino + 201;
            } else {
                posChino = 201;
            }
            actionChino(posChino);
        }, 100);

    },
    animateAviso = function() {
        var posAviso = 63;
        actionAviso = function(posAviso) {
            dom.aviso.css('background-position', '-' + posAviso + 'px 0');
        }
        setInterval(function() {
            if (posAviso <= 189) {
                posAviso = posAviso + 63;
            } else {
                posAviso = 63;
            }
            actionAviso(posAviso);
        }, 350);
    },
    searchAnimation = function() {
    	dom.car.on({
    		'mouseenter' : function() {
    			dom.buscaVehiculo.slideDown();
    		},
    		'mouseleave' : function() {
    			dom.buscaVehiculo.slideUp();
    		}
    	});
    },
    placeholderOld = function(){
    	if(browser.msie==true&&browser.version=="8.0"||browser.version=="9.0"){
    		dom.txtName.addClass('placeholder-name');
    		dom.txtEmail.addClass('placeholder-email');
    		dom.txtName.on({
    			'focus': function(){
    				$(this).removeClass('placeholder-name');
    			},
    			'blur': function(){
    				if($(this).val()==''){
	    				$(this).addClass('placeholder-name');
    				}else{
    					$(this).removeClass('placeholder-name');
    				}

    			}
    		});
    		dom.txtEmail.on({
    			'focus': function(){
    				$(this).removeClass('placeholder-email');
    			},
    			'blur': function(){
    				if($(this).val()==''){
	    				$(this).addClass('placeholder-email');
    				}else{
    					$(this).removeClass('placeholder-email');
    				}
    			}
    		});
    	}
    }
    return {
        init: function() {
            catchDom();
            bindEvents();
            runFunction();
        }
    }
})();

$(function() {
    Chinito.init();
});