window.intelesense_data.add_view((function( $, intelesense_data )
{
    function images(options)
    {
        this.model = options.model;
        this.column = options.column;
        this.plot = null;
        this.element = null;
    };

    images.prototype.show = function()
    {
        this.element = $('#'+this.column.field_id);
        if(!this.element.length)
        {
            this.element = $([
                '<div id="'+this.column.field_id+'" class="isd-display isd-images ui-widget-content ui-widget ui-corner-all ui-tabs">',
                    '<div class="isd-title ui-widget-header ui-corner-all ui-tabs-nav">',
                        '<p style="float:right;padding-right:10px;font-weight:bold">'+this.column.name+'</p>',
                        '<p class="isd-image-dates"></p>',
                    '</div>',
                    '<div id="'+this.column.field_id+'-display" class="ui-tabs-panel">',
                        '<div class="isd-images-main" style="overflow:hidden;text-align:center;height:240px">',
                        '</div>',
                        '<div class="isd-images-nav ui-widget-content" style="white-space:nowrap;overflow:scroll;width:100%">',

                        '</div>',
                    '</div>',
                '</div>'
            ].join(''));
            $('#isd-container').append(this.element);
        }
    };
    images.prototype.draw = function()
    {
        var self = this;

        //set up other variables
        var main = self.element.find('.isd-images-main'),
            nav = self.element.find('.isd-images-nav'),
            unloaded = [],
            data = self.model.get_data(self.column),
            i,el1,el2;

        function set_selected_date(event,t,tz)
        {
            self.element.find('.isd-image-dates').html(
                self.model.format_date(new Date(t),'%y/%m/%d %H:%M',self.column,tz)
            );
        }

        for(i in data)
        {
            el1 = $('<img original="'+data[i][1]+'" ' +
                'src="http://www.intelesense.net/resources/img/spacer.gif" ' +
                'style="border:none;height:80px;width:106px;padding:10px" ' +
                'class="unloaded">')
                .click(function()
                {
                    var el2 = $(this);
                    var record = el2.data('record');

                    //scroll selected image to center
                    el2.parent().scrollLeft(
                        el2.parent().scrollLeft()+el2.position().left-(el2.parent().width()/2)+60
                    );

                    //add image
                    main.html(
                        '<a href="'+record[1]+'">' +
                        '<img src="'+record[1]+'" style="border:none;margin-bottom:1em;max-height:100%;">' +
                        '</a>'
                    );
                    
                    //highlighting
                    nav.find('img').removeClass('ui-state-highlight');
                    $(this).addClass('ui-state-highlight');

                    //set date
                    set_selected_date(null,record[0],$('#isd-options-timezone').val());
                })
                .data('record',data[i])
                .appendTo(nav);
                unloaded.push(el1);
        }

        //add scrolling events
        nav.scroll(function()
        {
            for(i in unloaded)
            {
                if(!unloaded[i]) continue;
                var pos = unloaded[i].position().left;
                if(pos > -200 && pos < 1000)
                {
                    unloaded[i].attr('src',unloaded[i].attr('original'));
                    unloaded[i] = false;
                }
            }
        })
        
        //scroll to most recent image. el1 here will still be set to the last
        //thumbnail so we can use it.
        if(i==data.length-1)
        {
            el1.click();
        }

        //listen for timezone changes
        $(document).bind("eventOptionsTimezoneChanged",function(event, tz)
        {
            //get selected
            var r = nav.find('.ui-state-highlight').data('record');

            //update
            set_selected_date(event,r[0],tz);
        });
    }

    images.prototype.hide = function()
    {
        this.element.hide();
    };

    return( images );

})( jQuery, window.intelesense_data ));