$(document).ready(	
	function() {
		var $container = $(".box");	
		$container.wtScroller({
					num_display:4,
					slide_width:230,
					slide_height:210,
					slide_margin:1,
					button_width:35,
					ctrl_height:25,
					margin:5,	
					auto_scroll:false,
					delay:4000,
					scroll_speed:800,
					easing:"",
					auto_scale:true,
					move_one:true,
					ctrl_type:"scrollbar",
					display_buttons:true,
					mouseover_buttons:false,
					display_caption:true,
					mouseover_caption:false,
					caption_align:"top",
					caption_position:"top",					
					cont_nav:false,
					shuffle:false
				});

            var $submitButton = $("#submit-btn");
		var $resetButton =  $("#reset-btn");
		var $ctrlTypes =	$("#ctrl-type");
		var $buttonsCB = 	$("#buttons-cb");
		var $captionCB = 	$("#caption-cb");
		var $hoverButtonsCB = $("#btnsmouseover-cb");
		var $hoverCaptionCB = $("#capmouseover-cb");
		var $captionPositions =	$("#cap-position");
		var $scrollEasing = $("#easing");
		var $lightboxRB = $("input[name='lightbox-on']");
		var $rotateCB = 	$("#rotate-cb");
		var $textboxCB =	$("#text-cb");
		var $timerCB =		$("#timer-cb");
		var $numberCB =		$("#number-cb");
		var $dbuttonsCB = $("#dbuttons-cb");
		var $lightboxEasing = $("#lb-easing");

		var $panel = $(".panel");
		var $infoPanel = $(".info-section");
		var $desc = $(".description");
		
		$submitButton.click(function() {
			var vals = $captionPositions.val().split("_");
			$container.undoChanges()
					  .setCtrlType($ctrlTypes.val())
					  .setButtons($buttonsCB.prop("checked"))
					  .setBtnsMouseover($hoverButtonsCB.prop("checked"))
					  .setCaption($captionCB.prop("checked"))
					  .setCapMouseover($hoverCaptionCB.prop("checked"))
					  .setCapPosition(vals[0], vals[1])
					  .setEasing($scrollEasing.val())
					  .updateChanges();
			
			if ($lightboxRB.filter(":checked").val() == "on") {
				$("a[rel='scroller']").wtLightBox({
					rotate:$rotateCB.prop("checked"),
					display_number:$numberCB.prop("checked"),
					display_dbuttons:$dbuttonsCB.prop("checked"),
					display_timer:$timerCB.prop("checked"),
					display_caption:$textboxCB.prop("checked"),
					easing:$lightboxEasing.val()
				});
			}
			
			if ($buttonsCB.prop("checked") && !$hoverButtonsCB.prop("checked")) {
				$desc.width(700);
				$infoPanel.width(970);
				$panel.width(972);
			}
			else {
				$desc.width(630);
				$infoPanel.width(920);
				$panel.width(922);				
			}
			$panel.css("left", -Math.floor($panel.outerWidth()/2));
		});
		
		$resetButton.click(function() {
			init();
			$submitButton.trigger("click");
		});
		
		var init = function() {
			$ctrlTypes.val("scrollbar");
			$buttonsCB.prop("checked",true);
			$captionCB.prop("checked",true);
			$hoverButtonsCB.prop("checked",false).attr("disabled", false);
			$hoverCaptionCB.prop("checked",false).attr("disabled", false);
			$captionPositions.val("inside_bottom").attr("disabled", false);
			$scrollEasing.val("");
			
			$("input#lightbox-yes").prop("checked", true);
			$textboxCB.prop("checked",true).attr("disabled", false);
			$numberCB.prop("checked",true).attr("disabled", false);
			$dbuttonsCB.prop("checked",true).attr("disabled", false);
			$rotateCB.prop("checked",true).attr("disabled", false);
			$timerCB.prop("checked",true).attr("disabled", false);
			$lightboxEasing.val("").attr("disabled", false);
		}
		
		$buttonsCB.change(
				function() {
					var disable = !$(this).prop("checked");
					$hoverButtonsCB.attr("disabled", disable);
				});
		
		$lightboxRB.change(
				function() {
					var disable = $(this).filter(":checked").val() == "off";
					$textboxCB.attr("disabled", disable);
					$numberCB.attr("disabled", disable);
					$dbuttonsCB.attr("disabled", disable);
					$rotateCB.attr("disabled",  disable);
					$timerCB.attr("disabled",  disable);
					$lightboxEasing.attr("disabled", disable);
				});
		
		$captionCB.change(
				function() {
					var vals = $captionPositions.val().split("_");
					$hoverCaptionCB.attr("disabled", !$(this).prop("checked") || vals[0] == "outside");
					$captionPositions.attr("disabled", !$(this).prop("checked"));
				});
		
		$rotateCB.change(
			function() {
				$timerCB.attr("disabled", !$(this).prop("checked"));
			}
		);	
		
		$captionPositions.change(
			function() {
				var vals = $(this).val().split("_");
				$hoverCaptionCB.attr("disabled", vals[0] == "outside");
			}
		);
		
		init();
	}
);