<h1>Ratyli Demo</h1>

    <div id="demo1" class="demo">
        <h2>Default</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo2" class="demo">
        <h2>Configure with Datasets</h2>
        <span class="ratyli" data-rate="2" data-ratemax="3"></span>
    </div>

    <div id="demo3" class="demo">
        <h2>Configure with JS</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo4" class="demo">
        <h2>Custom Signs</h2>
        <span class="ratyli" data-full="X" data-empty="O"></span>
    </div>

    <div id="demo5" class="demo">
        <h2>Font Awesome Signs</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo6" class="demo">
        <h2>Rated Callback</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo7" class="demo">
        <h2>Sign Callbacks</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo8" class="demo">
        <h2>Custom cursor</h2>
        <span class="ratyli"></span>
    </div>

    <div id="demo9" class="demo">
        <h2>Disabled</h2>
        <span class="ratyli" data-rate="3"></span>
    </div>

    <div id="demo10" class="demo">
        <h2>Unrateable</h2>
        <span class="ratyli" data-rate="1"></span>
    </div>

    <footer>
        <p>Fork Ratyli on Github: <a href="https://github.com/peet86/Ratyli">peet86/ratyli</a></p>
    </footer>

/* No CSS needed, but you can pimp the container and the signs as you wish. */


/* all sign style */
.ratyli .rate{color: #ccc; font-size: 24px;}

/* empty sign style */
.ratyli .rate-empty{color: #666;}

/* full sign style after rating*/
.ratyli.rated .rate-full{color: #fe5845;}

/* active signs (hover)*/
.ratyli .rate-active{color: #a94039;}



/* layout styles (only for demo)*/
body{font-family: sans-serif; background:#222; }
h1{color:#00dd9a; text-align:center; font-size:24px;  margin:30px 0;}
h2{color:#fe5845; font-weight:300; font-size:16px; margin:15px 0;}
p{clear:both; color: #ccc; text-align:center; padding:50px 0;}
footer p{font-size: 80%}
a{color:#00dd9a}
.demo{float:left; width:18%; padding:30px 1%; text-align:center;}
@media screen and (max-width: 920px) {
	.demo{float:none; width:90%; padding:20px 5%;}
}

/* GitHub: https://github.com/peet86/Ratyli */

$(function() {
	// Default
	$("#demo1 .ratyli").ratyli();

	// Configure with Datasets
	$("#demo2 .ratyli").ratyli();

	// Configure with JS
	$("#demo3 .ratyli").ratyli({rate:3,max:7});

	// Custom Signs
	$("#demo4 .ratyli").ratyli();

	// Font Awesome Signs
	$("#demo5 .ratyli").ratyli({
		full:"<i class='fa fa-thumbs-up'></i>",
		empty:"<i class='fa fa-thumbs-o-up'></i>",

	});

	// Rated Callback
	$("#demo6 .ratyli").ratyli({
		onRated:function(value,init){
			// rating callback
			if(!init) alert(value);  // prevent run at init
		},
	});

	// Sign Callbacks:
	$("#demo7 .ratyli").ratyli({
		onSignClick:function(target,value){
			// sign click event callback
			alert("clicked: "+value);
		},
		onSignEnter:function(value,target){
			// sign mouseenter event callback
			console.log("enter : "+value);
		},
		onSignLeave:function(value,target){
			// sign mouseleave event callback
			console.log("leave : "+target);
		},
	});

	// Custom cursor
	$("#demo8 .ratyli").ratyli({cursor:"crosshair"});

	// Disabled
	$("#demo9 .ratyli").ratyli({disable:true});

	// Unrateable
	$("#demo10 .ratyli").ratyli({unrateable:true});


});