$(document).ready(function(){

    //////////////////////////////////////////
    // DOM is ready now, so we can do magic //
    //////////////////////////////////////////
    
    
    
    // Find submenu elements and set them active 
	// if their href attribute matches the url
	var pathname = window.location.pathname;
    /*
	var pathnameSplit = window.location.pathname.split("/");
	var urlsegment = top.location.href.match(/([^\/]+)$/)[1];
	var filename = pathnameSplit[pathnameSplit.length-1];
	var filenameParams = urlsegment.replace(filename, '');
    $("a[href='" + pathname + filenameParams + "']").each(function() {
		$(this).addClass("selected");
	});
    */
    
    
    
    /////////////////////////////////////////////////////
    // Add "start" class on body element on start page //
    /////////////////////////////////////////////////////
    if(pathname == "/") {
        $('body').addClass('start');
    }
    
    
    
    ///////////////////////////////////////////////////
    // Add "first" and "last" classes to li elements //
    ///////////////////////////////////////////////////    
    $('ul').each(function() {
        $(this).find('li:first').addClass('first');
        $(this).find('li:last').addClass('last');
    });
     
    
    
    ///////////////////////////////
	// Galleriffic on start page //
	///////////////////////////////
    if($('#mediaWrapper.start #thumbs').length > 0) {
        var gallery = $('#mediaWrapper.start #thumbs').galleriffic({
            delay:                     3000, // in milliseconds
            numThumbs:                 8, // The number of thumbnails to show page
            preloadAhead:              -1, // Set to -1 to preload all images
            enableTopPager:            false,
            enableBottomPager:         false,
            maxPagesToShow:            8,  // The maximum number of pages to display in either the top or bottom pager
            imageContainerSel:         '#mediaWrapper.start #slideshow',	// The CSS selector for the element within which the main slideshow image should be rendered
            controlsContainerSel:      '#mediaWrapper.start #controls',     // The CSS selector for the element within which the slideshow controls should be rendered
            captionContainerSel:       '#mediaWrapper.start #caption',      // The CSS selector for the element within which the captions should be rendered
            loadingContainerSel:       '#mediaWrapper.start #loading',      // The CSS selector for the element within which should be shown when an image is loading
            renderSSControls:          false, // Specifies whether the slideshow's Play and Pause links should be rendered
            renderNavControls:         false, // Specifies whether the slideshow's Next and Previous links should be rendered
            playLinkText:              'Play',
            pauseLinkText:             'Pause',
            prevLinkText:              'Previous',
            nextLinkText:              'Next',
            nextPageLinkText:          'Next ›',
            prevPageLinkText:          '‹ Prev',
            enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
            enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
            autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
            syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
            defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
            onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
            onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
            onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
            onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
            onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
            onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
            onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
        });
    }
    
    
    
    ///////////////////////////////////
	// Galleriffic on ui design page //
	///////////////////////////////////
    if($('#mediaWrapper.uidesign #thumbs').length > 0) {
        var gallery = $('#mediaWrapper.uidesign #thumbs').galleriffic({
            delay:                     3000, // in milliseconds
            numThumbs:                 6, // The number of thumbnails to show page
            preloadAhead:              -1, // Set to -1 to preload all images
            enableTopPager:            false,
            enableBottomPager:         false,
            maxPagesToShow:            9,  // The maximum number of pages to display in either the top or bottom pager
            imageContainerSel:         '#mediaWrapper.uidesign #slideshow',	// The CSS selector for the element within which the main slideshow image should be rendered
            controlsContainerSel:      '#mediaWrapper.uidesign #controls',     // The CSS selector for the element within which the slideshow controls should be rendered
            captionContainerSel:       '#mediaWrapper.uidesign #caption',      // The CSS selector for the element within which the captions should be rendered
            loadingContainerSel:       '#mediaWrapper.uidesign #loading',      // The CSS selector for the element within which should be shown when an image is loading
            renderSSControls:          false, // Specifies whether the slideshow's Play and Pause links should be rendered
            renderNavControls:         false, // Specifies whether the slideshow's Next and Previous links should be rendered
            playLinkText:              'Play',
            pauseLinkText:             'Pause',
            prevLinkText:              'Previous',
            nextLinkText:              'Next',
            nextPageLinkText:          'Next ›',
            prevPageLinkText:          '‹ Prev',
            enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
            enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
            autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
            syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
            defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
            onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
            onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
            onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
            onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
            onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
            onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
            onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
        });
    }
    
    
    
    //////////////////////////////////////////////
	// Galleriffic thumb mouseover on start page//
	//////////////////////////////////////////////
	$("#mediaWrapper.start #thumbs li").hover(function() {
		$(this).css({'z-index' : '10'});
		if ($(this).is('.first, .last')) {
            var hoverImgWidth = '121px';        // var hoverImgWidth = '122px';
            var hoverImgHeight = '45px';        // var hoverImgHeight = '72px';
            var hoverDivHeight = '27px';
		} else {
			var hoverImgWidth = '121px';
            var hoverImgHeight = '45px';        // var hoverImgHeight = '72px';
            var hoverDivHeight = '27px';
		}
		$(this).find('img').addClass("hover").stop()
			// Animate image
            .animate({
				marginTop: '-2px', 
				marginLeft: '-5px', 
				top: '0', 
				left: '0', 
				width: hoverImgWidth,
				height: hoverImgHeight,
				padding: '0'
			}, 25);
            // Animate div
            $(this).find('.captionVisible').animate({
				marginTop: '2px', 
				marginLeft: '-5px', 
				width: hoverImgWidth,
				height: hoverDivHeight,
                lineHeight: hoverDivHeight,
				padding: '0'
			}, 25);
		} , function() {
		if ($(this).is('.first, .last')) {
            var initImgWidth = '111px';         // var initImgWidth = '112px';
            var initImgHeight = '41px';         // var initImgHeight = '66px';
            var initDivHeight = '25px';
		} else {
			var initImgWidth = '111px';
            var initImgHeight = '41px';         // var initImgHeight = '66px';
            var initDivHeight = '25px';
		}
		$(this).css({'z-index' : '0'});
		$(this).find('img').removeClass("hover").stop()
			// Animate image
            .animate({
				marginTop: '0', 
				marginLeft: '0',
				top: '0', 
				left: '0', 
				width: initImgWidth,
				height: initImgHeight,
				padding: '0'
			}, 150);
            // Animate div
            $(this).find('.captionVisible').animate({
				marginTop: '0', 
				marginLeft: '0', 
				width: initImgWidth,
				height: initDivHeight,
                lineHeight: initDivHeight,
				padding: '0'
			}, 150);
	});
    
    
    
    //////////////////////////////////////////////////
	// Galleriffic thumb mouseover on ui design page//
	//////////////////////////////////////////////////
	$("#mediaWrapper.uidesign #thumbs li").hover(function() {
		$(this).css({'z-index' : '10'});
		if ($(this).is('.first, .last')) {
			var hoverImgWidth = '162px';
			var hoverImgHeight = '60px';
		} else {
			var hoverImgWidth = '162px';
			var hoverImgHeight = '60px';
		}
		$(this).find('img').addClass("hover").stop()
			.animate({
				marginTop: '-2px', 
				marginLeft: '-5px', 
				top: '0',
				left: '0', 
				width: hoverImgWidth,
				height: hoverImgHeight,
				padding: '0'
			}, 25);		
		} , function() {
		if ($(this).is('.first, .last')) {
			var initImgWidth = '152px';
			var initImgHeight = '56px';
		} else {
			var initImgWidth = '152px';
			var initImgHeight = '56px';
		}
		$(this).css({'z-index' : '0'});
		$(this).find('img').removeClass("hover").stop()
			.animate({
				marginTop: '0', 
				marginLeft: '0',
				top: '0', 
				left: '0', 
				width: initImgWidth,
				height: initImgHeight,
				padding: '0'
			}, 150);
	});
    
    
    ////////////////////////////////////////////
    // Heavy DOM manipulation on teaser lists //
    ////////////////////////////////////////////
    var TeaserContent = $('div.TeaserContent');
    
    if(TeaserContent.length > 0) {
        var i = 0;
        var oldBrowser = false;
        var TeaserContentHeight = new Array();
        TeaserContent.each(function() {
		
			var initialOuterHeight = $(this).parent('div.wrapperTwoCols').outerHeight();
			var initialInnerHeight = $(this).parent('div.wrapperTwoCols').height();

            var linkInTeaserContent = $(this).find('p a');
            var linkInDetailContent = $(this).next().find('p a');
            var divIsClickable = true;
            
            (linkInTeaserContent, linkInDetailContent).bind({
				"mouseenter": function(event){
					divIsClickable = false;
				},
				"mouseleave": function(event){
					divIsClickable = true;
				}
			});
			            
            /////////////////////////////////////////////////////
            // Now animate the Teaser and Detail divs on click //
            /////////////////////////////////////////////////////
            
            // Fade Teaser out and Detail in
            $(this).click(function(event) {
            
                // console.log(divIsClickable);
                if(divIsClickable == true) {
                
                    // Avoid double clicking!
                    if(!event.detail || event.detail == 1) {    // activate on first click only to avoid double clicks
                    
                        // Calculating with some extra height
                        if(oldBrowser == true) {
                            extraHeight = 0;
                        } else {
                            extraHeight = 0;
                        }
                        
                        // Wrapping div with max height
                        $(this).parent('div.wrapperTwoCols').addClass('selected');
						$(this).parent('div.wrapperTwoCols').css('height', initialInnerHeight);
						$(this).parent('div.wrapperTwoCols').css('maxHeight', initialInnerHeight);
                    
                        // Make the Detail div visible
                        // animate(properties, duration, easing, complete)
                        $(this).animate({
                            left: -($(this).outerWidth())
                            }, 500, function() {
                                // Animation is complete now
                                $(this).toggle();
                                $(this).next().toggle(0, function() {
									$(this).css("left", $(this).outerWidth());
                                    $(this).parent('div.wrapperTwoCols').css('maxHeight', ($(this).outerHeight() + extraHeight));
                                    $(this).parent('div.wrapperTwoCols').animate({ height: ($(this).outerHeight() + extraHeight)} , 500);
                                });
                                $(this).next().animate({
                                    left: '0'
                                }, 500);
                            }
                        );
                        
                    }
                    return false;
                    
                }
                    
            });
            // /Fade Teaser out and Detail in
            
            // Fade Detail out and Teaser in
            $(this).next().click(function(event) {
            
                // console.log(divIsClickable);
                if(divIsClickable == true) {
            
                    // Avoid double clicking!
                    if(!event.detail || event.detail == 1) {    // activate on first click only to avoid double clicks
                    
                        // Wrapping div with max height
                        $(this).parent('div').removeClass('selected');
                        
                        // Make the Teaser visible
                        // animate(properties, duration, easing, complete)
                        $(this).animate({
                            left: $(this).outerWidth()
                            }, 500, function() {
                                // Animation is complete now
                                $(this).toggle();
                                $(this).prev().toggle(0, function() {
									$(this).parent('div.wrapperTwoCols').animate({ maxHeight: initialInnerHeight} , 500);
									$(this).parent('div.wrapperTwoCols').animate({ height: initialInnerHeight} , 500);
                                });                            
                                $(this).prev().animate({
                                    left: '0'
                                }, 500);
                            }
                        );
                    
                    }
                    return false;
                    
                }
                
            });
            // /Fade Detail out and Teaser in
            
            /////////////////////////////////////////////////////////
            // /Now animate the initial and generated LIs on click //
            /////////////////////////////////////////////////////////
                
        });
    }
    
    
    
    /////////////////////////////////
    // News article click function //
    /////////////////////////////////
    /*
    $("body.start #after-content  article.widget-container-widget ul.list-items li.initial article").click(function () {
        if ($(this).hasClass("news")) {
            window.location.href = $(this).find('header').find('h1').find('a').attr('href');
        }
    });
    */
    
    
    
 });