$(document).ready(function(){
var row_left=0;
var $pattern = $('.pattern');
var sclicked=false;
var rclicked=false;

for (var i = 0; i < 12; i++) {
	var init_left= 0;
	var row =document.createElement('div');
	row.setAttribute('class','row');
	var rowstyle={left : ""+row_left+"px"};
		$(row).css(rowstyle);
		row_left= row_left-40;
	for (var j = 1; j < 26; j++) {	
		var star = document.createElement('div');
		star.setAttribute('class','star');
		var style={left : ""+init_left+"px"};
		$(star).css(style);
		init_left= init_left+80;
		$(row).append(star);
	}
	$($pattern).append(row);
};
$( ".sbtn" ).click(function(e) {
	
	if(sclicked){
		$(e.target).css("background-color","#393E42");
		$(e.target).prev("i").css("opacity","0");
		$(".star").removeClass('scale anim');
		sclicked=false;
	}else{
		
		$(e.target).css("background-color","#3EA194");
		$(e.target).prev("i").css("opacity","1");
		$(".star").addClass('scale');
		if(rclicked){$(".star").removeClass('scale rotate').addClass('anim');}
		sclicked=true;
	}
});
  
 $( ".rbtn" ).click(function(e) {
 	
 	if(rclicked){
 		$(e.target).css("background-color","#393E42");
 		$(e.target).prev("i").css("opacity","0");
		$(".star").removeClass('rotate anim');
		rclicked=false;
	}else{

		$(e.target).css("background-color","#3EA194");
		$(e.target).prev("i").css("opacity","1");
		$(".star").addClass('rotate');
		if(sclicked){$(".star").removeClass('scale rotate').addClass('anim');}
		rclicked=true;
	}
 });   
});