var RMHC = window.RMHC || {};

jQuery(document).ready(function(){
    RMHC.people.init();
});

RMHC.people = {
    current_left : 0,
    current_num : 0,
    current_id : '',
    sliders : {},

    init : function() {
        // Create single person box
        jQuery('\
            <div class="people-single people-list" style="display: none;">\
                <a name="people-single"></a>\
                <div class="control person-prev"></div>\
                <div class="people-wrapper"></div>\
                <div class="control person-next"></div>\
            </div>\
        ').appendTo('#content');

        jQuery('div.people-single div.people-wrapper').append(jQuery('ul.people'));
        jQuery('ul.people').show();

        jQuery('div.person-next, div.person-prev').click(function() {
            var person_id = RMHC.people.current_id;
            var ul = jQuery('div.people-single ul.people');
            var li = jQuery(' li.' + person_id, ul);

            if (jQuery(this).hasClass('person-next')) {
                li = li.next('li.person:first');
                if (!li.get(0)) {
                    li = jQuery('li.person:first', ul);
                }
            }
            else {
                li = li.prev('li.person:first');
                if (!li.get(0)) {
                    li = jQuery('li.person:last', ul);
                }
            }

            person_id = RMHC.people.get_id(li);

            RMHC.people.show_person(person_id, function() {
                RMHC.people.highlight_person(person_id);
            });

            RMHC.people.current_id = person_id;
        });

        // Create featured people box
        jQuery('\
            <div class="people-featured-top" style="display: none;"></div>\
            <div id="peoplefeatured" class="people-featured people-picker people-list" style="display: none;">\
                <div class="people-wrapper">\
                    <ul class="people"></ul>\
                </div>\
            </div>\
        ').insertBefore('div.people-single');

        var featured = jQuery('div.people-single li.person.featured');
        var is_featured = '.featured';
        if (featured.length == 0) {
            is_featured = '';
        }
        RMHC.people.copy_list(jQuery('div.people-single li.person' + is_featured), 'div.people-featured ul.people', 'medium');

        if (jQuery('div.people-featured li.person').length >= 5) {
            jQuery('\
                <div class="slider-wrap">\
                    <div class="slider">\
                    </div>\
					<a href="#" class="slider-left"></a>\
					<a href="#" class="slider-right"></a>\
				</div>\
            ').appendTo('div.people-featured');
        }

        var not_featured = jQuery('div.people-single li.person').not('.featured');
        if (not_featured.length > 0 && featured.length > 0) {
            // Create all people listing
            jQuery('\
                <div id="peopleall" class="people-all people-picker people-list" style="display: none;">\
                    <div class="people-wrapper">\
                        <ul class="people"></ul>\
                    </div>\
					<div class="slider-wrap">\
	                    <div class="slider">\
	                    </div>\
						<a href="#" class="slider-left"></a>\
						<a href="#" class="slider-right"></a>\
					</div>\
                </div>\
            ').insertBefore('div.people-single');

            RMHC.people.copy_list(not_featured, 'div.people-all ul.people', 'small');
        }

        // To calculate widths, we need to wait for images to load
        jQuery(window).load(function () {
            jQuery('div.people-featured-top').show();
            jQuery('div.loading').hide();

            jQuery('div.people-list').each(function () {
				var peopleList = this;
                jQuery(this).show();

                var ul = jQuery('ul.people', this);

                var ul_width = 0;
                var wrapper_width = jQuery('div.people-wrapper', this).outerWidth();
                var li_count = 0;

                jQuery('li.person', ul).each(function() {
                    ul_width += jQuery(this).innerWidth();
                    li_count++;
                });

                if (ul_width > 0) {
                    ul.css('width', ul_width + 'px');
                }

                if (jQuery(this).hasClass('people-single')) {
                    var first_featured = jQuery('div.people-featured li.person:first');
                    var person_id = RMHC.people.get_id(first_featured);

                    RMHC.people.select_person(person_id);

                    return;
                }

                var maxScroll = ul_width - wrapper_width;

                var id = jQuery(this).attr('id');
				
				var slider = jQuery('.slider', this).slider({
                    min: 0,
                    max: maxScroll,
                    change: function (ev, ui) {
                        ul.css('left', '-' + ui.value + 'px');
                    },
					slide: function (ev, ui) {
						if( ul.width() > slider.width() ){ ul.css('left', '-' + ui.value + 'px'); }
						else { ul.css('left', 0); }
					}
                });
						
				$('.ui-slider-handle', this)
					.wrap('<div class="slider-handle-wrap"/>')
					.mousedown(function(){
						slider.width($('.slider-handle-wrap', peopleList).width() + 'px');
					})
					.mouseup(function(){
						slider.width('100%');
					});

				$('.slider-left, .slider-right', this).click(function() {
					if (maxScroll == 0) return false;
					
					var currentVal = slider.slider('value');
					var step = maxScroll / 20;
					
					if ($(this).hasClass('slider-left')) {
						slider.slider('value', currentVal - step);
					} else {
						slider.slider('value', currentVal + step);
					}
					
					return false;
				});
				
                RMHC.people.sliders[id] = slider;
				
				// hide slider if it is not needed
				if (ul_width < wrapper_width) { 
					jQuery('.slider', this).hide();
				}

            });

            var hash = document.location.hash.replace('#', '');
            if (hash && hash != 'people-single') {
                RMHC.people.select_person(hash);
                document.location.hash = 'people-single';
            }
        });

        jQuery('div.people-picker li.person').click(function() {
            var person_id = RMHC.people.get_id(jQuery(this));

            RMHC.people.highlight_person(person_id);
            RMHC.people.show_person(person_id);

            document.location.hash = 'people-single';

            RMHC.people.current_id = person_id;
        });
    },

    get_id : function(obj) {
        var css_classes = obj.attr('class');
        css_classes = css_classes.split(' ');
        return css_classes[1];
    },

    get_person_left : function(person_id, selector) {
        if (!selector) {
            selector = jQuery('div.people-single li.person');
        }

        var li_width = selector.eq(0).innerWidth();
        var left = 0;
        selector.each(function(i) {
            if (jQuery(this).hasClass(person_id)) {
                left = -1 * i * li_width;
            }
        });

        return left;
    },

    adjust_slider : function(person_id) {
        var li = jQuery('div.people-picker li.' + person_id);
        var li_width = li.innerWidth();
        var container = li.parents('div.people-list');
        var wrapper = container.find('div.people-wrapper');
        var wrapper_width = wrapper.innerWidth();
        var ul = wrapper.find('ul.people');
        var person_lis = jQuery('li.person', ul);

        var s_id = container.attr('id');
        var s_obj = container.find('.slider');

        if (s_obj.get(0)) {
            var wrapper_start = s_obj.slider('value');
            // For some reason, .slider('value') doesn't work in IE6/7
            if (!wrapper_start && wrapper_start != 0) {
                wrapper_start = s_obj.find('.handle').position().left;
            }

            var wrapper_end = wrapper_start + wrapper_width;
            var new_pos = Math.abs(RMHC.people.get_person_left(person_id, person_lis));

            if (new_pos + li_width >= wrapper_end) {
                s_obj.slider('value', new_pos);
            }
            else if (new_pos < wrapper_start) {
                s_obj.slider('value', new_pos - wrapper_width + li_width);
            }
        }
    },

    highlight_person : function(person_id) {
        RMHC.people.adjust_slider(person_id);
        jQuery('div.people-picker li.person').removeClass('person-current');
        jQuery('div.people-picker li.' + person_id).addClass('person-current');
    },

    show_person : function(person_id, callback) {
        var left = RMHC.people.get_person_left(person_id);
        jQuery('div.people-single ul.people')
            .animate({ 'left' : + left + 'px' }, 300, 'linear', callback);
    },

    select_person : function(person_id) {
        RMHC.people.highlight_person(person_id);
        RMHC.people.show_person(person_id);
        RMHC.people.current_id = person_id;
    },

    copy_list : function(selector, copy_to, img_size) {
        selector.each(function() {
            var title = jQuery(this).find('h3').clone();
            var img = jQuery(this).find('img').get(0);
            if (img) {
				var prop = jQuery(img).attr('ID');
                var img_src = PersonArticles[prop][img_size];
            }

            var li = jQuery('<li class="' + this.className + '"></li>');
            li.append('<img src="' + img_src + '" alt="" />');
            li.append(title);

            jQuery(copy_to).append(li);
        });

    }
}