// This line used to make work in Joomla
(function($) {
	// $(document).ready(function()
	$(document).ready(function() {
		
		// Test to see if jQuery working
		$("#rt-header").css("background-color", "rgba(100,50,1,0.2)");
		// Test to see if jQuery working END
	    
	    $(window).resize(checkSize);
	    
	    checkSize();
	    
	    function checkSize() {
			var xsBreakpoint = "480px";
			var smBreakpoint = "767px";
			var mdBreakpoint = "959px";
			var lgBreakpoint = "1200px";	
			var screenWidth = $('body').width() + "px";
			// var screenWidth = $('body').css("width"); // can change to this, still have 'issue'
            
            // OPTION 1
		    if (screenWidth > "0px") {
		        $("div").css("background-color", "green")
		    } else if (screenWidth > xsBreakpoint) {
		        $("div").css("background-color", "orange")
		    } else if (screenWidth > smBreakpoint) {
		        $("div").css("background-color", "blue")
		    } else if (screenWidth > mdBreakpoint) {
		        $("div").css("background-color", "indigo")
		    } else if (screenWidth > lgBreakpoint) {
		        $("div").css("background-color", "cyan")
		    }	
		    
		    // OPTION 2
            //  if ((screenWidth > "0px"  ) && (screenWidth <= xsBreakpoint )) {
		    //     $("div").css("background-color", "green");
		    //  } else 
		    //  if ((screenWidth > xsBreakpoint  ) && (screenWidth <= smBreakpoint )) {
		    //     $("div").css("background-color", "orange");
		    //  } else
		    //  if ((screenWidth > smBreakpoint  ) && (screenWidth <= mdBreakpoint )) {
		    //     $("div").css("background-color", "blue");
		    //  } else
		    //  if ((screenWidth > mdBreakpoint  ) && (screenWidth <= lgBreakpoint )) {
		    //     $("div").css("background-color", "indigo");
		    //  } else
		    //  if ((screenWidth > lgBreakpoint )) {
		    //     $("div").css("background-color", "cyan");
		    //  }
	    }
	})
	// $(document).ready(function() END
})(jQuery);
// (function($) END

			/*#rt-mainbody*/
			#rt-mainbody {
				position: relative; // Important as z-index requires anything other than 'static'
				// Large Mode
				@media only screen and (min-width: 1200px) {
					z-index: 4;				}
				// Desktop Modes
				@media only screen and (min-width: 960px) and (max-width: 1199px) {
					z-index: 3;
				}
				// Tablet Modes
				@media (min-width: 768px) and (max-width: 959px) {
					z-index: 2;
				}
				// Mobile Modes
				@media (max-width: 767px) {
					z-index: 1;
				}
				// Small Screen Mobile Modes
				@media only screen and (max-width: 480px) {
					z-index: auto;
				}
			}
			/*#rt-mainbody END*/

		// Timer on resize
		var sizeUpdate;
		window.onresize = function(){
			clearTimeout(sizeUpdate);
			sizeUpdate = setTimeout(myFunkyEffort, 100);
		};	    
		// Timer on resize END


		myFunkyEffort();  // calls the function on pageload

		function myFunkyEffort() {
			var rtMainbodyCssProperty = $("#rt-mainbody").css("z-index");
			switch (rtMainbodyCssProperty) { 
				case '4': 
					$("#rt-header").css("background-color", "cyan");
				break;
				case '3': 
					$("#rt-header").css("background-color", "yellow");
				break;
				case '2': 
					$("#rt-header").css("background-color", "purple");
				break;      
				case '1': 
					$("#rt-header").css("background-color", "red");
				break;
				default:
					$("#rt-header").css("background-color", "orange");
			}