var controller;
var Articles;
var options = {
   rotator: {
      rotatorImages: [
	 //'rotator-01.png',
	 'assets/whtacctg/img/rotator-02.png',
	 'assets/whtacctg/img/rotator-03.png',
	 'assets/whtacctg/img/rotator-04.png'
      ],
      rotatorStyle: 'fromRight',
      parentId: '#rotator',
      period: 10000,
      duration: 750,
   },
   moDi: {
      backgroundOpacity: 0.8,
      panelStyles: {
	 width: 600,
	 height: 500,
	 backgroundColor: '#000000',
      },
      backStyles: {
	 backgroundColor: '#ffffff',
      },
      closeImage: "url('assets/whtacctg/img/close.png')"
   },
   emailForm: {
      requestUrl: '/46',
      debug: 1
   }
};


window.addEvent('domready', function(){
   controller = new Controller(options);
});

var Controller = new Class({
   Implements: [Events, Options],
   options: {},
   initialize: function(options) {
      this.setOptions(options);
      //accordion
      new Fx.Accordion($('gamma'), '#gamma div', '#gamma ul', {
         display: -1,
         alwaysHide: true
      });
      //modal dialogue
      this.moDi = new MoDi(this.options.moDi);
      //contact form
      this.emailForm = new EmailForm(this.options.emailForm);
      //mailing list form
      this.listForm = new ListForm();
      //leftScroll
      this.leftScroll = new LeftScroll();
      //rotator
      this.rotator = new Rotator(this.options.rotator);
      if (typeOf(Articles) == 'class') this.articles = new Articles(this);
   },
});
//--------------------rotator--------------------
var Rotator = new Class({
   Implements: [Events, Options],
   options: {
      rotatorImages: [],
      parentId: '#rotator',
      period: 7000,
      duration: 500,
   },
   initialize: function(options) {
      this.setOptions(options);
      this.src = this.options.rotatorImages;
      this.element = $$(this.options.parentId);
	  if (this.element.length == 0) return;
      this.img = $$(this.options.parentId + ' img');
      this.size = this.element.getSize(); //this returns an array ?!
      this.size = this.size[0]; //so this will return the size object.
      this.rotate.delay(this.options.period, this);
      
      //not sure how this works... supposed to 'return' an array of images,
      //I think the elements will be created immediately, and the onProgress fires
      //as the images are loaded?
      
      //not sure whats going on, somehow this fires too early, so the .log after this.img = $$
      //returns an array including the following. seems to be working for now... but its a problem
      this.img.append(new Asset.images(this.src, {
         properties: { styles: this.initialStyle() },
         onProgress: function(counter, index) {
            this.loaded[index + 1] = true;
            //this.img[index].setStyle('left', this.size.x);
         }.bind(this),
         onComplete: function() {
            this.loaded[this.img.length - 1] = true;
         }.bind(this),
         //onComplete: this.assetCallback.bind(this),
      }));
   },
   initialStyle: function() {
      switch (this.options.rotatorStyle) {
         case 'fromRight':
            return {'left': this.size.x}; 
            break;
         case 'fromLeft':
            return {'left': (this.size.x * -1)};
            break;
      }
   },
   position: function(which) {
     var index = this.index % this.img.length;
     if (which == 'old') {
         if (index == 0) return this.img.length - 1;
         else return index - 1;
     }
      else return index;
   },
   rotate: function() {
      this.index += 1;
      if (this.loaded[this.position()] !== true) {
         this.index -= 1;
         this.rotate.delay(1000, this);
      } else {
         this.element.grab(this.img[this.position()]);
         var tweenOut = new Fx.Tween(this.img[this.position('old')], {
            property: 'left',
            duration: this.options.duration,
     
            onComplete: function() {
               this.img[this.position('old')].dispose();
               this.img[this.position('old')].setStyles({
                  'left': this.size.x,
               });
            }.bind(this),
         });
         var tweenIn = new Fx.Tween(this.img[this.position()], {
            property: 'left',
            duration: this.options.duration,
         });
         tweenOut.start(this.size.x * -1);
         tweenIn.start(0);
         //this is better than a periodical timer.. you dont have to pause the periodical
         //if the images aren't loaded yet.
         this.rotate.delay(this.options.period, this);
      }
   },
   loaded: [ true ], //first img is loaded from html
   index: 0
});
var LeftScroll = new Class({
   Implements: [Events, Options],
   options: {},
   initialize: function(options) {
      this.setOptions(options);
      this.element = $('leftScroll');
      this.element.setStyle('height', 0);
      this.tween = new Fx.Tween(this.element, {
         duration: 2000,
         property: 'height',
      });
      this.tween.start(0,535);
   },
   element: null,
   tween: null,
});
var EmailForm = new Class({
   Implements: [Events, Options],
   Extends: AjaxMailStuff,
   options: {},
   initialize: function(options) {
      this.parent(options);
      this.setOptions(options);
      this.element = $('moDiEmailLaunch');
      if (this.element !== null) {
         this.element.addEvent('click', function(event) {
            event.preventDefault();
            this.show();
         }.bind(this));
      }
   },
   show: function() {
      //var moDiEmailForm = Mooml.render('moDiEmailForm');
      controller.moDi.setContent(render([
		'div.moDiForm#moDiEmailForm',
			[
				'label[for=cfName][text=Your Name:]',
				'input#cfName[name=name][type=text]',
				'label[for=cfEmail][text=Your Email Address:]',
				'input#cfEmail[name=email][type=text]',
				'label[for=cfPhone][text=Your Phone Number (optional):]',
				'input#cfPhone[name=phone][type=text]',
				'label[for=cfSubject][text=Subject:]',
				'input#cfSubject[name=subject][type=text]',   
				'textarea#cfMessage[name=message]',
				'div.button[text=Send this Email]',
					{ events: { click: this.post.bind(this) } }
			]
		]));
      controller.moDi.show();
   },
   post: function() {
      var data = {
         'name': $('cfName').value,
         'email': $('cfEmail').value,
         'phone': $('cfPhone').value,
         'subject': $('cfSubject').value,
         'message': $('cfMessage').value,
         'op': 'set',
         'option': 'contact',
      };

      //console.log(data);
      this.request.post(data);
      controller.moDi.spin();
   },
   callback: function(text) {
      controller.moDi.setContent(render(this.textResponse(text)));
      controller.moDi.unspin();
   },
   textResponse: function(text) { return [
	 'div.moDiForm', { styles: { paddingTop: 100 } },
	 [
		 'p[text=' + text + ']',
		 'p[text=You may close this panel.]'
	 ]
      ];
   },
   element: null,
});
var ListForm = new Class({
   Implements: [Events, Options],
   Extends: AjaxMailStuff,
   options: {},
   initialize: function(options) {
      this.parent(options);
      this.setOptions(options);
      this.element = $('moDiListLaunch')
      if (this.element !== null) {
         this.element.addEvent('click', function(event) {
            event.preventDefault();
            this.show();
         }.bind(this));
      }
   },
   show: function() {
    controller.moDi.setContent(render([
		'div.moDiForm#moDiListForm', { styles: { paddingTop: 100 } },
		[
			'p[text=Join our mailing list to receive our quarterly newsletter.]',
			'p[text=Your email address will never be disclosed to any third party.]',
			'label[text=Your First Name:][for=lfFirstName]',
			'input#lfFirstName[name=firstName][type=text]',
			'label[text=Your Last Name:][for=lfLastName]',
			'input#lfLastName[name=lastName][type=text]',
			'label[text=Your Email Address:][for=lfEmail]',
			'input#lfEmail[name=email][type=text]',
			'div.button#moDiListPost[text=Join Mailing List]',
				{ events: { click: this.post.bind(this) } }
		]
	]));
      controller.moDi.show();
   },
   post: function() {
      /*
       *   var data = {
       *      'name': $('cfName').value(),
       *      'email': $('cfEmail').value(),
       *      'phone': $('cfPhone').value(),
       *      'subject': $('cfSubject').value(),
       *      'message': $('cfMessage').value()
       };
       */
      var data = {
         'firstname': $('lfFirstName').value,
         'lastname': $('lfLastName').value,
         'email': $('lfEmail').value,
         'op': 'set',
         'option': 'subscribe',
      };
      //console.log(data);
      this.request.post(data);
      controller.moDi.spin();
   },
   callback: function(text) {
      controller.moDi.setContent(render(this.textResponse(text)));
      controller.moDi.unspin();
   },
   textResponse: function(text) { return [
	 'div.moDiForm', { styles: { paddingTop: 100 } },
	 [
	    'p[text=' + text + ']',
	    'p[text=You may close this panel.]'
	 ]
      ];
   }
});