// ==========================================================================
// Project:   Tabs - mainPage
// Copyright: ©2010 My Company, Inc.
// ==========================================================================
/*globals Tabs */

// This page describes the main user interface for your application.
Tabs.mainPage = SC.Page.design({

  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page
  // load.
  mainPane: SC.MainPane.design({
      childViews: [
	      SC.ContainerView.design({
	        nowShowingBinding: 'Tabs.containerController.nowShowing',
	        layout: { left: 200, top: 20, bottom: 20, right: 20 }
	      }),
		  SC.ToolbarView.design({

			}),

	      SC.ButtonView.design({
	        layout: { left: 20, width: 140, top: 20, height: 24 },
	        title: "Show Split View",
	        action: "showContainer1",
	        target: "Tabs.containerController"
	      }),

	      SC.ButtonView.design({
	        layout: { left: 160, width: 140, top: 20, height: 24 },
	        title: "Show Container2",
	        action: "showContainer2",
	        target: "Tabs.containerController"
	      }),
		SC.ButtonView.design({
	        layout: { left: 300, width: 140, top: 20, height: 24 },
	        title: "Show Container3",
	        action: "showContainer3",
	        target: "Tabs.containerController"
	      })
	]
  }),
  container1:
		SC.View.extend({
			childViews:[

			SC.ImageView.design({
			  // You don't need to have both a 'right' and a 'width', just one or the other
			  layout: { top: 100, left: 840, rotate: 90, height: 150, width: 130 },
			  value: static_url('resources/aly.JPG'),
			localize: NO,
			 mouseDown: function(evt) {
			    // This will hide the current image when clicked
			    this.set('isVisible', NO) ;
			  },
 			useImageCache: NO // this loads the image with out clicking the mouse.
  			}),


			SC.LabelView.design({
	    	value: "Aly Picture!",
	    	layout: { top: 100, left: 840, rotate: 90, right: 8, height: 150, width: 130 },
	    	tagName: 'h1'
	  		}),

			SC.ImageView.design({
			layout: { top: 100, left: 700, rotate: 90, right: 16, height: 150, width: 130 },
    		value: static_url('resources/aly.JPG'),
			localize: NO,
				mouseDown: function(evt) {
				    // This will hide the current image when clicked
				    this.set('isVisible', NO) ;
					var x = Tabs.getPath("Tabs.mainview.largeImage");
				  },
 			useImageCache: NO // this loads the image with out clicking the mouse.

  			}),


			SC.LabelView.design({
	    	value: "Aly Picture!",
	    	layout: { top: 100, left: 700, right: 16, height: 150, width: 130 },
	    	tagName: 'h1'
	  		}),
			SC.ImageView.design({
			layout: { top: 100, left: 540, rotate: 90, right: 16, height: 150, width: 130 },
    		value: static_url('resources/aly.JPG'),
			localize: NO,
 			useImageCache: NO // this loads the image with out clicking the mouse.
  			}),

			SC.LabelView.design({
	    	value: "Aly Picture!",
	    	layout: { top: 100, left: 540, right: 16, height: 150, width: 130 },
	    	tagName: 'h1'
	  		}),
			SC.ImageView.design({
			layout: { top: 100, left: 400, rotate: 90, right: 16, height: 150, width: 130 },
    		value: static_url('resources/aly.JPG'),
			localize: NO,
 			useImageCache: NO // this loads the image with out clicking the mouse.
  			}),

			SC.LabelView.design({
	    	value: "Aly Picture!",
	    	layout: { top: 100, left: 400, right: 16, height: 150, width: 130 },
	    	tagName: 'h1'
	  		})
	]
	}),

  container2:
 			SC.LabelView.design({
    		value: "Container2",
    		layout: { left: 40, centerY: 0, right: 40, height: 40 },
    		tagName: 'h1'
  			}),

  container3:
		 	SC.LabelView.design({
    		value: "Container3",
    		layout: { left: 40, centerY: 0, right: 40, height: 40 },
    		tagName: 'h1'
  			})
});





//Here is the Page File

Tabs.mainView = SC.Page.create({

			//This is a large View
			largeImage:  SC.ImageView.design({
			layout: { top: 100, left: 100, rotate: 90, height: 650, width: 530 },
    		value: static_url('resources/aly.JPG'),
			localize: NO,
			 mouseDown: function(evt) {
			    // This will hide the current image when clicked
			    this.set('isVisible', NO) ;
			  },
 			useImageCache: NO // this loads the image with out clicking the mouse.
  			})


});