js conflict b/w storebox and creativity?

Greetings,
Creativity is our base template and Storebox is being used to style Virtuemart. I uploaded it to a dev site for the moment:

http://www.3rdglance.com/bu25/index.php/shop/mfc-parents-101-book-detail

I can't for the life of me figure out why the (1) tabbing buttons don't work or the (2) 'magnifying glass' on the product image doesn't appear.

Found it...

Needed to add the some js to gk.scripts.js...

Code: Select all

/* VirtueMart addons */
window.addEvent('domready', function() {
   var tabs = document.id('product-tabs');
   // if tabs exists
   if(tabs) {
      // initialization
      tabs.getElement('li').addClass('active');
      var contents = document.id('product-tabs-content');
      contents.getChildren('div').setStyle('display', 'none');
      contents.getElement('div').addClass('active');
      // add events to the tabs
      tabs.getElements('li').each(function(tab, i) {
         tab.addEvent('click', function() {
            var toggle = tab.getProperty('data-toggle');
            contents.getChildren('div').removeClass('active');
            contents.getElement('.' + toggle).addClass('active');
            tabs.getElements('li').removeClass('active');
            tab.addClass('active');      
         });
      });
   }
   
   var products = document.getElements('.browse-view .product');
   var categories = document.getElements('.category-view .category');
   var f_products = document.getElements('.featured-view .product');
   var l_products = document.getElements('.latest-view .product');
   var t_products = document.getElements('.topten-view .product');
   var r_products = document.getElements('.recent-view .product');
   
   [products, categories, f_products, l_products, t_products, r_products].each(function(p) {
      if(p.length > 0) {
         p.each(function(item,i) {
            item.addEvents({
               "mouseenter": function() {
                  item.addClass('active');
               },
               "mouseleave": function() {
                  item.removeClass('active');
               }
            });
         });
      }
   });
   
   var productZoom = document.getElements('.productDetails .main-image');
   if(productZoom.length > 0) {
      productZoom.each(function(item,i) {
         var overlay = item.getElement('.product-overlay');
         var link = item.getElement('a');
         if(overlay) {
            overlay.inject(link, 'bottom');
         }
         item.addEvents({
            "mouseenter": function() {
               item.addClass('active');
            },
            "mouseleave": function() {
               item.removeClass('active');
            }
         });
      });
   }
});

window.addEvent('touchstart', function(e) {
   if(e.target.hasClass('modal') || e.target.hasClass('ask-a-question')) {
      window.location.href = e.target.getProperty('href');
   }
});

window.addEvent('load', function() {
   setTimeout(function() {
      document.getElements('.modal').removeEvents();
      document.getElements('.ask-a-question').removeEvents();
   }, 2000);
});

Found it...

Needed to add the some js to gk.scripts.js...

Question: This js file will be over-written with updates, I presume. Where should I place this .js so it does not get over-written?