$(function() {

    // make sure intro panel properly hidden!

    var square = 102;
    
    // Save reference to dynamically added "Add story squares"
    var padding = {};
    
    var gridframe = $('#gridframe');
    
    // Add story square bg colours
    var palette = ['#e57200', '#685c53', '#7e7a00', '#34b6e4', '#004065'],
		randcolour = function randcolour() {
		    var rand = Math.round(Math.random() * (palette.length - 1));
		    return palette[rand];
		};
/*
    var padgrid = function padgrid(count) {

        var paditems = $('<div>');
        for (i = 0; i < count; i++) {
            paditems.append('<li class="add"></li>');
        }
        $('#last').before(paditems.html());
        paditems.empty();
    };
*/

    var padgrid = function padgrid(count) {

        var paditems = $('<div>');
        for (i = 0; i < count; i++) {
            paditems.append('<li class="add"></li>');
        }
        padding = paditems.children();
        
        $('#last').before(padding);
    };

    var sizegrid = function sizegrid() {
        
        if (padding.length) {
            padding.remove();
        }
        var portwidth = $(window).width() - 0,
			portheight = $(window).height(),
			visiblerows = Math.floor(portheight / square),
			visiblecols = Math.floor(portwidth / square),
			visiblecount = visiblerows * visiblecols,
			gridcount = $('#grid li').length,
			remainder = gridcount - visiblecount,
			// Number of 'Add story squares to add'
			padcount = 0;

        if (remainder < 0) {
            // less grid items than visible space
            padcount = remainder * -1;
        }
        else if (remainder > 0) {
            // more grid items than visible at once

            if (remainder < visiblerows * 3) {
                // not enough items to fill next scroll
                padcount = visiblerows * 3 - remainder;
            }
            else {
                // more items than next scroll
                padcount = visiblerows * 3 - (remainder % (visiblerows * 3));
            }
        }

        // ensure there are always some new items
        padgrid(padcount);
      //  console.log(padding);
      
      // Calculate number of cols
        var gridwidth = (gridcount + padcount) / visiblerows;

        // maybe pad with difference between viewport width and square to prevent partial grid scroll
        $('#grid').width(gridwidth * square);
        
        updatescrollers();

    };

    var updatescrollers = function updatescrollers() {
        var scrollpos = gridframe[0].scrollLeft;
        var scrollremaining = gridframe[0].scrollWidth - $(window).width() - scrollpos;
        
        if (scrollpos === 0) {
            $('#scrollleftbutton').animate({left:'-41px'},'slow');
        }
        else {
            $('#scrollleftbutton').animate({left:'0px'},'slow');
        }
        
        if (scrollremaining < 100) { // 100 pixels scroll tolerance
            $('#scrollrightbutton').animate({right:'-41px'},'slow');
        }
        else {
            $('#scrollrightbutton').animate({right:'0'},'slow');
        }
        
    };

    var scrollleft = function scrollleft() {
        gridframe.scrollTo('-=306px', { axis: 'x', duration: 500, onAfter:updatescrollers });
    };

    var scrollright = function scrollright() {
        gridframe.scrollTo('+=306px', { axis: 'x', duration: 500, onAfter:updatescrollers });
    };

    var hidehover = function hidehover() {
        introbox.stop().fadeTo(0, 0).css({ left: '' });
        if (imagezoom.data('hidden') === false) {
            imagezoom.stop().css({ height: '', width: '', top: '', left: '' }).data('hidden', true);
        }
        if (addstory.data('hidden') === false) {
            addstory.stop().css({ height: '', width: '', top: '', left: '' }).removeClass('open').data('hidden', true);
        }
    };

    var showmodal = function showmodal() {
        modal.fadeTo(0, 0).css({ top: 0 }).fadeTo(200, .5);
        $('#grid').addClass('modalopen');
    };

    var hidemodal = function hidemodal() {
        modal.fadeTo(200, .5, function() {
            modal.css({ top: '100%' });
            $('#grid').removeClass('modalopen');
        });
    };

    var opendetail = function opendetail(event) {

        var storyurl = "";
        
        loading.css({height:introbox.outerHeight(),width:introbox.outerWidth()}).position(
            { my: 'left top'
            , at: 'left top'
            , of: introbox
            , collision: 'none'
        });
        
        story.data('gridspot', $(this).data('gridspot'));
        
        // Only if clicked outside of link
        if ($(this).is('a')) {
            storyurl = this.href;
        }
        else {
            storyurl = $(this).find('a')[0].href;
        }

        story.load(storyurl + ' #content', function(responseText, textStatus, XMLHttpRequest) {
            if (textStatus === "success") {
                introbox.stop().fadeTo(0, 0).css('left','');
                loading.css({left:''});
                $("#email-link").emailForm();
                loadStoryVideo();
                showmodal();
             //   storypage.css({ top: '60px' });
                storypage.addClass('show');
            }
            else {
                alert('Oops, please try again.');
            }
        });
        event.preventDefault();
    };

    var closedetail = function closedetail() {
   //     storypage.css({ top: '' });
        story.empty();
        storypage.removeClass('show');
        hidemodal();
        $("#email-form .close").trigger('click');
    };

    var loadprevstory = function loadprevstory() {
        loading.css({height:storypage.outerHeight(),width:storypage.outerWidth()}).position(
            { my: 'left top'
            , at: 'left top'
            , of: storypage
            , collision: 'none'
        });
        var prevstory = story.data('gridspot').prevAll('.story').first();
        if (prevstory.length === 0) {
            // loop back if at end
            prevstory = story.data('gridspot').siblings('.story').last();
        }
        var storyurl = prevstory.find('a')[0].href;
        story.load(storyurl + ' #content', function(responseText, textStatus, XMLHttpRequest) {
            if (textStatus === "success") {
                loading.css({left:''});
                $("#email-form .close").trigger('click');
                story.data('gridspot', prevstory);
                $("#email-link").emailForm();
                loadStoryVideo();
            }
            else {
                alert('Oops, please try again.');
            }
        });

    };

    var loadnextstory = function loadnextstory() {
        loading.css({height:storypage.outerHeight(),width:storypage.outerWidth()}).position(
            { my: 'left top'
            , at: 'left top'
            , of: storypage
            , collision: 'none'
        });
        var nextstory = story.data('gridspot').nextAll('.story').first();
        if (nextstory.length === 0) {
            // loop back if at end
            nextstory = story.data('gridspot').siblings('.story').first();
        }
        var storyurl = nextstory.find('a')[0].href;
        story.load(storyurl + ' #content', function(responseText, textStatus, XMLHttpRequest) {
            if (textStatus === "success") {
                loading.css({left:''});
                $("#email-form .close").trigger('click');
                story.data('gridspot', nextstory);
                $("#email-link").emailForm();
                loadStoryVideo();
            }
            else {
                alert('Oops, please try again.');
            }
        });

    };


    sizegrid();
    
    // Need to:
    // throttle this event firing with debounce plugin - ask Bev
    // hidehover and reset or adjust scroll position when making window bigger if already scrolled
   //  $(window).resize(sizegrid);

    // generated UI

    var introbox = $('<div>', { id: 'introbox', click: opendetail }).appendTo('#gridframe'),
        loading = $('<div>', { id: 'loading'}).appendTo('#gridframe'),
		imagezoom = $('<a>', { id: 'imagezoom', data: { 'hidden': true }, click: opendetail }).appendTo('#gridframe'),
		addstory = $('<a>', { id: 'addstory', data: { href: $('#mainnav-add a')[0].href} }).appendTo('#gridframe'),
		storypage = $('<div>', { id: 'storypage' }).appendTo('body'),
		modal = $('<div>', { id: 'modal', click: closedetail }).appendTo('body'),
		story = $('<div>', { id: 'story' }).appendTo(storypage),
		prevstory = $('<div id="prevstory"><span>Previous</span></div>').click(loadprevstory).appendTo(storypage),
		nextstory = $('<div id="nextstory"><span>Next</span></div>').click(loadnextstory).appendTo(storypage),
		closestory = $('<a id="closestory">CLOSE</a>').click(closedetail).appendTo(storypage),
		scrollleftbutton = $('<div id="scrollleftbutton" class="scrollbutton"><span>Previous</span></div>')
		    .bind('click', scrollleft).appendTo('#gridframe'),
		scrollrightbutton = $('<div id="scrollrightbutton" class="scrollbutton"><span>Next</span></div>')
		    .bind('click', scrollright).appendTo('#gridframe');

    // initial scroll position
    if(gridframe.find("ul.scroll0").length != 0)
    {
        gridframe.scrollTo('0',{onAfter:updatescrollers});
    }
    else
    {
        gridframe.scrollTo('306',{onAfter:updatescrollers});
    }
    
    
    // Assign behaviours

    $('#banner,#foot,#scrollleftbutton,#scrollrightbutton').mouseover(hidehover);

    $('#grid li').live('mouseover', function() {

        hidehover();
        // the hovered square in the grid
        var gridspot = $(this);

        switch (gridspot.attr('class')) {

            case "story":

                var image = gridspot.find('img')[0],
					link = gridspot.find('a')[0],
					intro = gridspot.find('div.text'),
					mypos = '',
					offsetpos = '';

                // pop-up orientation
                if (gridspot.position().top > 200) {
                    introbox.addClass('flip');
                    mypos = 'right bottom';
                    offsetpos = '51 -51';
                }
                else {
                    introbox.removeClass('flip');
                    mypos = 'left top';
                    offsetpos = '-51 51';
                }

                imagezoom.position(
					{ of: gridspot
					, my: 'left top'
					, at: 'left top'
					, collision: 'none'
					});

                imagezoom.data('hidden', false);
                imagezoom.data('gridspot', gridspot);

                imagezoom.attr('href', link.href).css({ backgroundImage: 'url(' + image.src + ')' }).animate(
					{ width: '120px', height: '120px', top: '-=10px', left: '-=10px' }, 'fast', 'linear', function() {

                        introbox.data('gridspot', gridspot);
					    introbox.html('<div class="pointer"></div>' + intro.html());
					    introbox.position(
							{ of: gridspot
							, my: mypos
							, at: 'center'
						    , collision: 'fit'
							, offset: offsetpos
							}
						);
					    introbox.stop().fadeTo('fast', 1, function() {
					        $(this).css({ filter: '' });
					    });
					}
				);
                break;


            case "add":

                addstory.attr('href', function() {
                    var indexpos = gridspot[0].id === 'last' ? 0 : gridspot.index() + 1;
                    return $(this).data('href') + '?idx=' + indexpos;
                });

                addstory.data('hidden', false).position(
					{ of: gridspot
					, my: 'left top'
					, at: 'left top'
					, collision: 'none'
					});
                addstory.stop().removeClass('open').css({ backgroundColor: '', height: '', width: '' }).animate(
					{ top: '-=10px', left: '-=10px', width: '120px', height: '120px', backgroundColor: randcolour() }
					, 'fast'
					, 'linear'
					, function() {
					    addstory.addClass('open');
					}
				);
                break;


            case "reserved":
                //	hidehover();
                break;

        }
    });




});