jQuery(function() {
	
		jQuery( '#sheduleDrag' ).draggable(
			{ 
			cursor: "move",
			containment: [-6500, -900, 53, 23],
			drag: function(event, ui) {

					// Show start dragged position of image.
					
					var Startpos = $(this).position();
					$("div#start").text("START: \nLeft: " + Startpos.left + "\nTop: " + Startpos.top);
					//if(Startpos.top < 0){
						$('#channelsContainer').animate({ top: Startpos.top - 20},0);
						$('#hourList').animate({ left: Startpos.left - 50},0);
						
					//}
				},
			 stop: function(event, ui) {

					// Show start dragged position of image.
					var Startpos = $(this).position();
					$("div#start").text("START: \nLeft: " + Startpos.left + "\nTop: " + Startpos.top);
					//if(Startpos.top < 0){
						$('#channelsContainer').animate({ top: Startpos.top - 20},0);
						$('#hourList').animate({ left: Startpos.left - 50},0);
				}
			

			 }
		);
		
		var hList = $('#hourList');
		var sDrag = $('#sheduleDrag');
		var cList = $('#channelsContainer');
		
		 
		$('#leftBtn').click(
			function(){
				var hPos = hList.position();
				var newhpos = parseInt(parseInt(hPos.left) - 350);
					hList.animate({ left: newhpos},500);
				
				var sPos = sDrag.position();
				var newspos = parseInt(parseInt(sPos.left) - 350);
					sDrag.animate({ left: newspos},500);

			}
		)
		
		$('#rightBtn').click(
			function(){
				var hPos = hList.position();
				var newhpos = parseInt(parseInt(hPos.left) + 250);
					hList.animate({ left: newhpos},500);
				
				var sPos = sDrag.position();
				var newspos = parseInt(parseInt(sPos.left) + 250);
					sDrag.animate({ left: newspos},500);

			}
		)
		
		/*
		$('#upBtn').click(
			function(){
				var hPos = cList.position();
				var newhpos = parseInt(parseInt(hPos.top) - 70);
					cList.animate({ top: newhpos},1000);
				
				var sPos = sDrag.position();
				var newspos = parseInt(parseInt(sPos.top) - 70);
					sDrag.animate({ top: newspos},1000);

			}
		) */
		
		 $('#container').bind('mousewheel', function(event, delta) {
		 var hPos = cList.position();
		 var sPos = sDrag.position();
			 
				if(delta > 0){
					
					
					
					if(parseInt(sPos.top) > 0){
						cList.animate({ top: 0 },0)
						sDrag.animate({ top: 0 },0);
					} else {
						var newhpos = parseInt(parseInt(hPos.top) + 70);
						cList.animate({ top: newhpos }, 0);
						var newspos = parseInt(parseInt(sPos.top) + 70);
						sDrag.animate({ top: newspos }, 0);
					}
					
					
			   } else {
					if(parseInt(sPos.top) < -1050){
						cList.animate({ top: -1050 },0)
						sDrag.animate({ top: -1050 },0);
					} else {
						var newhpos = parseInt(parseInt(hPos.top) - 70);
							cList.animate({ top: newhpos},0);
						var newspos = parseInt(parseInt(sPos.top) - 70);
							sDrag.animate({ top: newspos},0);
					}
			   }
			   
				

		   $("div#start").text(parseInt(hPos.top));
            return false;
        });

	});