/****************************************************************
* file: 	/js/index.js
* author:	toy
* date:		20nov11
* re:		js routines good for index
*
* rev history
* [toy 20nov11]		orig version
* [toy 12dec11]		adjusted widths for my site
* [toy 12dec11]		changed bind funcs to on

console.dir({ pxs_thumbnails: $(this).attr("gid"), a: "each test" });

*****************************************************************/
// slider stuff
// http://tympanus.net/codrops/2011/01/03/parallax-slider/
(function($) {
    $.fn.parallaxSlider = function(options) {
        var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
        return this.each(function() {
            var $pxs_container = $(this),
			o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

            //the navigation buttons
            var $pxs_next = $('.pxs_next', $pxs_container), $pxs_prev = $('.pxs_prev', $pxs_container);
            //the bg images
            var $pxs_bg1 = $('.pxs_bg1', $pxs_container), $pxs_bg2 = $('.pxs_bg2', $pxs_container), $pxs_bg3 = $('.pxs_bg3', $pxs_container);
            //current image
            var current = 0, currGall = 0, curImage = 0;
            //the thumbs container
            var $pxs_thumbnails = $('.thumbnails'),
    			$pxs_thumbs_loading = $('.pxs_thumbs_loading'),
                $pxs_thumbGalls = $pxs_thumbnails.children();

            // caption container
            var $pxs_caption_wrapper = $('.captions'),
                $pxs_captions = $pxs_caption_wrapper.children(),
                $pxs_caption = $pxs_captions.eq(currGall);

            //the interval for the autoplay mode
            var slideshow = 5000, total_elems = 0, total_images = 0,
            //the loading image
			$pxs_captions_loading = $('.pxs_captions_loading', $pxs_container),
			$pxs_loading = $('.pxs_loading', $pxs_container),
			$pxs_slider_wrapper = $('.pxs_slider_wrapper', $pxs_container),
            $pxs_sliders = $pxs_slider_wrapper.find(".pxs_slider"),
            $pxs_slider = $pxs_sliders.eq(currGall);

            $pxs_sliders.each(function() {
                var $s = $(this).children();
                total_images += $s.length;
            });

            //first preload all the images
            var loaded = 0,
			$images = $pxs_slider_wrapper.find('img');

            $images.each(function() {
                var $img = $(this);
                $('<img/>').load(function() {
                    ++loaded;

                    // adjust upper margin
                    var h = (this.height > this.width) ? 400 : (this.height / this.width) * 300;
                    var top = (($pxs_container.height() - $pxs_caption_wrapper.height() - 30) - h) / 2;
                    $img.css("margin-top", top + "px");

                    if (loaded == total_images) {
                        // hide everything
                        $pxs_loading.hide();
                        $pxs_thumbs_loading.hide();
                        $pxs_sliders.hide();
                        $pxs_captions.hide();
                        $pxs_thumbnails.hide();
                        $pxs_thumbGalls.hide();

                        //one images width (assuming all images have the same sizes)
                        // var one_image_w = $pxs_slider.find('img:first').width();
                        var one_image_w = 300;
                        var spaces = one_image_w / (total_elems + 1);

                        //need to set width of each slider, each of its elements, and the navigation buttons
                        $pxs_sliders.each(function() {
                            var i = $(this).index();
                            setWidths($(this), $pxs_captions.eq(i), $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev);
                        });
                        // this is yukky but have to reinit width for def gall
                        setWidths($pxs_slider, $pxs_caption, $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev);

                        // now show what we want
                        $pxs_slider_wrapper.show();
                        $pxs_caption_wrapper.show();
                        $pxs_thumbnails.show();
                        $pxs_sliders.eq(currGall).show();
                        $pxs_captions.eq(currGall).show();
                        $pxs_thumbGalls.eq(currGall).show();

                        // thumb control
                        $pxs_thumbGalls.each(function() {
                            var $thumbs = $(this).children();

                            $thumbs.each(function(i) {
                                var $this = $(this);
                                var left = spaces * (i + 1) - $this.width() / 2;
                                $this.css('left', left + 'px');

                                if (o.thumbRotation) {
                                    var angle = Math.floor(Math.random() * 41) - 20;
                                    $this.css({
                                        '-moz-transform': 'rotate(' + angle + 'deg)',
                                        '-webkit-transform': 'rotate(' + angle + 'deg)',
                                        'transform': 'rotate(' + angle + 'deg)'
                                    });
                                }
                                // hovering the thumbs animates them up and down
                                $this.bind('mouseenter', function() {
                                    $(this).stop().animate({ top: '-10px' }, 100);
                                }).bind('mouseleave', function() {
                                    $(this).stop().animate({ top: '0px' }, 100);
                                });

                                // clicking a thumb will slide to the respective image
                                $this.bind('click', function() {
                                    var $thumb = $(this);
                                    highlight($thumb);
                                    //if autoplay interrupt when user clicks
                                    if (o.auto) { clearInterval(slideshow); }
                                    current = $thumb.index();
                                    slide(current, $pxs_sliders.eq(currGall), $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingBg);
                                });
                            });

                            // make the first thumb be selected
                            highlight($thumbs.eq(0));
                        });

                        //slide when clicking the navigation buttons
                        $pxs_next.bind('click', function() {
                            var $thumbs = $pxs_thumbGalls.eq(currGall).children();
                            var $pxs_slider = $pxs_sliders.eq(currGall);
                            var $pxs_caption = $pxs_captions.eq(currGall);
                            ++current;

                            if (current >= $thumbs.length)
                                if (o.circular)
                                current = 0;
                            else {
                                --current;
                                return false;
                            }
                            highlight($thumbs.eq(current));
                            slide(current, $pxs_slider, $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingBg);
                        });
                        $pxs_prev.bind('click', function() {
                            var $thumbs = $pxs_thumbGalls.eq(currGall).children();
                            var $pxs_slider = $pxs_sliders.eq(currGall);
                            var $pxs_caption = $pxs_captions.eq(currGall);
                            --current;

                            if (current < 0)
                                if (o.circular)
                                current = $thumbs.length - 1;
                            else {
                                ++current;
                                return false;
                            }
                            highlight($thumbs.eq(current));
                            slide(current, $pxs_slider, $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingBg);
                        });

                        // activate the autoplay mode if that option was specified
                        if (o.auto != 0) {
                            o.circular = true;
                            slideshow = setInterval(function() {
                                $pxs_next.trigger('click');
                            }, o.auto);
                        }

                        /*
                        when resizing the window,
                        we need to recalculate the widths of the
                        slider elements, based on the new windows width.
                        we need to slide again to the current one,
                        since the left of the slider is no longer correct
                        */
                        $(window).resize(function() {
                            w_w = $(window).width();
                            // [toy] adjusted for my site
                            w_w = 480;

                            setWidths($pxs_slider, $pxs_caption, $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev);
                            slide(current, $pxs_slider, $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, 1, o.easing, o.easingBg);
                        });

                        //console.dir({ a: "before GALLS", currGall: currGall });

                        // bind galls
                        var $galleries = $('.navSection .galleryUL').children();
                        $galleries.bind('click', function() {
                            var $gallery = $(this);
                            selectedGall = $gallery.index();

                            // make sure user picked one
                            if (selectedGall == currGall) return;

                            // hide all gall slider sand thumb
                            $pxs_thumbGalls.fadeOut();
                            $pxs_sliders.fadeOut();
                            $pxs_captions.fadeOut();

                            currGall = selectedGall;

                            // reset selected slider
                            current = 0;
                            var $pxs_slider = $pxs_sliders.eq(currGall);
                            var $pxs_caption = $pxs_captions.eq(currGall);
                            slide(current, $pxs_slider, $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, 1, o.easing, o.easingBg);
                            var $thumbs = $pxs_thumbGalls.eq(currGall).children();
                            highlight($thumbs.eq(current));

                            // mark selected                            
                            $galleries.removeClass('currGall');
                            $gallery.addClass('currGall');

                            // the thumbs
                            var $thumbs = $pxs_thumbGalls.eq(currGall).children();

                            // now show the newly selected
                            $pxs_thumbGalls.eq(currGall).fadeIn();
                            $pxs_sliders.eq(currGall).fadeIn();
                            $pxs_captions.eq(currGall).fadeIn();
                        });

                    }
                }).error(function() {
                    alert('There was an error loading all the images.  Please refresh the page')
                }).attr('src', $img.attr('src'));
            });
        });
    };

    //the current windows width
    var w_w = $(window).width();

    // [toy] adjusted for my site
    w_w = 480;

    var slide = function(current, $pxs_slider, $pxs_caption, $pxs_bg3, $pxs_bg2, $pxs_bg1, speed, easing, easingBg) {
        var slide_to = parseInt(-w_w * current);
        $pxs_slider.stop().animate({
            left: slide_to + 'px'
        }, speed, easing);
        $pxs_caption.stop().animate({
            left: (slide_to + 10) + 'px'
        }, speed, easing);
        $pxs_bg3.stop().animate({
            left: slide_to / 2 + 'px'
        }, speed, easingBg);
        $pxs_bg2.stop().animate({
            left: slide_to / 4 + 'px'
        }, speed, easingBg);
        $pxs_bg1.stop().animate({
            left: slide_to / 8 + 'px'
        }, speed, easingBg);
    }

    var highlight = function($elem) {
        $elem.siblings().removeClass('selected');
        $elem.addClass('selected');
    }

    var setWidths = function($pxs_slider, $pxs_caption, $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev) {
        var $sliderImages = $pxs_slider.children();
        var $sliderCaptions = $pxs_caption.children();

        // the width of the slider and captions is the windows width times the total number of elements in the slider
        var pxs_slider_w = w_w * $sliderImages.length;
        $pxs_slider.width(pxs_slider_w + 'px');
        $pxs_caption.width(pxs_slider_w + 'px');

        // each image will have a width = windows width
        $sliderImages.each(function() {
            $(this).width(w_w + 'px');
        });

        // each caption will have a width = windows width
        $sliderCaptions.each(function() {
            $(this).width(w_w + 'px');
        });

        // we also set the width of each bg image div.
        // The value is the same calculated for the pxs_slider
        $pxs_bg1.width(pxs_slider_w + 'px');
        $pxs_bg2.width(pxs_slider_w + 'px');
        $pxs_bg3.width(pxs_slider_w + 'px');

        // both the right and left of the navigation next and previous buttons will be:
        // windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
        var position_nav = w_w / 2 - one_image_w / 2 + 3;

        // [toy] adjusted for my site
        position_nav = position_nav - 80;
        position_nav = 10;

        $pxs_next.css('right', position_nav + 'px');
        $pxs_prev.css('left', position_nav + 'px');
    }

    $.fn.parallaxSlider.defaults = {
        auto: 0, //how many seconds to periodically slide the content.
        //If set to 0 then autoplay is turned off.
        speed: 1000, //speed of each slide animation
        easing: 'jswing', //easing effect for the slide animation
        easingBg: 'jswing', //easing effect for the background animation
        circular: true, //circular slider
        thumbRotation: false//the thumbs will not be randomly rotated
    };
    //easeInOutExpo,easeInBack
})(jQuery);

$J(function() {
    var $pxs_container = $J('#pxs_container');
    $pxs_container.parallaxSlider();
});


// accordian
$J(document).ready(function() {
    $J('.accHeadI').click(function() {
        $J(this).closest(".navSection").find(".stuffD").slideToggle('slow');
        return false;
    }).closest(".navSection").find(".stuffD").hide();
    $J('.accHeadA').click(function() {
        $J(this).closest(".navSection").find(".stuffD").slideToggle('slow');
        return false;
    }).closest(".navSection").find(".stuffD").hide();

    // exception defaults
    $J(this).find(".newsD .stuffD").toggle('slow');
})

// overlay
$J(document).ready(function() {
    // setup default state
    $J("#overlay").hide();
    var w_w = $J(window).width();
    var w_h = $J(window).height();
    var $viewport = $J(".viewportD");

    // center tv
    var sideMarg = (w_w - $viewport.width()) / 2;
    var topMarg = (w_h - $viewport.height()) / 2;
    $viewport.css('top', topMarg + 'px');
    $viewport.css('left', sideMarg + 'px');

    $J("#resumeA").click(function() {
    });

    $J(".contactA").click(function() {
        $J("html").scrollTop(0);
        $J(".err").hide();
        $J(".thankyouD").hide();
        $J("#overlay").show("slow");
        $J("#tv").load("/ajax/loadContactForm.php");
    });
    $J("#send").live("click", function() {
        $J.ajax({
            beforeSend: function() {
                $J(".err").hide();
                $J(".thankyouD").hide();
                $J(".spinnerD").show();
                $J(".formD").hide();
            },
            url: "/ajax/sendMessage.php",
            type: 'POST',
            data: ({
                "n": $J("#name").val(),
                "e": $J("#email").val(),
                "m": $J("#message").val()
            }),
            success: function(results) {
                //alert(results);
                $J(".spinnerD").hide();
                if (results != 0) {
                    $J(".thankyouD").show();
                    $J("#tv").html("<div class='thankyouD'>Thank you</div><div class='doneD'><a class='buttonA sendA closeA'>Done</a></div>");
                }
                else {
                    $J(".err").show();
                    $J("#tv").html("<div class='err'>There were empty fields so your message was not sent but please try again</div>");
                }
            }
        });
    });

    $J('.reelGalleryI').click(function() {
        var mid = $J(this).attr("mid");

        $J("html").scrollTop(0);
        $J("#overlay").show("slow");
        $J.ajax({
            beforeSend: function() {
                $J(".err").hide();
                $J(".formD").hide();
                $J(".thankyouD").hide();
                $J(".spinnerD").show();
            },
            url: "/ajax/loadReel.php",
            type: 'POST',
            data: ({
                "id": mid
            }),
            success: function(results) {
                //alert(results);
                $J(".spinnerD").hide();
                $J("#tv").html(results);
            }
        });
    });

    $J('.closeA').live("click", function() {
        $J("#overlay").hide("slow");
    });
})