function home_next_button_clicked(e){
    var bg_id = parseInt($('.bgActive').attr('id').replace('bg_', ''))
    var next = bg_id + 1
    if(next > $('.bg').length - 1){
        next = 0;
    }
    change_bg_to_this(next)
    return false
}

function home_prev_button_clicked(e){
    var bg_id = parseInt($('.bgActive').attr('id').replace('bg_', ''))
    var prev = bg_id - 1
    if(prev < 0){
        prev = $('.bg').length - 1;
    }
    change_bg_to_this(prev)
    return false
}

function change_bg_to_this(bg_id){
    $('.bg:visible').fadeOut(800).removeClass('bgActive')
    $('#bg_'+bg_id).fadeIn(800, function(){ $(this).css('filter', '')}).addClass('bgActive')
    $('#bg_'+bg_id).css('filter', 'alpha(opacity=100)');
    $('.featured:visible').fadeOut(800);
    $($('.featured')[bg_id]).fadeIn(800);
}
function prepareDOM(){
    var bg_wrapper = $('<div id="bg_wrapper"></div>');
    var bg_nav_handles = $('<div id="bg_nav_handles"></div>')
    bg_wrapper.append(bg_nav_handles)
    bg_nav_handles.hide();
    var prev_button = $('<a href="#" id="prev_bg">Prev</a>')
    prev_button.bind('click', home_prev_button_clicked)
    var next_button = $('<a href="#" id="next_bg">Next</a>')
    next_button.bind('click', home_next_button_clicked)
    bg_wrapper.find("#bg_nav_handles").append(prev_button)
    bg_wrapper.find("#bg_nav_handles").append(next_button)
    $('body').prepend(bg_wrapper)
    bg_wrapper.prepend('<div id="body_vignette" > </div>');
    $('#body_vignette').css({ 'top': ($(window).height() -600) })
}

function loadPhotos(featured){
    var i = 0;
    featured.each(function(){
        var div = $('<div id="bg_'+i+'" class="bg not_loaded"></div>');
        if(i==0) div.addClass('bgActive')
        $("#bg_wrapper").append(div);
        var args = {
            count: i,
            url: '/ajax/grab_img/',
            data: {pk: $(this).attr('id').replace('content-', '')},
            type: "GET",
            dataType: "json",
            success: function(data){
                var imgs = data.photos;
                var url = '/site_media/' + imgs[0].url
                var bg_img_obj = new Image()
                var num = this.count;
                var pk = this.data;
                bg_img_obj.src = url;
                bg_img_obj.onload = function(){
                    if(bg_img_obj.width < 960){
                        $("#bg_wrapper #bg_"+num).css({
                                'background-size': '950px',
                                '-moz-background-size': '950px',
                                'background-position': '50% 58px'
                        })                    
                    }
                    
                    $("#bg_wrapper #bg_"+num).hide();    
                    $("#bg_wrapper #bg_"+num).removeClass('not_loaded').css({
                        'background-image': 'url(' + bg_img_obj.src+ ')',
                        'height': ($(window).height()) + "px"
                    });
                    if(num==0){
                        $("#bg_"+num).delay(3000).fadeIn(1500);
                        $("#bg_nav_handles").delay(3000).fadeIn(1500);
                    }
                    if(pk + ''== "pk = 3"){
                        $("#bg_"+num).addClass('crown').hide();
                    }
                }
            }
        }
        $.ajax(args);
        i ++;
    }); 
}

function featured_cycles(){
    $(".featured:not(:first-child)").hide();
    /*prepareDOM();
    // Event-Based Stuff
    $(document.documentElement).keyup(function (event) {
        if (event.keyCode == 37){	                // Previous 
            home_prev_button_clicked();
        }
        if (event.keyCode == 39 ){
            home_next_button_clicked();
        }
    })
    loadPhotos($('.featured'));*/
}


function window_resize(){
    var win_height = $(window).height()
    $('.bg').css({ 'height'  : win_height })
    $('#body_vignette').css({ 'top': (win_height-600) })
}


$(document).ready(function() {
    
    $(window).resize(window_resize)        

    if($('#body_home').length == 1){
        return featured_cycles()
    }


    if($('section.page[id^=content]').length > 0){
        var photos
        var current_project  = $('section.page').attr('id').replace('content-', '')
        var is_legacy = $('#body_legacy').length == 1
        var is_event = $("#body_events").length == 1
        var is_happenings = $("#body_happenings").length == 1
        var grab_img_success = function(res){
            photos  = res.photos
            var clicked = window.location.href.match(/#\d+/)
            var start_photo = 1
            if(clicked){
                start_photo = parseInt(clicked.toString().replace(/#/, ''))
            }
            do_stuff(start_photo)
        }
        var grab_image = function(){
            var args = {
                url: '/ajax/grab_img/',
                data: {pk: current_project},
                type: "GET",
                dataType: "json",
                success: grab_img_success
            }
            $.ajax(args)
        }
        grab_image()
    }

// if photos are properly set…
    var do_stuff = function(start_photo){
    
    // make start_photo 0 based
    start_photo --
    if(typeof(photos) != "undefined" || is_event ){
        var projects = $('ul#timeline>li>a')
        var current_index = projects.index($('a#timeline-'+current_project))
        $('a#timeline-'+current_project).addClass('current_project').append("<span id='current_marker'></span>")
        var prev_project = $('a#timeline-'+current_project).prev("[id^=timeline]")
        var next_project = $('a#timeline-'+current_project).next("[id^=timeline]")
        prev_project = $(projects[current_index - 1])
        next_project = $(projects[current_index + 1]) 
        if(!prev_project.length){
            prev_project = $(projects[projects.length-1])
        }
        // if it reaches the last
        if(!next_project.length){
                next_project = $(projects[0])
        }
        
        var make_dom = function(){
            var bg_wrapper = $('<div id="bg_wrapper"></div>')
            
            if(next_project.length){
                if(is_legacy){
                    var bg_nav_handles = $('<div id="bg_nav_handles" class="is_legacy"></div>')
                    bg_wrapper.append(bg_nav_handles)
                    var next_button = $('<a href="#" id="next_bg"><span class="block"></span>Next</a>')
                    next_button.bind('click', function(){
                        window.location = $('.view_all a').attr('href')          //projects[0]
                    })
                    bg_wrapper.find("#bg_nav_handles").append(next_button)
                }else{
                // if its not legacy page
                    var bg_nav_handles = $('<div id="bg_nav_handles"></div>')
                    bg_wrapper.append(bg_nav_handles)
                    
                    var prev_button = $('<a href="#" id="prev_bg">Prev</a>')
                    prev_button.bind('click', prev_button_clicked)
                    
                    var next_button = $('<a href="#" id="next_bg">Next</a>')
                    next_button.bind('click', next_button_clicked)
                    bg_wrapper.find("#bg_nav_handles").append(prev_button)
                    bg_wrapper.find("#bg_nav_handles").append(next_button)
                }
            }
            if(!is_event){
                for(i in photos){
                    if(photos.length>1){
                        var display_num = parseInt(i) + 1
                        var bg_number_button = $('<a href="#" id="bg_nav_'+i+'" class="bgNav">'+display_num + '</a>')
                        if(i == start_photo) bg_number_button.addClass('bgNavActive')
                        $('#bgNavNumbers').append(bg_number_button)
                        bg_number_button.bind('click', bg_number_clicked)
                    }

                    var bg = $('<div id="bg_'+i+'"class="bg not_loaded"> </div>')
                    if(i != start_photo) bg.hide()
                    else bg.addClass('bgActive').css({"display":"block", "z-index":"-1"})
                    bg_wrapper.append(bg)

                    var li = $('<li id="bg_attr_'+i+'" class="cc '+photos[i].license+'"><a href="'+photos[i].credit_link+'">'+photos[i].credit + '</a></li>')
                      console.log(is_happenings);
                    if( !is_happenings ){
                      $('#attribute').prepend(li);                   
                    }
                    if(i != start_photo){
                        li.hide()
                    }else{
                        var license = photos[i].license
                        $("#license").addClass(license)
                        if(license != "null" || license != "reserved"){
                            $('#license').attr('href', 'http://creativecommons.org/licenses/'+license+'/3.0/')
                        }else{
                            $('#license').attr('href', "#")
                        }
                    }
                }
                bg_wrapper.prepend('<div id="body_vignette" > </div>');
                $('#body_vignette').css({ 'top': ($(window).height() -600) })
            }
            $('body').prepend(bg_wrapper)
        }
        
        
        var count = 0
        var order = []
        for(var h =0; h < photos.length; h++){
            order.push(h)    
        }
        if(start_photo > 0){
            for (var j =0; j<start_photo; j++){
                photos.push(photos.shift())
                order.push(order.shift())
            }
        }
        var load_image_separately = function(){
            if (count < photos.length){
                if(window.innerWidth && window.innerWidth <= 480){
                    var url = '/site_media/' + photos[count].url
                    url = url.replace(/\.jpg/, '-thumb.jpg')
            
                }else{
                    var url = '/site_media/' + photos[count].url
                }
                var bg_img_obj = new Image()
                bg_img_obj.src = url
                bg_img_obj.onload = function(){
                    if(bg_img_obj.width < 960){
                        $("#bg_wrapper #bg_"+order[count]).css({
                                'background-size': '950px',
                                '-moz-background-size': '950px',
                                'background-position': '50% 58px'
                        })                    
                    }
                    $("#bg_wrapper #bg_"+order[count]).css({'opacity': 0})          
                    $("#bg_wrapper #bg_"+ order[count]).removeClass('not_loaded').css({
                        'background-image': 'url(' + bg_img_obj.src+ ')',
                        'height': ($(window).height()) + "px"
                    }).animate({'opacity':1}, 1500)
                    if(count == 0){
                        $('#instruction').fadeOut(1000)
                    }
                    count++
                    load_image_separately()
                }
            }
        }

        var change_bg_to = function(id){
            $('.bg:visible').fadeOut(800).removeClass('bgActive')
            $('#bgNavNumbers a').removeClass('bgNavActive')
            $('#attribute li').hide().removeClass('attrib-active')
            $('#bg_'+id).css('filter', 'alpha(opacity=100)');
            $('#bg_'+id).fadeIn(800, function(){ $(this).css('filter', '')}).addClass('bgActive')
            $('#bg_nav_'+id).addClass('bgNavActive')
            var license = $("#bg_attr_"+id).attr('class').replace('cc ', '')
            $('#bg_attr_' + id).fadeIn(500, function(){ $(this).css('filter', '')}).addClass('attrib-active');
            $('#license').attr('class', '').addClass(license)
            if(license != "null" || license != "reserved"){
                $('#license').attr('href', 'http://creativecommons.org/licenses/'+license+'/3.0/')
            }else{
                $('#license').attr('href', "#")
            }
            if(window.location.href.match(/#\d+/)){
                window.location.href = window.location.href.replace(/#\d+/, '#'+(id+1)) 
                
            }else{
                window.location.href = window.location.href + '#'+(id+1)
            }
        }


        var bg_number_clicked = function(e){
            var bg_id = parseInt($(e.target).attr('id').replace('bg_nav_', ''))
            change_bg_to(bg_id)
            return false
        }
        

        var prev_button_clicked = function(){
            if(is_event){
                window.location = prev_project.attr('href')
                $('#bg_wrapper, #content, .bg').animate({
                    'margin-left' : '500px',
                    'opacity' : '0'
                }, {duration: 200,     
                   specialEasing: "easeOutQuart"})
            }else{
                var bg_id = parseInt($('.bgActive').attr('id').replace('bg_', ''))
                if(bg_id == 0){
                    $('#bg_wrapper, #content, .bg').animate({
                        'margin-left' : '500px',
                        'opacity' : '0'
                    }, {duration: 500,     
                       specialEasing: "easeInQuart"})
                    window.location = prev_project.attr('href')
                    }else{
                    var prev = bg_id - 1
                    change_bg_to(prev)
                }
                return false
            }
        }

        var next_button_clicked = function(){
            if(is_event){
                window.location = next_project.attr('href')
                $('#bg_wrapper, #content, .bg').animate({
                    'margin-left' : '-500px',
                    'opacity' : '0'
                }, {duration: 200,     
                   specialEasing: "easeOutQuart"})
            }else{
            
                var bg_id = parseInt($('.bgActive').attr('id').replace('bg_', ''))
                if(bg_id == photos.length - 1 || $(".bgActive").length == 0){
                    $('#bg_wrapper, #content, .bg').animate({
                        'margin-left' : '-500px',
                        'opacity' : '0'
                    }, {duration: 500,     
                       specialEasing: "easeInQuart"})
                    window.location = next_project.attr('href')
                }else{
                    var next = bg_id + 1
                    change_bg_to(next)
                }
                return false
            }
        }



        var build_instruction = function(){
            var wrapper = $('<div id="instruction"></div>')
            wrapper.hide()
            var key_dict = {
                                up:'↑' ,
                                down: '↓',
                                right: '→',
                                left: '←',
                                esc: 'Esc'
                            } 
            $.each(key_dict, function(i, n){
                var div = $('<span id="'+i+'">'+n+'</span>')
                if(i=="left"){
                    div.attr('title', 'Next Image')
                }else if(i=="right"){
                    div.attr('title', 'Previous Image')
                }
                wrapper.append(div)
            })
            $('#bg_wrapper').append(wrapper)
            wrapper.fadeIn('slow')
        }
        make_dom()
        //build_instruction()
        if(!is_event){
            load_image_separately()
        }
        
        


        // Event-Based Stuff
        $(document.documentElement).keyup(function (event) {
            if (event.keyCode == 37){	                // Previous 
                // basically same :D
                if(!is_legacy) prev_button_clicked()
            }
            if (event.keyCode == 39 ){
                if(!is_legacy) next_button_clicked()
                else  window.location = $(projects[0]).attr('href')
            }
        })
}}
})


//Previous
      //Allows for left and right keys to browse images.