Dom manipulation for Drupal blocks based on screen size

JS reordering elements in the dom based on screen size

            swapper = function(arr, from, to) {
               arr.splice(to, 0, arr.splice(from, 1)[0]);
               return arr;
             };


            //setup our vars
            var homeElements = new Array();
            var mobileElements = new Array();
            var previousState;
            //on home page and logged out
            if ($('.not-logged-in .region-home').length > 0) {
              // console.log("region-home");

              $(".region-home").children().each(function(index) {
                //make two identical arrays to store references to each child element
                homeElements[index] = $(this);
                mobileElements[index] = $(this);

              });

              //reorder mobile array
              mobileElements = swapper(mobileElements, 3, 0);
              mobileElements = swapper(mobileElements, 1, 2);

            }
            //on homepage and logged in
            else if ($('.logged-in .region-home').length > 0) {
              // console.log("region-home");

              $(".region-home").children().each(function(index) {
                //make two identical arrays to store references to each child element
                homeElements[index] = $(this);
                mobileElements[index] = $(this);

              });

              //reorder mobile array
              mobileElements = swapper(mobileElements, 1, 0);
              mobileElements = swapper(mobileElements, 2, 1);
              mobileElements = swapper(mobileElements, 4, 7);
             //  mobileElements = swapper(mobileElements, 5, 6);
            }

            //Debugging statements ensure that the arrays are good
            // console.log('desktop array = ' + homeElements.length);
            // console.log('mobile array = ' + mobileElements.length);

            //Helper function for rendering our changes
            function swaparoo(toScreenSize) {

              //if home page
              if ($('.region-home').length > 0) {

                //Fade out the region so we can smooth out the transition a bit
                $('.region-home').fadeOut(100, function() {


                  //remove all child blocks from the region without destroying them
                  $(this).children().detach();

                  //if we are transitioning to desktop put them back in the original order
                  if (toScreenSize == 'desktop') {
                    jQuery.each(homeElements, function(index) {
                      homeElements[index].appendTo('.region-home');
                    });
                    //If we are transitioning to mobile put them back in the modified mobile order
                  } else if (toScreenSize == 'mobile') {
                    jQuery.each(homeElements, function(index) {
                      mobileElements[index].appendTo('.region-home');
                    });
                  }

                  //Bring the region back with it's new order
                  $(this).fadeIn(100);
                });
              }
            }

            //On load if desktop do nothing but store a flag denoting that we are on desktop
            if ($(window).width() > 480) {
              previousState = 'desktop';
              //onload setup desktop
              // console.log('setting up desktop');
              $('.view-slideshow .previous, .view-slideshow .next').fadeOut(300);
              //On load if mobile re-order the elemnts and store a mobile flag
            } else {
              previousState = 'mobile';
              //onload setup mobile
              // console.log('setting up mobile');
              $('.view-slideshow .previous, .view-slideshow .next').fadeIn(300);
              swaparoo('mobile');

            }




            //Function binds an event to fire whenever the window is re-sized
            $(window).resize(function() {

              if (this.resizeTO)
                clearTimeout(this.resizeTO);
              this.resizeTO = setTimeout(function() {
                $(this).trigger('resizeEnd');
              }, 500);

            });

            $(window).bind('resizeEnd', function() {
              //do something, window hasn't changed size in 500ms
              //// console.log('window resized');

              //If we are on desktop now and re-sized from mobile (if we re-sized from desktop to desktop no changes are needed)
              // console.log($(window).width());
              if ($(window).width() > 480 && previousState == 'mobile') {
                //alter flag
                previousState = 'desktop';
                // console.log('changing to desktop');
                //on window change setup desktop
                swaparoo('desktop');

                $('.view-slideshow .previous, .view-slideshow .next').fadeOut(300);
                //If we are on mobile now and re-sized from desktop (if we re-sized from mobile to mobile no changes are needed)
              } else if ($(window).width() < 480 && previousState == 'desktop') {
                previousState = 'mobile';
                // console.log('changing to mobile');
                //clearInterval(slideHoverInterval);
                //on window change setup mobile
                swaparoo('mobile');
                $('.view-slideshow .previous, .view-slideshow .next').fadeIn(300);

              }
            });