Ext.namespace('App', 'App.Halu');

var buffer = new Array(), haluActionMenu, opts;


var Halu = {
    
    
    Images: {
        _newImageId :-1,
        _thumbnailImageId : -1,
        _listingImageId : -1,
        _baseImageId : -1,
        _gallery:  new Array(),
        _names: ['image_base', 'image_listing', 'image_thumbnail'],
        uploadCount: 0,
        init: function(halu) {
            if (typeof(halu) != 'undefined') {
                for (var i = 0, n = this._names.length; i < n; i++) {
                    var name = this._names[i];
                    Halu.Images.setData(name, name);
                }
                this._thumbnailImageId = halu.image_thumbnail_id;
                this._listingImageId = halu.image_listing_id;
                this._baseImageId = halu.image_base_id;
                this._gallery = halu.gallery;
            } else  
               this._gallery = [];
            var dragZone = new ImageDragZone(
                imagesView, 
                {
                    containerScroll:true,
                    ddGroup: 'organizerDD'
                }
            );
            Halu.Images.reload();
            var dropZoneList = new Ext.dd.DropTarget('preview_image_thumbnail', {
               containerScroll:true,
               ddGroup: 'organizerDD',
               notifyDrop: function(dd,e,data) {
                   var d = imagesView.getSelectedRecords()
                   Halu.Images._thumbnailImageId = d[0].id;
                   $('#preview_image_thumbnail img').attr('src', App.baseUrl + '/media/halu' + d[0].data.image);
                   $('#image_thumbnail').val(d[0].data.image);
               }
                   
            });
            var dropZoneMedium = new Ext.dd.DropTarget('preview_image_listing', {
                containerScroll:true,
                ddGroup: 'organizerDD',
                notifyDrop: function(dd,e,data) {
                    var d = imagesView.getSelectedRecords()
                    Halu.Images._listingImageId = d[0].id;
                    $('#preview_image_listing img').attr('src', App.baseUrl + '/media/halu' + d[0].data.image);
                    $('#image_listing').val(d[0].data.image);
               }
            });
            var dropZoneLarge = new Ext.dd.DropTarget('preview_image_base', {
                containerScroll:true,
                ddGroup: 'organizerDD',
                notifyDrop: function(dd,e,data) {
                    var d = imagesView.getSelectedRecords()
                    Halu.Images._baseImageId = d[0].id;
                    $('#preview_image_base img').attr('src', App.baseUrl + '/media/halu' + d[0].data.image);
                    $('#image_base').val(d[0].data.image);
                }
                   
            });
            Halu.Images.setEvent();
            //imagesView.render();
        },
        setEvent:function (){
          //  for (var i = 0, n = this._names.length; i < n; i++) {
          //      var name = this._names[i];
                
                $('#preview_image_base').click(function() {
                    $('.x-view-selected').removeClass("x-view-selected");
                    imagesView.select('wrap-' + Halu.Images._baseImageId , true);
                });
                $('#preview_image_listing').click(function() {
                    $('.x-view-selected').removeClass("x-view-selected");
                    imagesView.select('wrap-' + Halu.Images._listingImageId , true);
                });
                $('#preview_image_thumbnail').click(function() {
                    $('.x-view-selected').removeClass("x-view-selected");
                    imagesView.select('wrap-' + Halu.Images._thumbnailImageId , true);
                });
         //  }
        },
        reload: function() {
            imagesStore.loadData(this._gallery);
        },
        
        getGallery: function () {
            return this._gallery;
        },
        
        unset: function (id){
            $('#preview_' + id + ' img').attr('src', App.baseUrl + '/media/no_picture.gif');
            $('#images-' + id).val('');
        },
        
        setAll: function(id) {
            
            var val = $('#images-' + id).val();
            for (var i = 0, n = this._names.length; i < n; i++) {
                    var name = this._names[i];
                    $('#preview_' + name + ' img').attr('src', App.baseUrl + '/media/halu' + val);
                    $('#images-' + name).val(val);
                }
            
        },
        
        remove: function (){
            var selected = imagesView.getSelectedIndexes();
            var records = imagesView.getSelectedRecords();
            for (var i = 0; i < selected.length; i++) {
                this._gallery.splice(selected[i], 1);
                if (records[i].id == Halu.Images._baseImageId) {
                    $('#preview_image_base img').attr('src', App.baseUrl + '/media/no_picture.gif');
                    $('#images-image_base').val('');
                }
                if (records[i].id == Halu.Images._listingImageId) {
                    $('#preview_image_listing img').attr('src', App.baseUrl + '/media/no_picture.gif');
                    $('#images-image_listing').val('');
                }
                if (records[i].id == Halu.Images._thumbnailImageId) {
                    $('#preview_image_thumbnail img').attr('src', App.baseUrl + '/media/no_picture.gif');
                    $('#images-image_thumbnail').val('');
                }
            }
            Halu.Images.reload();
        },
        
        clear: function() {
           // $('.image_preview').empty();
            $('.image_preview img').attr('src', App.baseUrl + '/media/no_picture.gif')
            this._gallery = {};
            Halu.Images.reload();
        },
        
        add: function() {
            Spinner.show();
            $.ajaxFileUpload({
                url: App.baseUrl + '/addnew/index/save-image/',
                secureuri: false,
                fileElementId: 'image-add',
                dataType: 'json',
                success: function (data, status) {
            	if(data['image-add'] == null){
            		Spinner.hide();
            		alert('เฉพาะไฟล์รูปภาพเท่านั้น: gif, jpg, jpeg, bmp, png')
            		return;
            	}else{
                    Spinner.hide();
                    Halu.Images.addToStore(data['image-add']);
            	}
                },
                error: function (data, status, e) {
                    Spinner.hide();
                    alert(e);
                }
            });
        },
        
        addToStore: function(path)
        {
            Halu.Images._newImageId--;
            Halu.Images._gallery.push({
                "id":Halu.Images._newImageId, 
                "image": path
            });
            Halu.Images.reload();
        },
        
        setData: function(id, path) {
           Halu.Images.setPath(id, path);
           Halu.Images.setPreview(id, path);
        },
        
        setPath: function(id, path) {
            $('#' + id).attr({value: path});
        },
        
        setPreview: function(id, val) {
            $('#preview_' + id ).empty();
            var src = val;
            if (src == '')
                src = App.baseUrl + '/media/no_picture.gif';
            else
                src = '/media/halu' + src;
            $('#preview_' + id).append(
                    '<img src="' + baseUrl +  
                    src + '" height="75" />' +
                    '<input type="hidden" id="images-' + id + '" value="' + 
                     val + '" name="' +
                    id + '"/>'
            );
           
        }
    }
}