GMR = {};

// Variables

//Transition you want :)
var easing_type = 'easeOutQuad';
//The default height for the dock (on mouse out)
var default_dock_width = 89.6;



$(document).ready(function () {
    GMR.scroller.load();
});

GMR.scroller = {
    load: function () {
        GMR.scroller.init();
        GMR.scroller.hover();
        GMR.scroller.click();
        GMR.scroller.pp();
    },

    // Initialize scroller styling
    init: function () {
        var totIncrement = 0;
        var increment = 369;
        var itemList = null;
        var extraItem = 0; //not seen item
        var maxRightIncrement = null;
        var displayWidth = 0;


        // set width for shuffle holder

        //get all li
        itemList = $("#myList").children();
        //fixed unseen scroller items on smaller resolutions
        displayWidth = (($("#stage").width()) / 118).toFixed(0) - 1
        if (itemList.length > displayWidth) {
            extraItem = displayWidth - itemList.length;
        } else {
            extraItem = 0;
        }

        // set new width of the list container depending no the # of items
        var listContainerWidth = (itemList.length) * 120;
        $("#myList").width(listContainerWidth);

        // set max right increment
        maxRightIncrement = increment * (extraItem + 1) / 3;

        // set opacity to 0.5 when page is loaded
        $('.single_scroller_item').fadeTo('slow', 0.5, function () {
            // Animation complete.
        });
        $('#previous').fadeTo('slow', 0.4, function () {
            // Animation complete.
        });
        $('#next').fadeTo('slow', 0.4, function () {
            // Animation complete.
        });

        // set previous function on the carousel
        $('#previous').click(function () {
            if (totIncrement < 0) {
                totIncrement = increment + totIncrement;
                $('#myList').animate({ marginLeft: totIncrement });
            }
        });
        // set next function on the carousel
        $('#next').click(function () {
            if (totIncrement > maxRightIncrement) {
                totIncrement = totIncrement - increment;
                $('#myList').animate({ marginLeft: totIncrement });
            }
        });

        // set opacity animation
        $("#previous").hover(function () {
            $(this).fadeTo('fast', 1)
        }, function () {
            $(this).fadeTo('fast', 0.4)
        });
        $("#next").hover(function () {
            $(this).fadeTo('fast', 1)
        }, function () {
            $(this).fadeTo('fast', 0.4)
        });

        // hide show button
        $('#btn_show').css({ 'display': 'none' });
        // show hide button
        $('#btn_hide').css({ 'display': 'block' });

        // set width for shuffleholder
        $('#shuffleHolder').css({ 'width': default_dock_width + '%' });
    },

    // set hover functionality over scroller items
    hover: function () {
        // zoom the item on hover
        $(".single_scroller_item").hover(function () {
            //$(this).fadeTo('fast', 1);
            $(this).css({
                'position': 'absolute',
                'background': '#000000',
                'z-index': 10,
                'opacity': 1,
                'margin': -45,
                'width': 176,
                'padding': 5

            });
            $(this).find('p').css({
                'font-size': 12,
                'margin-bottom': 1
            });
            $(this).find('img').css({
                height: 120,
                width: 176
            });
        }, function () {
            //$(this).fadeTo('fast', 0.5);
            $(this).css({
                'position': 'static',
                'background': 'none',
                'opacity': 0.5,
                'z-index': 1,
                'margin': 0,
                'width': 110,
                'padding': 0
            });
            $(this).find('p').css({
                'font-size': 10,
                'margin-bottom': 0
            });
            $(this).find('img').css({
                height: 60,
                width: 88
            });
        });
    },

    // set show/hide functionality over scroller container
    click: function () {
        //Set the CSS attribute for #dock
        $('#shuffleHolder').css({ 'width': default_dock_width + '%' });

        //declare variable will be used for navholder animation function
        var nav_item = null;
        var sub_navItem = null;
        var sub_nav = null;
        var sub_nav_height = null;

        //hide the shuffle
        $("#btn_hide").click(function () {
            GMR.scroller.hide("animate");
            $('#btn_show').css({ 'display': 'block' });
        })

        //show the shuffle or reshuffle the shuffle
        $("#btn_show").click(function () {
            GMR.scroller.show("animate");
        });

    },

    // show scroller
    show: function (style) {
        if (style == "animate") {
            $('#shuffleHolder').animate({ 'width': default_dock_width + '%' }, { queue: false, duration: 700, easing: easing_type });
        } else {
            $('#shuffleHolder').css({ 'width': 90.6 + '%' });
        }
        $('#btn_show').css({ 'display': 'none' });
        $('#btn_hide').css({ 'display': 'block' });
        $('#slider-buttons').css({ 'display': 'block' });
    },

    // hide scroller
    hide: function (style) {
        if (style == "animate") {
            $('#shuffleHolder').animate({ 'width': 0 }, { queue: false, duration: 700, easing: easing_type });
        } else {
            $('#shuffleHolder').css({ 'width': 0 });
        }
        $('#btn_hide').css({ 'display': 'none' });
        $('#slider-buttons').css({ 'display': 'none' });
    },

    // specifically for practices page
    shufflePractices: function (event) {
        if (event == "show") {
            GMR.scroller.show("animate");
        } else {
            GMR.scroller.hide("animate");
        }
    },

    //reload pretty photo function
    pp: function () {
        /* modal content */
        $("a[rel^='prettyPhoto[pp_content]']").prettyPhoto({
            theme: 'dark_rounded',
            default_width: 800,
            allow_resize: false,
            markup: '<div class="pp_pic_holder pp_gmr pp_content"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">next</a> \
											<a class="pp_previous" href="#">previous</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details clearfix"> \
											<p class="pp_description"></p> \
											<a class="pp_close" href="#">Close</a> \
											<div class="pp_nav"> \
												<a href="#" class="pp_arrow_previous">Previous</a> \
												<p class="currentTextHolder">0/0</p> \
												<a href="#" class="pp_arrow_next">Next</a> \
											</div> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div class="pp_overlay pp_gmr_overlay"></div>'
        });
    }
}


//get url param
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('#') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}