<script> 
$(function(){
   $(".star").on("mouseover", function(){ 
     var d = $(this).attr("id"); 
     for(i=(d-1); i>=0; i--){
       $(".transparent .star:eq("+i+")").css({"opacity":"1.0"});
     }
   }).on("click", function(){
     var rating = $(this).attr("id"); 
	sessionStorage.setItem("rating", rating);
     $('.rate').css({"left":"-600px"});
	 $(".review").css({"top":"0px"}); 
	 $("#pagina").css({"height":"160px"}); 
	
   }).on("mouseout", function(){ 
     $(".transparent .star").css({"opacity":"0.25"}); 
   });
});



function validateForm() {
    var email = document.forms["reviewform"]["email"].value;
    var review = document.forms["reviewform"]["review"].value;
    var atpos = email.indexOf("@");
    var dotpos = email.lastIndexOf(".");
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=email.length) {
        alert("Not a valid e-mail address");
        return false;
    } else {  
	     var rating=sessionStorage.getItem("rating"); 
		 
		 
$.ajax({
	 type: "POST", data: {review: review, email: email, rating: rating }, 
	 url: "/custom/store_review_POST.php"	 
});


		
	$(".review").css({"top":"0px"});
    $('.review').css({"left":"-600px"});
	$('.thanks').css({"top":"30px"});
		return false;		
		 }
}
		

</script>



<style>
	
#pagina { height:60px; overflow:hidden;
 -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; }
	

.rate {  float:left; position:relative;  top:0px; width:100%; min-width:160px; padding-left:5px;  left:0px;  padding-top:10px;
   -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; 
	color:#000;
	}
	
	
.review { float:left; position: absolute;  top:-600px; width:100%; min-width:160px;  left:0px; 
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; 
	 }
	 
	
.thanks { float:left; position:absolute; top:-80px; width:177px;   
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
	}
.thankscolor { font-size:15px; font-weight:bold; color:#000;white-space:normal;}


.transparent { position: relative; } 
.star { background: url("../images/Feedback_red_star.png"); background-repeat:no-repeat; cursor: pointer; float: left; height: 30px; width: 20px; } 
.transparent .star { opacity: .25;  } 
.star { opacity: 1.0;  } 
.relat { position: relative; width: 0; height: 0; white-space:normal;}




/* FORM STYLE */
label { display:block; color:#000000;  }
.email  { font-size:11px;width:158px; height:16px;display:block;}
.texta { width:152px; height:30px; font-size:11px;	}

.submit { margin-top:10px; 
    background-color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff; width:80px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}

.submit:hover {
    border: none;
    background: #f00213;
    box-shadow: 0px 0px 1px #777;
}

#clear {
	clear:both;
}

</style>




<div id="pagina">

    <div class="relat">
        <div class="thanks">
        <span class="thankscolor">Thank you for submitting your review</span>
        </div>
    </div> 

    <div class="relat">
      <div class="rate">
            &nbsp;Select 1-5 stars
            <div class="transparent">
            <div class="star" id="1"></div>
            <div class="star" id="2"></div>
            <div class="star" id="3"></div>
            <div class="star" id="4"></div>
            <div class="star" id="5"></div>
            </div>
        </div>  
    </div>


    <div class="relat">
        <div class="review">
        
        <form name ="reviewform"  method="post" enctype="multipart/form-data" onSubmit="return validateForm()">
       <label>Your comment</label>
        <textarea  class="texta" name="review" ></textarea>
        <label style="margin-top:10px;">E-Mail</label>
        <input type="text" class="email" name="email"/>
        <input class="submit" name="submit" type="submit" value="SEND">
        </form>
        </div>
    </div>
<div id="clear"></div>
</div>