$(document).ready(function() {
    	
    	$("#product_diagram").fancybox({
			'hideOnContentClick': true,
			'overlayShow': true 
		});
    	$("#product_logo").fancybox({
			'hideOnContentClick': true,
			'overlayShow': true 
		});
    	
         $('#top_tabs a')
             .hover( function () {
                         // Find all active tabs
                         var active = $('#top_tabs div.item-on');
                         
                         //This code will be injected when the option to hide the content is enabled
                         //It will remove the display:none of the content-wrapper after the first click.
                         
        var elements = ['div.hide_element','div.block_element'];
        var classes  = ['hide_element','block_element'];
        for (x=0;x<classes.length;x++){
            var content_wrapper = $(elements[x]);
            for (i=0;i<content_wrapper.length;i++){
                $(content_wrapper[i]).removeClass(classes[x]);
            }
        }
                             
                         
                         // Disable the styles..
                         $(active).removeClass('item-on').addClass('item-off');
                         $(active).find('div.side-esq-on').removeClass('side-esq-on').addClass('side-esq-off');
                         $(active).find('div.side-dir-on').removeClass('side-dir-on').addClass('side-dir-off');
    
                         // At this moment we are at the 'a' element...we need to navigate up and change the class
                         $(this).parent().parent().removeClass('item-off').addClass('item-on');
    
                         // Then we need to find the container that holds the content of the tab
                         var div_to_show = $(this).parent().parent().attr('class').split(' ')[0];
    
                         // We also need to change the class of the previous div
                         $(this).prev().removeClass('side-esq-off').addClass('side-esq-on');
    
                         // ...also the next one too
                         $(this).parent().next().removeClass('side-dir-off').addClass('side-dir-on');
    
                         //Hide the div and show the new one...
                         var active_container = '#' + $(active).attr('class').split(' ')[0];
                         $(active_container).hide();
                         $('#' + div_to_show).show();
    
                     }
                     ,function (){}
             );
    });