$(document).ready(function(){
	//POST json instead of GET
	jQuery.extend({
		postJSON: function( url, data, callback) {
				return jQuery.post(url, data, callback, "json");
			}
	});
	$(document).keyup(function(e) {
	  if (e.keyCode == 27) { $('#hatpop').remove(); }   // esc
	});
});

function hatPopup(styleId){
	$.postJSON('hatdisplay.php',{dyn:'popup',id:styleId},function(data){ displayPop(data); });
}
//handle hatPopup
function displayPop(data){
	var pop = "<div class='hatpopup' id='hatpop'>";
	pop = pop+ "<div class='hatpoptitle'>"+data.data.name+"<div class='hatpopclose'></div></div>";
	pop = pop+ "<div class='hatdatacol'>";
	pop = pop+ "<div class='bigcate hatdata'><span class='datalabel'>Category:</span>"+data.data.category+"</div>";
	pop = pop+ "<div class='fabric hatdata'><span class='datalabel'>Fabric:</span>"+data.data.fabric+"</div>";
	pop = pop+ "<div class='shape hatdata'><span class='datalabel'>Shape:</span>"+data.data.shape+"</div>";
	// pop = pop+ "<div class='crown hatdata'><span class='datalabel'>Crown:</span>"+data.data.crown+"</div>";
	// pop = pop+ "<div class='brim hatdata'><span class='datalabel'>Brim:</span>"+data.data.brim+"</div>";
	pop = pop+ "<div class='sizes hatdata'><span class='datalabel'>Sizes:</span>"+data.data.sizes+"</div>";
	pop = pop+ "<div class='bigswatchcontainer'><span class='datalabel'>Colors:</span><br>";
	for(var i=0;i<data.colors.length;i++){
		pop = pop+"<div class='swatchrow'><img src='images/hats/"+data.data.season+"/swatches/"+data.data.styleID+"_"+data.colors[i].code+".jpg' class='swatch'> <span class=swlabel>"+data.colors[i].name+"</span></div>";
	}
	pop = pop+"</div></div>";
	pop = pop+"<img class='bighat' src='images/hats/"+data.data.season+"/"+data.data.styleID+".jpg'>";
	pop = pop+"</div>";
	
	if($('#hatpop') != undefined) $('#hatpop').remove();
	$('body').append(pop);
	$('#hatpop').draggable().click(function(){ $('#hatpop').remove(); });
	$('#hatpop').bind('dragstart',function(e){ e.stopPropagation(); });
	$('.hatpoptitle').bind('click',function(e){ e.stopPropagation(); });
	$('.hatdatacol').bind('mousedown click',function(e){ e.stopPropagation(); });
	$('.hatpopclose').bind('mousedown',function(e){ e.stopPropagation(); });
	$('.hatpopclose').click(function(){ $('#hatpop').remove(); });
	$('.hatpopclose').attr('unselectable','on').css({'-moz-user-select':'none','-webkit-user-select':'none','user-select':'none'});
}