$(document).ready(function(){


    $('.Hzntlnav ul').superfish( {
        autoArrows:  false,
        dropShadows:   false
    });

    $('.HzntlnavInP ul').superfish( {
        autoArrows:  false,
        dropShadows:   false
    });
    
    $('.HzntlnavSchP ul').superfish( {
        autoArrows:  false,
        dropShadows:   false
    });




// gallery generated from ul of images



    $('.glaBox .subgrab ul').galleria({

            history   : false, 

            clickNext : true, 

            insert    : '#myBox', 

            onImage   : function(image,caption,thumb) {

                

                if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { 

                    image.css('display','none').fadeIn(1000);

                }

                caption.css('display','none').fadeIn(600);

                  var _li = thumb.parents('li');

                  _li.siblings()

                  .children('img.selected')

                  .fadeTo(500,0.4);

                  thumb.fadeTo('fast',1)

                  .addClass('selected');

                  image.attr('alt','Next image >>');

            },

         onThumb : function(thumb) { 

                    var _li = thumb.parents('li');

                    var _fadeTo = _li.is('.active') ? '1' : '0.3';

                    thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

                    thumb.hover(

                        function() { thumb.fadeTo('fast',1); },

                        function() { _li.not('.active').children('img').fadeTo('fast',0.4); } 

                                );              

                                    }

                                });



// thumbnail ul made to infinately scroll

                            

        $('.subgrab ul li:first').before($('.subgrab ul li:last'));         //move the last list item before the first item

        $('#right_scroll , .galleryNext , .galleria_wrapper').click(function(){         //when user clicks the image for sliding right        

            var item_width = $('.subgrab ul li').outerWidth() + 10;             //get the width of the items 

            var left_indent = parseInt($('.subgrab ul').css('left')) - item_width;             //calculae the new left indent of the unordered list

            $('.subgrab ul:not(:animated)').animate({'left' : left_indent},500,function(){                //make the sliding effect using jquery's animate function

                $('.subgrab ul li:last').after($('.subgrab ul li:first'));                 //get the first list item and put it after the last list item (that's how the infinite effects is made) '

                $('.subgrab ul').css({'left' : -item_width});                 //and get the left indent li plus margin

            }); 

        });

        

        $('#left_scroll , .galleryPrevious').click(function(){         //when user clicks the image for sliding left

            var item_width = $('.subgrab ul li').outerWidth() + 10;

            var left_indent = parseInt($('.subgrab ul').css('left')) + item_width;             // same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width)             

            $('.subgrab ul:not(:animated)').animate({'left' : left_indent},500,function(){

                $('.subgrab ul li:first').before($('.subgrab ul li:last'));             // when sliding to left we are moving the last item before the first list item

                $('.subgrab ul').css({'left' : -item_width});            // and again, when we make that change we are setting the left indent of our unordered list to the li width plus margin

            });

        });

        

// tabs

        

        $('#wrapper_tabs_border').addClass('js');

        

        $("#wrapper_tabs div").click(function () { 

                $('#wrapper_tabs div').removeClass('active');

                $(this).addClass('active');     

                

                if( $(this).attr('id') == 'tab1' ) {

                    $('#tab_cntntBg_headlines .tab_cntnt').removeClass('active');

                    $('#tabContent1').addClass('active');

                }

                

                if( $(this).attr('id') == 'tab2' ) {

                    $('#tab_cntntBg_headlines .tab_cntnt').removeClass('active');

                    $('#tabContent2').addClass('active');

                }


                if( $(this).attr('id') == 'tab3' ) {

                    $('#tab_cntntBg_headlines .tab_cntnt').removeClass('active');
$('#tabContent3').addClass('active');

                }


            });



});

