var NewsTabSection = new JS.Class({
    include: JS.State,
    
    extend: {
        Story: new JS.Class({
            initialize: function(section, element) {
                this._section = section;
                this._element = Ojay(element);
                var find = this._element.method('descendants');
                this._headline = find('h3').node.innerHTML.stripTags();
                this._image = find('img');
            },
            
            select: function(state) {
                if (state) this._section.getStories().forEach({select: false});
                this.getElement()[state ? 'show' : 'hide']();
                this.getImageContainer()[state ? 'addClass' : 'removeClass']('selected');
            },
            
            getElement: function() {
                return this._element;
            },
            
            getHeadline: function() {
                return this._headline;
            },
            
            getImage: function() {
                if (this._dupImage) return this._dupImage;
                var img = this._image.node, w = Number(img.width), h = Number(img.height);
                var f = 100 / w;
                return this._dupImage = Ojay( Ojay.HTML.img({src: img.src, width: f*w, height: f*h, title: img.title}) );
            },
            
            getImageContainer: function() {
                return this._imageContainer || null;
            },
            
            extend: {
                STORY_SELECTOR: '.picture-story',
                
                extract: function(element, section) {
                    return Ojay(element).descendants(this.STORY_SELECTOR).map(function(element) {
                        return new this(section, element);
                    }, this);
                }
            }
        }),
        
        Controller: new JS.Class({
            initialize: function(section) {
                this._section = section;
                section.getStories().forEach(function(story, i) {
                    story.getImage().on('click')._(section).setStory(i+1);
                }, this);
                this._elements = {};
            },
            
            getHTML: function() {
                if (this._elements._container) return this._elements._container;
                var container = this._elements._container = Ojay( Ojay.HTML.div() );
                this._section.getStories().forEach(function(story) {
                    var element = story._imageContainer = Ojay( Ojay.HTML.div({className: 'img'}) );
                    var clipper = Ojay( Ojay.HTML.div() );
                    clipper.insert(story.getImage().node);
                    element.insert(clipper.node);
                    container.insert(element.node);
                });
                container.addClass('news-photos');
                return this._elements._container = container;
            }
        })
    },
    
    initialize: function(container) {
        this._selector = container;
        this.setState('CREATED');
    },
    
    getInitialState: function() {
        return {story: 1};
    },
    
    changeState: function(state) {
        if (state.story !== undefined) this._handleSetStory(state.story);
    },
    
    getStories: function() {
        return this._stories || null;
    },
    
    getController: function() {
        return this._controller || null;
    },
    
    states: {
        CREATED: {
            setup: function() {
		        this._container = Ojay(this._selector);
		        if (!this._container.node) return this;
		        this._stories = this.klass.Story.extract(this._container, this);
		        this._controller = new this.klass.Controller(this);
		        this._container.insert(this._controller.getHTML().node, 'top');
		        this.setState('READY');
		        var state = this.getInitialState();
		        this._handleSetStory(state.story);
		        return this;
		    }
        },
        READY: {
            setStory: function(n) {
                n = Number(n);
                if (n == this._currentStory || n < 1 || n > this._stories.length) return;
                this.changeState({story: n});
                return this;
            },
            
            _handleSetStory: function(n) {
                this._stories[n-1].select(true);
            }
        },
        SWITCHING: {}
    }
});