/*
1. eerste loop sneller, enkel bij start (OK)
2. bij mouseleave lengte van balk behouden (OK)
3. images aanpasssen: vlek en pleister
*/

jQuery.fn.acvnav = function() {

    /**
    * Boolean autoanimatie
    */
    this._autoAnimate = false;

    /**
    * the max width for the navigation bar
    */
    this._maxWidth = 909;

    /**
    * the animation speed for the navbar
    */
    this._animationSpeed = 1000;

    /**
    * the animation speed for the img transition
    */
    this._transitionSpeed = 1000;

    /**
    * the interval for the auto animation
    */
    this._carrouselInterval = 4000;


    /**
    * the timeout before animation occurs
    */
    this._timeOut = 300;

    /**
    * contains the navigation items and the imageDivs
    */
    this.navObj = {};
    this._keyArray = new Array();


    this._current = 0;
    this._interval = null;


    /**
    * Prefix to create unique keys
    */
    this._prefix = "acvnav_";

    this._activeObj = null;

    /**
    * the callback function for the mouseenter of the navigation
    */
    this.navOver = function(obj) {
        if (this._interval !== null) {
            clearInterval(this._interval);
        }
        var navObject = this.navObj[obj.id];
        this._setOver(navObject);
    }

    this._setOver = function(navObject) {
        var scope = this;
        if (navObject.animation) {
            clearTimeout(navObject.animation);
        }

        // when there's no activeObj, we use a small timeout
        var timeOutSpeed = (this._activeObj === null) ? 1 : this._timeOut;
        navObject.animation = setTimeout(function() { scope._startSlide(navObject); }, timeOutSpeed);

    }

    /**
    * the callback function for the mouseleave of the navigation
    */
    this.navOut = function(obj) {
        if (this._autoAnimate) this.autoAnimate();
        var navObject = this.navObj[obj.id];
        this._setOut(navObject);
    }

    this._setOut = function(navObject) {
        var scope = this;
        if (navObject.animation) {
            clearTimeout(navObject.animation);
        }
        //navObject.animation = setTimeout(function() { scope._stopSlide(navObject); }, 1);

    }

    this._startSlide = function(navObj) {

        if (this._activeObj !== null && this._activeObj !== navObj) this._stopSlide(this._activeObj);
        this._activeObj = navObj;
        var currentSlide = $('#header-wrap-pic div.activeslide');

        navObj.nav.stop().animate({ width: this._maxWidth + "px" }, this._animationSpeed);
        navObj.aTag.stop(true).animate({ "paddingRight": 450 }, this._animationSpeed);

        if (currentSlide.attr("id") !== navObj.imgDiv.attr("id")) {
            currentSlide.stop().css({ opacity: 1.0 }).removeClass('activeslide').animate({ opacity: 0.0 }, this._transitionSpeed);
            navObj.imgDiv.stop().css({ opacity: 0.0 }).addClass('activeslide').animate({ opacity: 1.0 }, this._transitionSpeed);
        }
    }

    this._stopSlide = function(navObj) {
        navObj.nav.stop().animate({ width: navObj.initialWidth + "px" }, this._animationSpeed);
        navObj.aTag.stop(true).animate({ "paddingRight": "0px" }, this._animationSpeed);
    }


    this.autoAnimate = function(interval) {
        if (this._keyArray.length) {
            this._autoAnimate = true;

            // interval is set on first start, we must remember this.
            this._isFirstLoop = (interval) ? true : false;
            this._loopCount = 0;

            // use interval (is set) as setInterval value, otherwise use the default _carrouselInterval.
            var cInterval = (interval) ? interval : this._carrouselInterval;

            for (var i = 0, l = this._keyArray.length; i < l; i++) {
                var obj = this.navObj[this._keyArray[i]];
                if (this._activeObj === null) {
                    if (obj.active === true) {
                        this._startSlide(obj);
                        this._current = i;
                        break;
                    }
                }
                else {
                    if (obj === this._activeObj) {
                        this._current = i;
                        break;
                    }
                }
            }
            var scope = this;
            this._interval = setInterval(function() { scope._carrousel(); }, cInterval);
        }
    }

    this._carrousel = function() {

        this._current = (this._current < this._keyArray.length - 1) ? this._current + 1 : 0;
        var navObject = this.navObj[this._keyArray[this._current]];
        if (this._activeObj !== null) this._stopSlide(this._activeObj);
        this._startSlide(navObject);

        // after autoanimation did roteted all images, stop the initial loop and start again with higher interval
        if (this._isFirstLoop) {
            this._loopCount++;
            if (this._loopCount == this._keyArray.length) {
                clearInterval(this._interval);
                this.autoAnimate();
            }
        }
    }



    var navList = $(this).children();

    for (var i = 0, l = navList.length; i < l; i++) {

        // make jquery object, the list contains DOM elements
        var nav = $(navList[i]);

        // get the id of the div
        var idName = nav.attr("id");

        // create the unique id. Will be set on the aTag and used as key for the navObj object
        var uniqueKey = this._prefix + idName;
        this._keyArray.push(uniqueKey);

        // get the aTag
        var aTag = $("#" + idName + " a");

        // add the unique key as id to the aTag
        aTag.attr("id", uniqueKey);


        // get the corresponding img div
        var imgDiv = $('#' + idName.replace(/-nav-/, "-pic-"));

        // bind mouseover and mouseout and add self as manager to the object
        aTag.bind('mouseenter', this,
			function(e) {
			    this.manager = e.data;
			    this.manager.navOver(this);
			}
		);

        aTag.bind('mouseleave', this,
			function(e) {
			    this.manager = e.data;
			    this.manager.navOut(this);
			}
		);

        // float to right and add padding, so the hover area will be somewhat alligned
        aTag.css('float', 'right').css('padding-left', '70px');

        // get the active state of the nav
        var activeBool = nav.hasClass("activenav");

        // hide the images, but show the active one

        if (activeBool) {
            imgDiv.css({ opacity: 1.0 });
        }
        else {
            imgDiv.css({ opacity: 0.0 });
        }


        // get the initial width of the navBar
        var initialWidth = nav.width();

        // add the nav and imgDiv to the navObject list
        this.navObj[uniqueKey] = { "nav": nav, "aTag": aTag, "imgDiv": imgDiv, "active": activeBool, "initialWidth": initialWidth, "animation": null }


    };

    //this.autoAnimate();
    // unset the navList, we don't need it anymore
    navList = null;
    return this;

};






$(function() {

    $(document).pngFix();

    $('body').css({ opacity: 0.9999 });

    var playSlideShow;
    var playNavigation;

    var openNavSlide;

    //strage bug fix for ie6
    $('header-pic-text').show();

    // print button
    $("#printPage").click(function() { window.print(); });

    /*
    * Checkt of img aanwezig is, neemt de value van alt tag om in title tag te injecteren.
    Indien geen img, gebruikt de text van de ahref om in de title tag te injecteren.
    */


    $('a').each(function() {
        var $copyText;
        if ($(this).is(":has('img')"))
            $copyText = $(this).find('img').attr('alt');
        else $copyText = $(this).text(); $(this).attr('title', $copyText);
    });


    /*
    * Verwijdert de border en outline bij image links
    */
    $('a img ').each(function() { var cssObj = { 'border': 'none', 'outline': 'none' }; $(this).parent('a').css(cssObj); });


    /*
    * Hover A href Images
    */


    $('a img.rollover').hover(function() {
        this.src = this.src.replace(/\.gif/, '_active.gif');
    }, function() { this.src = this.src.replace(/_active\.gif/, '.gif'); });



    /*
    * Lees Meer Rollover
    */


    $('span.leesmeer a').hover(function() {
        $(this).parent().parent().removeClass().addClass('icon-selected');
    }, function() { $(this).parent().parent().removeClass().addClass('icon'); });



    /*
    * Content-navigation rollover
    */


    $("#content-navigation ul li a:not('visited')").hover(function() {
        $(this).parent().removeClass().addClass('icon-selected');
    }, function() { $(this).parent().removeClass().addClass('icon'); });



    //$('#content-navigation ul li a').visited(function() {
    //    $(this).parent().removeClass().addClass('icon-selected');
    //});



    /*
    * Hover on submit button
    */


    $('button#submitBtn').hover(function() {
        $(this).removeClass().addClass('active');
    }, function() { $(this).removeClass().addClass('nonactive'); });


    /*
    * Start the navigation
    */
    $('#header-navigation').acvnav().autoAnimate(4000);

	/*
	* Remove values of input textboxes and textareas
	*/
    $("#content-block #reacties-form fieldset input.clickable").click(function() {
        this.value = "";
    });

    $("#content-block #acvbuurtform fieldset input.clickable").click(function() {
        this.value = "";
    });

    $("#content-block #reacties-form fieldset textarea.clickable").click(function() {
        this.value = "";
    });
	
	/*
	* Set the default slide opacity;
	*/
	$(".slide").each( function(){
		if ( $(this).hasClass("activeslide") )
		{
			$(this).css({ opacity: 1 });
		}
		else
		{
			$(this).css({ opacity: 0 });
		}
	});

});