$(document).ready(function(){

//hide initial bb/nm
	$(".name").hide();
	$(".bubble").hide();
	
	$(".myarea").mouseover(function(){
		var txt;
		txt=$(this).attr("id");
		//change image map
		$("#img"+txt).attr('src','../images/EN/'+txt+'/rep.png');
		//show particular bubble/name			
		$("div#divname"+txt).fadeTo("fast",1);
		if ($("title").html() == "TaTeTu | Fun Eco Stories | Toddler, Kids, and Children’s Organic Clothing | Eco Friendly Baby Clothes")
		{		
		//show particular bubble/name			
		$("div#divbb"+txt).fadeTo("fast",1);
		}
		else
		{
		}
		
	});
	
	
	$(".myarea").mouseout(function(){
		var txt;
		txt=$(this).attr("id");		
		//change image map
		$("#img"+txt).attr('src','../images/EN/'+txt+'/ori.png');
		//show particular bubble/name			
		$("div#divname"+txt).fadeTo("slow",0.1);
		
		if ($("title").html() == "TaTeTu | Fun Eco Stories | Toddler, Kids, and Children’s Organic Clothing | Eco Friendly Baby Clothes")
		{			
		//show particular bubble/name			
		$("div#divbb"+txt).fadeTo("slow",0.0);
		}
		else
		{
		}
		
	});	
	
	
	
	//******menu functionality implement********\\ 
	var pageName;
	pageName = document.title;
	setMenuButton(pageName);	
	
	
	//******random cloud placement******\\	
	//******social media link******\\	
	if (document.title != "TaTeTu | Fun Eco Stories | Eco Friendly Organic Baby Clothes")
	{	
	placeClouds();	
	createSocialMediaDiv();
	logoHomeLink()
	}	
	else
	{
	moveCopy();
	createSocialMediaDiv();
	}
	
	
	
	
	
	
	
	
	
	//welcome buttons on off
	$(".btn").mouseover(function(){
		var txt;
		txt=$(this).attr("id");			
		
		//change image map
		$("#"+txt).attr('src','../images/EN/buttons/'+txt+'_over.png');			
	});
	
	
	$(".btn").mouseout(function(){
		var txt;
		txt=$(this).attr("id");
		
		//change image map
		$("#"+txt).attr('src','../images/EN/buttons/'+txt+'.png');		
		
	});		
	  
});



//some of the divs are created by js so it needs to wait
$(document).ready(function(){


});


//******menu functionality********\\

function setMenuButton(pageName) {
   switch (pageName) {
    case 'TaTeTu;-) 3Rs':      
     $("#3erres").attr('src','../images/EN/menu/3rs2.png');    
    break 

    case 'TaTeTu;-) home':      
     $("#inicio").attr('src','../images/EN/menu/home2.png');    
    break   
    
    case 'TaTeTu;-) elements':      
     $("#elementos").attr('src','../images/EN/menu/elements2.png');   
    break 
    
    case 'TaTeTu;-) tutis':      
     $("#aminuquitos").attr('src','../images/EN/menu/tutis2.png');    
    break 
    
    case 'TaTeTu;-) tutiventures':      
     $("#aminunturas").attr('src','../images/EN/menu/tutiventures2.png');    
    break 
    
    case 'TaTeTu;-) tutibook':      
     $("#aminubook").attr('src','../images/EN/menu/tutibook2.png');    
    break
    
    case 'TaTeTu;-) contact us!':      
     $("#contactanos").attr('src','../images/EN/menu/contact2.png');    
    break
    
    default:
    $("#3erres").attr('src','../images/EN/menu/3rs.png');
    $("#inicio").attr('src','../images/EN/menu/home.png');
    $("#elementos").attr('src','../images/EN/menu/elements.png');
    $("#aminuquitos").attr('src','../images/EN/menu/tutis.png');
    $("#aminunturas").attr('src','../images/EN/menu/tutiventures.png');
    $("#aminubook").attr('src','../images/EN/menu/tutibook.png');
    $("#contactanos").attr('src','../images/EN/menu/contact.png');
    break
     

   }

};







//******random cloud placement******\\



        function placeClouds()
        {
            //left Cloud position
            var posLC = [];
            posLC[0] = 50; //left
            posLC[1] = 100; //top
            
            //middle Cloud position
            var posMC = [];
            posMC[0] = 480;  //left
            posMC[1] = 10;  //top
            
            //right Cloud position
            var posRC = [];
            posRC[0] = 920; //left
            posRC[1] = 180; //top
            
             //PRODUCTS Cloud position
            var posProducts = [];
            posProducts[0] = 910; //left
            posProducts[1] = 60; //top
            
            
            //range
            var rangeLC =[];
            rangeLC[0]=40;
            rangeLC[1]=20;
            
            var rangeMC =[];
            rangeMC[0]=70;
            rangeMC[1]=10;
            
            var rangeRC =[];
            rangeRC[0]=50;
            rangeRC[1]=10;
            
            var rangeProducts =[];
            rangeProducts[0]=30;
            rangeProducts[1]=10;
            
            
            //LEFT cloud
            createCloudDiv(posLC[0], posLC[1], rangeLC[0], rangeLC[1], "leftCloud");
            //MIDDLE cloud
            createCloudDiv(posMC[0], posMC[1], rangeMC[0], rangeMC[1], "midCloud");
            //RIGHT cloud
            createCloudDiv(posRC[0], posRC[1], rangeRC[0], rangeRC[1], "rightCloud"); 
            
            //PRODUCTS cloud
            createProductLink(posProducts[0], posProducts[1], rangeProducts[0], rangeProducts[1], "productsCloud");          
             //alert("hello");                 
            
        }





        function rndTopVal(startVal, domRange) 
        {
		    var valOut = 0;
			valOut = (Math.floor(Math.random()*domRange))+startVal;			
			return valOut;
		}
		
		
		function createCloudDiv(left, top, leftRange, topRange, idName)//initial positioning TOP-LEFT corner, range TOP&LEFT, div id name
        {
            var divCloud = document.createElement("div"); 
             
            divCloud.className ="randomClouds";         
            divCloud.id = idName;            
            divCloud.setAttribute("align","center");   
            divCloud.style.left = rndTopVal(left, leftRange).toString()+"px";            
            divCloud.style.top = rndTopVal(top, topRange).toString()+"px";              
            //divCloud.innerHTML = "Cloudddddd";                           
            
            document.getElementById("wrapper").appendChild(divCloud);
            
            
            var imgCloud = document.createElement("img");
            //imgCloud = "btn";
            
            switch (idName) {
            case 'leftCloud':      
             imgCloud.setAttribute("src", "../images/EN/clouds/6.png");    
            break 

            case 'midCloud':      
             imgCloud.setAttribute("src", "../images/EN/clouds/3.png");    
            break
            
            case 'rightCloud':      
             imgCloud.setAttribute("src", "../images/EN/clouds/1.png");    
            break
            
            
            }      
            
            imgCloud.setAttribute("class", "btn");
            document.getElementById(idName).appendChild(imgCloud);                         
        }
        
   
   
   //PRODUCT LINK
   
       function createProductLink(left, top, leftRange, topRange, idName)
       {
            var divCloud = document.createElement("div");              
            divCloud.className ="randomClouds";         
            divCloud.id = idName;            
            divCloud.setAttribute("align","center");   
            divCloud.style.left = rndTopVal(left, leftRange).toString()+"px";            
            divCloud.style.top = rndTopVal(top, topRange).toString()+"px";
            divCloud.style.position = "absolute";              
                                      
            
            document.getElementById("wrapper").appendChild(divCloud);
            
            
            var linkCloud = document.createElement('a');
            linkCloud.id = "productsLink";
            linkCloud.setAttribute("href", "http://tatetu.myshopify.com/collections/all"); 
            linkCloud.style.position = "absolute";           
            document.getElementById(idName).appendChild(linkCloud); 
            
            
            var imgCloud = document.createElement('img');
            imgCloud.className = "btn";
            imgCloud.id = "products";
            imgCloud.setAttribute("src", "../images/EN/buttons/products.png");  
            imgCloud.style.position = "absolute";          
            document.getElementById("productsLink").appendChild(imgCloud); 
                                
        }
   
   
        
        
//XX******ENDrandom cloud placement******XX\\



//SOCIAL MEDIA LINKS PLACEMENT
        function createSocialMediaDiv()
        {
			var sharethisIcons = "";
			sharethisIcons += "<span  class='st_sharethis_large' ></span>"; //sharethis
			
			var divSM = document.createElement("div");
            divSM.className ="SocialMedia";         
            divSM.id = "idSM_div";            
            divSM.setAttribute("align","right");               
            divSM.style.position = "absolute"; 
			divSM.innerHTML = sharethisIcons;            
            document.getElementById("wrapper").appendChild(divSM);
			
            var divFB_SM = document.createElement("div");
            divFB_SM.className ="SocialMedia_fb";         
            divFB_SM.id = "idFB_SM_div";            
            divFB_SM.setAttribute("align","center");               
            divFB_SM.style.position = "absolute";   
            document.getElementById("wrapper").appendChild(divFB_SM);            
			
            //FACEBOOK
            var linkFB = document.createElement('a');
            linkFB.className ="linkSocialMedia";
            linkFB.id = "linkFB";            
            linkFB.setAttribute("href", "http://www.facebook.com/pages/Tatetu/182138905177403"); 
            linkFB.setAttribute("target", "_blank"); 
            linkFB.style.position = "absolute";                                    
            linkFB.style.left = "6px";                    
            document.getElementById("idFB_SM_div").appendChild(linkFB);             
            
            var imgFB = document.createElement('img');
            imgFB.className = "linkSocialMedia";
            imgFB.id = "products";
            imgFB.setAttribute("src", "../images/ES/socialMedia/FB.png");  
            imgFB.setAttribute("width", "35");  
            imgFB.setAttribute("height", "35");  
            imgFB.style.position = "absolute";          
            document.getElementById("linkFB").appendChild(imgFB); 
			
			//TWITTER
            var linkTwitter = document.createElement('a');
            linkTwitter.className ="linkSocialMedia";
            linkTwitter.id = "linkTwitter";            
            linkTwitter.setAttribute("href", "https://twitter.com/#!/tatetuland"); 
            linkTwitter.setAttribute("target", "_blank"); 
            linkTwitter.style.position = "absolute";                                    
            linkTwitter.style.left = "44px";                    
            document.getElementById("idFB_SM_div").appendChild(linkTwitter);             
            
            var imgTwitter = document.createElement('img');
            imgTwitter.className = "linkSocialMedia";
            imgTwitter.id = "products";
            imgTwitter.setAttribute("src", "../images/ES/socialMedia/TW.png");  
            imgTwitter.setAttribute("width", "35");  
            imgTwitter.setAttribute("height", "35"); 
			imgTwitter.style.position = "absolute";                    
            document.getElementById("linkTwitter").appendChild(imgTwitter); 
            
            //MAIL
            var linkMail = document.createElement('a');
            linkMail.className ="linkSocialMedia";
            linkMail.id = "linkMail";            
            linkMail.setAttribute("href", "mailto:info@tatetu.com"); 
            linkMail.style.position = "absolute";                                    
            linkMail.style.left = "82px";                    
            document.getElementById("idFB_SM_div").appendChild(linkMail);             
            
            var imgMail = document.createElement('img');
            imgMail.className = "linkSocialMedia";
            imgMail.id = "products";
            imgMail.setAttribute("src", "../images/ES/socialMedia/mail.png");  
            imgMail.setAttribute("width", "35");  
            imgMail.setAttribute("height", "35"); 
			imgMail.style.position = "absolute";                    
            document.getElementById("linkMail").appendChild(imgMail);     
        }
        /*
        function createSocialMediaDiv()
        {
            var divSM = document.createElement("div");
            divSM.className ="SocialMedia";         
            divSM.id = "idSM_div";            
            divSM.setAttribute("align","center");               
            divSM.style.position = "absolute";            
            
            document.getElementById("wrapper").appendChild(divSM);
            
            
            var spacing = 5; //spacing between the icons
            var imgPosition =0;
            
            //FACEBOOK
            var linkFB = document.createElement('a');
            linkFB.className ="linkSocialMedia";
            linkFB.id = "linkFB";            
            linkFB.setAttribute("href", "http://www.facebook.com/pages/Tatetu/182138905177403"); 
            linkFB.style.position = "absolute";                        
            
            linkFB.style.left = "0px";                    
            document.getElementById("idSM_div").appendChild(linkFB); 
            
            
            var imgFB = document.createElement('img');
            imgFB.className = "linkSocialMedia";
            imgFB.id = "products";
            imgFB.setAttribute("src", "../images/EN/socialMedia/FB.png");  
            imgFB.style.position = "absolute";          
            document.getElementById("linkFB").appendChild(imgFB); 
            
            //change the image path   
            
            
        }
        */
        
        //link to home page
        function logoHomeLink()
        {
        
        var linkLogo = document.createElement('a');        
        linkLogo.id = "linkLogo"; 
        linkLogo.setAttribute("href", "../RT/index.htm"); 
        linkLogo.style.position = "absolute"; 
        linkLogo.style.height = "90px";
        linkLogo.style.width = "inherit";
        linkLogo.style.top = "0px";
        linkLogo.style.left = "inherit";
        linkLogo.style.zIndex = 5;
        
        var elems = document.getElementById('logo').childNodes; //arr that contains   
        
        //children.length
        //var elem = elems[0];  
        //elem.style.position = "absolute";     
        //document.getElementById("linkLogo").appendChild(elem);        
        document.getElementById("logo").appendChild(linkLogo);   
        
        }      
        
            
       //move copyrigth
        function moveCopy()
        {
        var copy = document.getElementById("copy");
        copy.style.left = "0px";
        }
        
            

//slider code


       $(function() {
		//scrollpane parts
		var scrollPane = $( ".scroll-pane" ),
			scrollContent = $( ".scroll-content" );
		
		//build slider
		var scrollbar = $( ".scroll-bar" ).slider({
			slide: function( event, ui ) {
				if ( scrollContent.width() > scrollPane.width() ) {
					scrollContent.css( "margin-left", Math.round(
						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
					) + "px" );
				} else {
					scrollContent.css( "margin-left", 0 );
				}
			}
		});
		
		//append icon to handle
		var handleHelper = scrollbar.find( ".ui-slider-handle" )
		.mousedown(function() {
			scrollbar.width( handleHelper.width() );
		})
		.mouseup(function() {
			scrollbar.width( "100%" );
		})
		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css( "overflow", "hidden" );
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar() {
		    var handleRatio = 1;
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = (scrollPane.width() - ( proportion * scrollPane.width() ))*handleRatio;
			scrollbar.find( ".ui-slider-handle" ).css({
				width: handleSize,
				"margin-left": -handleSize / 2
			});
			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
		}
		
		//reset slider value based on scroll content position
		function resetValue() {
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
				parseInt( scrollContent.css( "margin-left" ) );
			var percentage = Math.round( leftVal / remainder * 100 );
			scrollbar.slider( "value", percentage );
		}
		
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent() {
				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
				var gap = scrollPane.width() - showing;
				if ( gap > 0 ) {
					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
				}
		}
		
		//change handle position on window resize
		$( window ).resize(function() {
			resetValue();
			sizeScrollbar();
			reflowContent();
		});
		//init scrollbar size
		setTimeout( sizeScrollbar, 10 );//safari wants a timeout
	});