j=jQuery;

j(document).ready(function(){


function tipguide(){
if(j('.active_elemcircle').length){
j('.active_elemcircle').children('.circle_beneficio').append('<div class="remove_bae" style="position:absolute; z-index:2; background-color:black; opacity: 0.6; width:350px; height:350px; border-radius: 350px; -webkit-border-radius: 350px; -moz-border-radius: 350px; filter: alpha(opacity=60);"></div>');
j('.active_elemcircle').children('.circle_beneficio').append('<p class="white remove_bae" style="position:absolute;z-index:3;top: 43%; left:35px; text-shadow: 2px 2px 7px white; cursor: default;text-align:center">¿Con Drive o sin Drive?<br />Descubre los beneficios que tiene Drive para ti.</p><p class="white remove_bae" style="position:absolute;z-index:3;top: 52%; left:53px; text-shadow: 1px 1px 6px white; font-size:9px; cursor: default;text-align:center">pasa el mouse por encima luego de escoger una opción</p>');}
}
tipguide();

//j('#buble_bg').pan({fps: 20, speed: 1, dir: 'right'});
/*j('body').css({opacity: 0, filter: 'alpha(opacity=0)', marginTop: '-10px'}).animate({opacity: 1, filter: 'alpha(opacity=100)', marginTop: 0}, 600);
*/
	j('.display_tool').hover(function(){
		if(j('.display_tool_overlay').length == true )
			{j(this).remove('.display_tool_overlay');
			return;
			}else{

		offset = j(this).offset();
		var rel = j(this).attr('rel');

		j('body').append('<div class="display_tool_overlay">'+rel+'</div>');
		j('.display_tool_overlay').css({top: offset.top - 40 + 'px', left: offset.left - 50 + 'px', opacity: 0,  filter: 'alpha(opacity=0)'}).animate({opacity: 0.8, filter: 'alpha(opacity=80)', top: offset.top - 20 + 'px', left: offset.left - 65 + 'px'}, 300);
}
}, function(){
j('.display_tool_overlay').remove();
});
   

j('.tips_circle').hover(function(){
j(this).animate({ webkitBoxShadow: '0px 0px 7px #b67dad', mozBoxShadow: '0px 0px 7px #b67dad', boxShadow: '0px 0px 7px #b67dad'}, 250);
j(this).find('.tips_inner_circle').fadeOut('slow');
}, function(){
j(this).animate({webkitBoxShadow: '0px 0px 7px #666666', mozBoxShadow: '0px 0px 7px #666666', boxShadow: '0px 0px 7px #666666'}, 250);
j(this).find('.tips_inner_circle').fadeIn('slow');
});


j('.tips_circle').click(function(){
	if(j(this).hasClass('active_tip')){}else{
		j('.tips_circle').removeClass('active_tip').addClass('inactive_tip');
		j('.circle_title').fadeOut('fast');
		j('.back_tip').fadeIn('slow');
		j('.back_tip').click(function(){
			j('.back_tip').fadeOut('fast')
			j('.tip_content').children().fadeOut('slow');
			j('.tips_circle').css({zIndex:1}).animate({width: 200+'px', height: 200+'px', opacity:1, filter: 'alpha(opacity=100)', top: 210+'px'}, 250, function(){
				j('.inactive_tip > div:first-child').css({margin: '25px'});
				j('.tips_circle').removeClass('inactive_tip active_tip');
				//j('.tips_circle > div:first-child').animate({margin: '25px'});
				j('.tips_circle > div:first-child').animate({width: 150+'px', height: 150+'px'}); 
				j('.tips_circle').find('.tips_inner_circle').animate({width: 150+'px', height: 150+'px'});
				j('.tips_circle:eq(0)').animate({left: 0});
				j('.tips_circle:eq(1)').animate({left: 346+'px'});
				j('.tips_circle:eq(2)').animate({left: 693+'px'});
				if(j('.circle_title').is(':hidden')){j('.circle_title').fadeIn('slow');}else{}
			});
		});
		if(j(this).hasClass('inactive_tip')){j(this).removeClass('inactive_tip'); j(this).addClass('active_tip');}
		j('.inactive_tip').css({zIndex: 1}).animate({left: 0, opacity: '0.5', filter: 'alpha(opacity=50)', width: 120+'px', height: 120+'px'}, 250);
			j('.inactive_tip > div:first-child').animate({width: 90+'px', height: 90+'px', margin: '15px'}, 250);
			j('.inactive_tip').find('.tips_inner_circle').animate({width: 90+'px', height: 90+'px'}, 250);
		j('.inactive_tip:eq(1)').animate({top: 290+'px'}, 250);
		j('.inactive_tip:eq(0)').animate({top: 210+'px'}, 250);
		j('.active_tip > div:first-child').animate({width: 150+'px', height: 150+'px', margin: 25+'px'}, 250);
		j('.active_tip').find('.tips_inner_circle').animate({width: 150+'px', height: 150+'px'}, 250);
		j('.active_tip').css({zIndex: 4}).animate({left: 50 + 'px', top: 210+'px', opacity: 1, filter: 'alpha(opacity=100)', width: 200+'px', height: 200+'px'}, 250, function(){
			var direccion = j(this).find('a').attr('rel');
			if(j('.tip_content').is(':hidden'))
				{j(direccion).fadeIn('slow')}else
				{j('.tip_content_inner').fadeOut('slow').animate({right: 0+'px'}, 250, function(){
					j(direccion).fadeIn('slow');}
				)}
	});}
	
});


/*hover fx*/
/*j('.unilever_logo').hover(function(){j(this).animate({opacity: 1, filter:'alpha(opacity=100)'}, 250);
}, function(){j(this).animate({opacity: 0.6, filter:'alpha(opacity=100)'}, 200);
});
*/


j('.back_tip').hover(function(){
j(this).animate({boxShadow: '1px 1px 8px #b67dad', webkitBoxShadow: '1px 1px 8px #b67dad', mozBoxShadow: '1px 1px 8px #b67dad'}, 350);
}, function(){
j(this).animate({boxShadow: '0px 0px 0px', webkitBoxShadow: '0px 0px 0px', mozBoxShadow: '0px 0px 0px'}, 350);
});









/*beneficios clases zoom*/

function lupita(where, img){
offset = j(where).offset();
j(where).append('<div class="lupita remove" style="cursor:none; box-shadow:2px 2px 8px black; -webkit-box-shadow:2px 2px 8px #666666; -moz-box-shadow:2px 2px 8px #666666;z-index: 6;position:absolute;border: 3px solid white; width: 200px; height: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; background: url(http://www.drive.cl/drive_2/img/beneficio/'+ img +'.jpg);"><div class="glass" style="cursor:none;padding:3px;width: 194px; height: 194px; background: url(http://www.drive.cl/drive_2/img/overlay.png) center center no-repeat;"></div></div>');
j(where).bind('mousemove', function(e){
				var x = e.pageX - offset.left;
				var y = e.pageY - offset.top;
				//alert(x);
				if(x < 0 || x> 352 || y< 0|| y> 352){j('.remove').remove();}else{
				j('.lupita').css({backgroundPosition: '-'+x+'px'+' '+'-'+y+'px', top: y-100+'px'});
				j('.lupita').css({top: y-100+'px', left: x-100+'px'});
				j('.lupita').animate({backgroundPosition: '-'+x+'px'+' '+'-'+y+'px', top: y-100+'px', left: x-100+'px'}, 0);
			}
			});
			
}




	/*add class to btn*/
j('.btn_drornot').click(function(){
if(j(this).hasClass('active_drornot')){
	j(this).removeClass('active_drornot'); if(j('.remove_bae').length != true){tipguide();}}else if(j('.active_drornot').length){j('.active_drornot').removeClass('active_drornot'); j(this).addClass('active_drornot');}else{
	j(this).addClass('active_drornot'); if(j('.remove_bae').length){j('.remove_bae').remove();}
	}
});
	/*end add Class to btn*/



/*
j('.display_tool').click(function(){
			
			
			var getImage = j(this).parent().css("background-image");
			j('body').append('<div class="display_overlay_cloth"></div>');
			j('.display_overlay_cloth').css({width: 0, height: 0, top: '50%', left: '50%'}).animate({width: '100%', height: '100%', top: '0%', left: '0%'}, 150);
			j('body').append('<div class="display_cloth" style="background-image:'+getImage+'"></div>');
			j('body').append('<div class="close_display_cloth"></div>');
			j('.display_cloth').css({opacity: 0}).animate({opacity: 1}, 200);
			j('.close_display_cloth').css({opacity: 0}).animate({opacity: 1}, 200);
			j('.close_display_cloth').click(function(){j('.close_display_cloth, .display_cloth, .display_overlay_cloth').animate({opacity: 0}, 200, function(){j(this).remove()});});
			j('.display_cloth').hover(function(){
			winW = j(window).width();
			winH = j(window).height();
			
				j(this).mousemove(function(e){
				var x = e.pageX - this.offsetLeft;
				var y = e.pageY - this.offsetTop;
				j(this).animate({backgroundPosition: '-'+x*5+'px'+' '+'-'+y*5+'px'}, 1);
				});
			}, function(){
			j(this).stop();
			});
});*/



j('.circle_beneficio').hover(function(){/*entrada hover true*/

	var getCurrentimg = j(this).css("background-image");
	if(j('.active_drornot', '.active_elemcircle').length == true){
		var checkBtnpress = j('.active_drornot').attr('title');
		var beneficioSwitch = [j(this).hasClass('decoloracionjs'), j(this).hasClass('peluzajs'), j(this).hasClass('fibrasjs')];
		switch(beneficioSwitch[0] == true || beneficioSwitch[1] == true || beneficioSwitch[2] == true){
		case beneficioSwitch[0] == true:
		if(j(this).parent().hasClass('inactive_elemcircle') == true){}else{
		if(checkBtnpress == 'con Drive'){
		lupita('.decoloracionjs', 'decoloracioncdr');		
		}else{lupita('.decoloracionjs', 'decoloracionsdr');}
		}
		break;
		case beneficioSwitch[1] == true:
		if(j(this).parent().hasClass('inactive_elemcircle') == true){}else{
		if(checkBtnpress == 'con Drive'){lupita('.peluzajs', 'peluzacdr');}else{lupita('.peluzajs', 'peluzasdr');}
		}
		break;
		case beneficioSwitch[2] == true:
		if(j(this).parent().hasClass('inactive_elemcircle') == true){}else{
		if(checkBtnpress == 'con Drive'){lupita('.fibrasjs', 'fibrascdr');}else{lupita('.fibrasjs', 'fibrassdr');}
		}
		break;
		}
		
		
	}else{/*entrada hover false*/
		
		if(j(this).parent().hasClass('inactive_elemcircle') == true)
		{
		var inactiveDisplay = [j(this).hasClass('decoloracionjs'), j(this).hasClass('peluzajs'), j(this).hasClass('fibrasjs')];
		switch(inactiveDisplay[0] == true || inactiveDisplay[1] == true || inactiveDisplay[2] == true){
case inactiveDisplay[0] == true:
j(this).append('<div class="remove bencircletop" id="iefixover" style="position:absolute; z-index:6; background-color:black; opacity: 0.6; filter: alpha(opacity=60); width:100px; height:100px; display: block;"></div>');
j(this).append('<p class="white remove" style="position:absolute;z-index:7; top: 45%; left:15px; text-shadow: 2px 2px 7px white; display: block; cursor: default;">Decoloración</p>');
j('.remove').css({display: 'none'});
break;
case inactiveDisplay[1] == true:
j(this).append('<div class="remove bencircletop" style="position:absolute; z-index:6; background-color:black; opacity: 0.6; filter: alpha(opacity=60); width:100px; height:100px; display: block;"></div>');
j(this).append('<p class="white remove" style="position:absolute;z-index:7; top: 45%; left:30px; text-shadow: 2px 2px 7px white; display: block; cursor: default;">Peeling</p>');
j('.remove').css({display: 'none'});
break;
case inactiveDisplay[2] == true:
j(this).append('<div class="remove bencircletop" style="position:absolute; z-index:6; background-color:black; opacity: 0.6; filter: alpha(opacity=60); width:100px; height:100px; display: block;"></div>');
j(this).append('<p class="white remove" style="position:absolute;z-index:7; top: 45%; left:30px; text-shadow: 2px 2px 7px white; display: block; cursor: default;">Fibras</p>');
j('.remove').css({display: 'none'});
break;
}

		}else{
		/*j(this).append('<div class="remove" style="position:absolute; z-index:2; background-color:black; opacity: 0.6; filter: alpha(opacity=60); width:350px; height:350px; border-radius: 350px; -webkit-border-radius: 350px; -moz-border-radius: 350px;"></div>');
		j(this).append('<p class="white remove" style="position:absolute;z-index:3;top: 48%; left:110px; text-shadow: 2px 2px 7px white; cursor: default;">¿Con Drive o sin Drive?</p>');
		j('.remove').css({display: 'none'});*/
		}
		if(j('.remove').is(':hidden'))
			{j('.remove').fadeIn('slow');}else{
				j('.remove').fadeOut('slow');}
			}

/*salida hover*/
}, function(){
/*remove all*/

j('.remove').remove();

});


/*
j('.inactive_elemcircle').click(function(){
j('.remove').remove();
var pos = j(this).css('top', 'left');
	if(j('.active_elemcircle').length){
		if(j('.active_elemcircle').find('.btn_group').is(':hidden')){
			j('.active_elemcircle').find('btn_group').fadeIn('slow');}else{
			j('.active_elemcircle').find('btn_group').fadeOut('slow');
			}
		j('.active_elemcircle').animate({width: '350px', height: '350px', top: 0, left: '30px'}, 250);
		j('.active_elemcircle').removeClass('active_elemcircle').addClass('inactive_elemcircle');
		
		j(this).animate({top: '20px', left: '60px'}, 250);
		j(this).find('circle_beneficio').css({width: '100px', height: '100px'}).animate({width: '350px', height: '350px'}, 250, function(){
			
		
		});
		j(this).find('btn_group').fadeIn('slow');
		j(this).removeClass('inactive_elemcircle').addClass('active_elemcircle');
	}else{
	
	}
});
*/



j('.contenedor_elemcircle').click(function(){
	
	if(j(this).hasClass('active_elemcircle')){}else{
		j('.remove_bae').remove();
		j('.remove').remove();
		if(j('.active_drornot').length){j('.active_drornot').removeClass('active_drornot');}
		j('.contenedor_elemcircle').removeClass('active_elemcircle').addClass('inactive_elemcircle');

		if(j(this).hasClass('inactive_elemcircle')){j(this).removeClass('inactive_elemcircle'); j(this).addClass('active_elemcircle');}
		j('.inactive_elemcircle').animate({opacity: '0.8', filter: 'alpha(opacity=80)', width: 100+'px', height: 100+'px'}, 250);
			j('.inactive_elemcircle > div:first-child').animate({width: 100+'px', height: 100+'px'}, 250);
			
		j('.inactive_elemcircle:eq(0)').animate({top: 0+'px', left: 40+'px'}, 250);
		j('.inactive_elemcircle:eq(1)').animate({top: 70+'px', left: 0}, 250);
		j('.active_elemcircle > div:first-child').animate({width: 350+'px', height: 350+'px'}, 250);
		j(this).animate({left: 60 + 'px', top: 20+'px', opacity: 1, width: 350+'px', height: 350+'px'}, 250, function(){
			if(j('.active_elemcircle').find('.btn_group').is(':hidden')){
			j('.active_elemcircle').find('btn_group').fadeIn('slow'); }else{
			j('.active_elemcircle').find('btn_group').fadeOut('slow');
		}		
		});
		
		var showinfoben = [j('#decoloracion_group').hasClass('active_elemcircle') == true, j('#peluza_group').hasClass('active_elemcircle') == true, j('#fibras_group').hasClass('active_elemcircle') == true]
		switch(showinfoben[0] == true || showinfoben[1] == true || showinfoben[2] == true){
		case showinfoben[0] == true:
		if(j('#decoloracion').is(':hidden')){
	j('#contenidos_beneficio').children().css('display', 'none').fadeOut('slow');
	j('#decoloracion').fadeIn('slow');
	}
		break;
		case showinfoben[1] == true:
		if(j('#peluza').is(':hidden')){
	j('#contenidos_beneficio').children().css('display', 'none').fadeOut('slow');
	j('#peluza').fadeIn('slow');
	}
		break;
		case showinfoben[2] == true:
		if(j('#fibras').is(':hidden')){
	j('#contenidos_beneficio').children().css('display', 'none').fadeOut('slow');
	j('#fibras').fadeIn('slow');
	}
		break;
		}
		tipguide();}
	
});





/*
 productos*/

j('.menu_productos').click(function(){
	j('.activedrm').removeClass('activedrm');
	var relvalue = [j(this).attr('rel') == 'Drive Liquido', j(this).attr('rel') == 'Drive Perfect results', j(this).attr('rel') == 'Perfect Black', j(this).attr('rel') == 'Perfect White',];
	switch(relvalue[0] == true || relvalue[1] == true || relvalue[2] == true || relvalue[3] == true){
	case relvalue[0] == true:
	if(j('#contenido_drliquido').is(':hidden')){
	j('.contenido').children().css('display', 'none').fadeOut('slow');
	j('#contenido_drliquido').fadeIn('slow');
	j('.title_content').children().text('Triple limpieza en cada gota');
	j('#dr_liquido a').addClass('activedrm');
	}
	break;
	case relvalue[1] == true:
	if(j('#contenido_drblue').is(':hidden')){
	j('.contenido').children().css('display', 'none').fadeOut('slow');
	j('#contenido_drblue').fadeIn('slow');
	j('.title_content').children().text('Cuidado superior, fibra por fibra');
	j('#dr_blue a').addClass('activedrm');
	}
	break;
	case relvalue[2] == true:
	if(j('#contenido_drblack').is(':hidden')){
	j('.contenido').children().css('display', 'none').fadeOut('slow');
	j('#contenido_drblack').fadeIn('slow');
	j('.title_content').children().text('Negros perfectos');
	j('#dr_black a').addClass('activedrm');
	}
	break;
	case relvalue[3] == true:
	if(j('#contenido_drwhite').is(':hidden')){
	j('.contenido').children().css('display', 'none').fadeOut('slow');
	j('#contenido_drwhite').fadeIn('slow');
	j('.title_content').children().text('Blancos perfectos');
	j('#dr_white a').addClass('activedrm');
	}
	break;
	}
});



}); /*end document ready*/