$(function() {
	
	var overlayURL = '';
	configureCompSlot("");
	
	$("#promoScroll").scrollable({circular:true,speed:800,easing:"swing"}).autoscroll({interval:5000});
	//$("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
	$("#promoScrollVertical").scrollable({circular:true,speed:800,vertical:true,easing:"swing"}).autoscroll({interval:5000});
	
	$("div.imgGallery.isOverlay > div > img").click(function() {
	
		
		var id = $(this).parent().attr('id');
		var component = $(this).parent().parent().parent().prev().attr('id').split("|");
		
		var next_id = $(this).parent().parent().next().find('div').attr('id');
		var prev_id = $(this).parent().parent().prev().find('div').attr('id');
		
		overlayURL = "/_includes/components/overlayImage.php?id="+id+"&component="+component[0]+"&type="+component[1]+"&next="+next_id+"&prev="+prev_id;
		var overlayAPI = $("#galleryOverlay").data("overlay");
		
		$("#galleryOverlay").bind("onClose", function() {
			$("#galleryOverlay .overlayWrap").html("");
			//$("div.wrapper").show();
			$(this).unbind("onClose");	// unbind so we don't bubble up...
		});
		
		$("#galleryOverlay").bind("onLoad", function() {
		
			// now, let's try and find the size of the internal image...
			//var image = $("#oImage");
			var width = $("#oImage").width();
			var height = $("#oImage").height();
			var browserwidth = $(window).width();
			
			// let's change the height & width of the image...
			$("#galleryOverlay").height(height+2).width(width+2);
			
			var leftPos = (browserwidth/2) - (width/2);
			// now, we need to recenter it...
			$("#galleryOverlay").css('left',leftPos);
			
			
			
			$(this).unbind("onLoad"); // unbind so we don't bubble up...
		});
		
		overlayAPI.load();
	});
	
	$("a.overlay").click(function() {
		
		var itemId = $(this).attr('id').replace("item_","");
		overlayURL = "/_includes/ajax/components/default.php?item="+itemId;
		var overlayAPI = $("#itemOverlay").data("overlay");
		
		$("#itemOverlay").bind("onClose", function() {
			$("#itemOverlay .overlayWrap").html("");
			//$("div.wrapper").show();
			$(this).unbind("onClose");	// unbind so we don't bubble up...
		});
		
		overlayAPI.load();
		// what exactly do we need to know here...
		// first, we need to be able to load the values for the detail image...
		
		// second, we need the id of the item in question. It's going to be in pages.
		
		// all we need is the id# of the item in question...
		
		
		//alert("click: " + itemId);
		return false;
	});
	
	$("#itemOverlay").delegate("a.print","click",function() {
		
		var item = $("#itemContent > .itemWrap").attr('id');
		var component = "";
		
		window.location = "/_includes/ajax/components/default.php?item="+item+"&action=print";

	});
	
	$("#galleryOverlay").delegate("a.print","click",function() {
		
		var id = $("#galleryContent > .image").attr('id');
		var component = $("#galleryComponent").val();
		var type = $("#galleryType").val();
		
		window.location = "/_includes/components/overlayImage.php?id="+id+"&component="+component+"&type="+type+"&action=print";
		
	});
			
			
	$("div#galleryOverlay").delegate(".photonav","click",function() {
		//alert('clicked');
		var imgId = $(this).attr('id').split("_");
		var component = $("#galleryComponent").val();
		var type = $("#galleryType").val();
		$.ajax({
			url: "/_includes/components/overlayImage.php",
			type: "post",
			data: "id="+imgId[1]+"&component="+component+"&type="+type,
			success: function(html) {
				$("#galleryContent").html(html);
				
				// PUT IT HERE...
				var width = $("#oImage").width();
				var height = $("#oImage").height();
				var browserwidth = $(window).width();
				
				// let's change the height & width of the image...
				$("#galleryOverlay").height(height+2).width(width+2);
				
				// total window width 980
				// divided by 2
				// is 490
				
				// that is the center point of the window...
				// now, we need to know 490 - 1/2 of the image width...
				
				var leftPos = (browserwidth/2) - (width/2);
				
				// we need the entire window width...
				
				
				// now, we need to recenter it...
				$("#galleryOverlay").css('left',leftPos);
			}
		});
	});
	
	$(":date").dateinput({
		format: "mm/dd/yy",
		selectors: true,
		change: function() {
			var isoDate = this.getValue('yyyy-mm-dd');
			$("#arrivalDate").val(isoDate);
		}
	});
	
	// configure the overlay system...
	$("div.overlay").overlay({
		effect: 'default',
		top: 'center',
		oneInstance: false,
		mask: {
			color: '#000',
			loadSpeed: 200,
			opacity: 0.8
		},
		onBeforeLoad: function() {
			var wrap = this.getOverlay().find(".overlayWrap");
			wrap.load(overlayURL);
		},
		onBeforeClose: function() {
			//clearValidators();
		}
	});
	
	$("#spinBut").click(function() {
	
		$("#spinMsg").addClass("hide");
		
		if(!$(this).hasClass("disabled")) {
			//alert('clicked');
			
			$.ajax({
				url: "/_includes/components/spinReels.php",
				type: "post",
				dataType: "json",
				success: function(json) {
				
					$("#promoScrollWrap").html(json.spin);
					$("#spinMsg").html(json.msg);
					
					$("#reel1").html("<img width=206 height=211 alt='' src='/images/reel_blur_one.gif' />");
					$("#reel2").html("<img width=206 height=211 alt='' src='/images/reel_blur_two.gif' />");
					$("#reel3").html("<img width=206 height=211 alt='' src='/images/reel_blur_three.gif' />");
					configureCompSlot();
				}
			});
		} else {
			alert("You don't have any spins!  You can earn spins by browsing through our website.  Click \"What's This\" for more information");
		}
	});
	
	
	if($("#gMap").length) {
		
		var address = $("#gMap").text();
		var latlng = new google.maps.LatLng(36.0357,-106.0615);
		var myOptions = {
			zoom: 12,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
		};
		
		var map = new google.maps.Map(document.getElementById("gMap"), myOptions);
		//alert('gotit: ' + address);
		
		var marker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: "Ohkay Hotel Casino"
		});
		
		var coordInfoWindow = new google.maps.InfoWindow({content: "<b>Ohkay Hotel Casino</b>"});
		coordInfoWindow.setContent("<b>Ohkay Hotel Casino</b><br />Your Best Bet!");
		coordInfoWindow.setPosition(latlng);
		coordInfoWindow.open(map);
		//$("#gMap").googleMaps({geocode: address});
	}
	
	
});


function configureCompSlot() {
	var reels = new Array();
	var spins = parseInt($("#spinNum").html()) - 1;
	$("#spinNum").html(spins);
	
	// spin the reels...
	reels[1] = setTimeout(function(){
		$("#reel1").html("");
		//$("#reel1 div.offerWrap").removeClass("hide");
		clearTimeout(reels[1]);
	}, 900);
		
	reels[2] = setTimeout(function(){
		$("#reel2").html("");
		//$("#reel2 div.offerWrap").removeClass("hide");
		clearTimeout(reels[2]);
	}, 1000);
		
	reels[3] = setTimeout(function(){
		$("#reel3").html("");
		//$("#reel3 div.offerWrap").removeClass("hide");
		clearTimeout(reels[3]);
		if(!spins) {
			$("#spinBut").addClass("disabled");
		}
		$("#spinMsg").removeClass("hide");
		
	}, 1200);

}

// 61
// 99
// 190
// 207
