// ==========================================================================
// Project:   Showcase
// Copyright: ©2012 7x7 Software, Inc.
// License:   Licensed under MIT license
// ==========================================================================
/*globals Showcase */
sc_require('system/views_item_content.js');
sc_require('views/views_list_view.js');


/**
  This pre-configured view demonstrates SC.SegmentedView.
*/
Showcase.segmentedViews = SC.ScrollView.design({
  contentView: Showcase.ViewsListView.design({
    content: [
      Showcase.ViewsItemContent.create({
        title: 'Regular',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  layout: { width: 300, height: 24, centerX: 0, centerY: -17 },  items: ['First', 'Second', 'Third'],  value: ['Third']  }),  objects: SC.SegmentedView.extend({  itemIconKey: 'icon',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 300, height: 24, centerX: 0, centerY: 17 },  items: [{  title: 'Apple',  icon: sc_static('images/fruit.png')  }, {  title: 'Orange',  icon: sc_static('images/fruit-orange.png')  }, {  title: 'Grape',  icon: sc_static('images/fruit-grape.png')  }]  })  })",
        supportAction: function() {
          this.setPath('parentView.exampleBox.contentView.objects.value', null);
        },
        supportTitle: 'Reset Value'
      }),
      Showcase.ViewsItemContent.create({
        title: 'Small',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 300, height: 18, centerX: 0, centerY: -14 },  items: ['Itsy', 'Bitsy', 'Spider'],  value: ['Spider']  }),  objects: SC.SegmentedView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  itemIconKey: 'icon',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 300, height: 18, centerX: 0, centerY: 14 },  items: [{  title: 'Exceeds',  icon: sc_static('images/green-dot.png')  }, {  title: 'Meets',  icon: sc_static('images/grey-dot.png')  }, {  title: 'Below',  icon: sc_static('images/red-dot.png')  }]  })  })",
        supportAction: function() {
          this.setPath('parentView.exampleBox.contentView.objects.value', null);
        },
        supportTitle: 'Reset Value'
      }),
      Showcase.ViewsItemContent.create({
        title: 'Large',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  controlSize: SC.LARGE_CONTROL_SIZE,  layout: { width: 300, height: 30, centerX: 0, centerY: -20 },  items: ['Français', 'Español', 'Deutsch'],  value: ['Deutsch']  }),  objects: SC.SegmentedView.extend({  controlSize: SC.LARGE_CONTROL_SIZE,  itemIconKey: 'icon',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 300, height: 30, centerX: 0, centerY: 20 },  items: [{  title: 'Apple',  icon: sc_static('images/fruit.png')  }, {  title: 'Orange',  icon: sc_static('images/fruit-orange.png')  }, {  title: 'Grape',  icon: sc_static('images/fruit-grape.png')  }]  })  })",
        supportAction: function() {
          this.setPath('parentView.exampleBox.contentView.objects.value', null);
        },
        supportTitle: 'Reset Value'
      }),
      Showcase.ViewsItemContent.create({
        title: 'Jumbo',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  layout: { width: 300, height: 44, centerX: 0, centerY: -27 },  items: ['Strength', 'Agility', 'Healing'],  value: ['Healing']  }),  objects: SC.SegmentedView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  itemIconKey: 'icon',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 360, height: 44, centerX: 0, centerY: 27 },  items: [{  title: 'Chat',  icon: sc_static('images/balloon.png')  }, {  title: 'FaceBook',  icon: sc_static('images/balloon-facebook.png')  }, {  title: 'Twitter',  icon: sc_static('images/balloon-twitter.png')  }]  })  })",
        supportAction: function() {
          this.setPath('parentView.exampleBox.contentView.objects.value', null);
        },
        supportTitle: 'Reset Value'
      }),
      Showcase.ViewsItemContent.create({
        title: 'Vertical',
        example: "SC.View.extend({  childViews: ['regular', 'large'],  regular: SC.SegmentedView.extend({  layout: { width: 120, height: 72, centerX: -70, centerY: 0 },  layoutDirection: SC.LAYOUT_VERTICAL,  items: ['Top', 'Middle', 'Bottom'],  value: ['Top']  }),  large: SC.SegmentedView.extend({  layout: { width: 120, height: 60, centerX: 70, centerY: 0 },  controlSize: SC.LARGE_CONTROL_SIZE,  itemTitleKey: 'title',  itemValueKey: 'title',  itemActionKey: 'action',  layoutDirection: SC.LAYOUT_VERTICAL,  items: [{  title: 'Up', action: 'goUp'  }, {  title: 'Down', action: 'goDown'  }]  })  })"
      }),
      Showcase.ViewsItemContent.create({
        title: 'Disabled',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  isEnabled: false,  layout: { width: 300, height: 24, centerX: 0, centerY: -17 },  items: ['Red', 'White', 'Black'],  value: ['Red']  }),  objects: SC.SegmentedView.extend({  itemIsEnabledKey: 'isEnabled',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 300, height: 24, centerX: 0, centerY: 17 },  items: [{  title: 'Badger',  isEnabled: true }, {  title: 'Ferret',  isEnabled: false  }, {  title: 'Weasle'  }, {  title: 'Wolverine', isEnabled: false  }]  })  })"
      }),
      Showcase.ViewsItemContent.create({
        title: 'Allows Empty Selection',
        example: "SC.SegmentedView.extend({  allowsEmptySelection: true,  layout: { width: 300, height: 24, centerX: 0, centerY: 0 },  items: ['Canada', 'United States', 'Mexico'],  value: ['Canada']  })"
      }),
      Showcase.ViewsItemContent.create({
        title: 'Allows Multiple Selection',
        example: "SC.SegmentedView.extend({  allowsMultipleSelection: true,  layout: { width: 500, height: 24, centerX: 0, centerY: 0 },  itemWidthKey: 'width',  itemTitleKey: 'title',  itemValueKey: 'title', items: [{  title: 'Celtics',  width: 100 }, {  title: 'Raptors',  width: 100  }, {  title: 'Knicks',  width: 100  }, {  title: 'Nets',  width: 100  }, {  title: '76ers',  width: 100  }],  value: ['76ers', 'Raptors']  })"
      }),
      Showcase.ViewsItemContent.create({
        title: 'Automatic Overflow Menu',
        example: "SC.View.extend({  childViews: ['regular', 'objects'],  regular: SC.SegmentedView.extend({  allowsEmptySelection: true,  layout: { width: 300, height: 24, centerX: 0, centerY: -17 },  items: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Uranus', 'Neptune'],  value: ['Venus']  }),  objects: SC.SegmentedView.extend({  allowsMultipleSelection: true,  itemWidthKey: 'width',  itemTitleKey: 'title',  itemValueKey: 'title',  layout: { width: 400, height: 24, centerX: 0, centerY: 17 },  items: [{  title: 'Porifera',  width: 100 }, {  title: 'Radiata',  width: 100 }, {  title: 'Bilateria',  width: 100 }, {  title: 'Deuterostomes',  width: 100 }, {  title: 'Ecdysozoa',  width: 100  }, {  title: 'Platyzoa', width: 100  }, {  title: 'Lophotrochozoa', width: 100  }]  })  })",
        supportAction: function() {
          var view1, view2;

          view1 = this.getPath('parentView.exampleBox.contentView.regular');
          view2 = this.getPath('parentView.exampleBox.contentView.objects');
          if (view1.get('layout').width === 300) {
            view1.adjust({width: 150});
            view2.adjust({width: 200});
          } else {
            view1.adjust({width: 300});
            view2.adjust({width: 400});
          }

          SC.RunLoop.begin().end();

          view1.remeasure();
          view2.remeasure();
        },
        supportTitle: 'Toggle Width'
      })
    ],
    exampleHeight: 200
  })
});