//--------------------config & kicker--------------------
var appOptions = {
	rotator: {
		rotatorImages: [
			//'rotator-01.png',
			'assets/acbs/img/rotator-02.png',
			'assets/acbs/img/rotator-03.png',
			'assets/acbs/img/rotator-04.png',
			'assets/acbs/img/rotator-05.png',
			'assets/acbs/img/rotator-06.png'
		],
		rotatorStyle: 'fromRight'
	},
	moDi: {
		backgroundOpacity: 0.8,
		panelStyles: {
			width: 960,
			height: 500,
			backgroundColor: '#ffffff'
		},
		backStyles: {
			backgroundColor: '#000000'
		},
		closeImage: "url('assets/acbs/img/close.png')"
	},
	emailForm: {
		requestUrl: '/13',
		debug: 1
	}
};
var app;
window.addEvent('domready', function() {app = new App(appOptions);});
var App = new Class({
   Implements: [Options],
   options: {},
   initialize: function(options) {

      this.setOptions(options);
      this.rotator = new Rotator(this.options.rotator);
      //modal dialogue
      this.moDi = new MoDi(this.options.moDi);
      //contact form
      this.emailForm = new EmailForm(this.options.emailForm);
   }
});
//--------------------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);
	  //console.log(this.element);
	  if (this.element.length == 0) return;
      //console.log(this.img);
      this.img = $$(this.options.parentId + ' img');
      this.loaded[0] = true;
      //console.log(this.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;
            //console.log(this.loaded);
         }.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: {},
   img: [],
   src: [],
   index: 0,
   element: null,
});
//--------------------emailForm--------------------
var EmailForm = new Class({
   Implements: [Events, Options],
   Extends: AjaxMailStuff,
   options: {},
   initialize: function(options) {
      this.parent(options);
      this.setOptions(options);
      //this.element = $('moDiEmailLaunch');
	  this.elements.push($$('.headOut').getFirst('li'));
	  this.elements.push($$('.footOut').getLast('li'));
      this.elements.each(function(element) {
         element.addEvent('click', function(event) {
            event.preventDefault();
            this.show();
         }.bind(this));
      }, this);
   },

	show: function() {
		utils.styleSheet(this.contactStyles);
		//the actual contact form is declared inline here because if it's declared as
		//a property of this class, the scoping fails on the click event. this is just
		//an ugly workaround for a problem I dont understand.
		app.moDi.setContent(render([
			'div.left.pane',
			render(this.contactLeftPane),
			'div.right.pane',
			render([
				'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]',
				'label[for=cfMessage][text=Message:]',
				'textarea#cfMessage[name=message]',
				'div.button#post[text=Send this Email]', {
					events: { click: this.post.bind(this) }
				}
			])
		]));
		app.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',
		};
		if ((!data.email) && (!data.phone)) return;
		if (!data.message) return;
		this.request.post(data);
		this.spinner = new Spinner($$('div.right.pane'));
		this.spinner.show();
	},
	callback: function(text) {
		app.moDi.setContent(render([
			'div.left.pane',
			render(this.contactLeftPane),
			'div.right.pane',
			render(this.contactEmailResponse(text))
		]));
		this.spinner.hide();
		this.spinner.destroy();
		this.spinner = null;
	},
   elements: [],
   spinner: null,
	contactLeftPane: [
		'h2[text=Contact Us]',
		'p',
			[
			'"We would love to hear from you. Our contact details are listed below, alternatively you can use the form on the right to send us an email.'
			],
		'table',
			[
			'tr',
				[
					'td[text=Phone:]',
					'td[text=1300 652 585]',
				],
			'tr',
				[
					'td[text=Fax:]',
					'td[text=(08) 9842 2943]',
				],
			'tr',
				[
					'td[text=Postal:]',
					'td',
						[
						'"PO BOX 509',
						'br',
						'"ALBANY WA 6331'
						]
				]
			]
	],

	contactEmailResponse: function(text) { 
		return [
			'p[text='+ text + ']',
			'p[text=You may close this panel.]'
		];
	},
	contactStyles: {
		'.moDi > .pane': {
			position: 'absolute',
			height: 460,
			float: 'left',
			width: 435,
			padding: 20,
			fontFamily: 'Verdana, Arial, Helvetica, sans-serif'
		},
		'.moDi > .left.pane': {
			borderWidth: '0px 10px 0px 0px',
			borderColor: '#D49297',
			borderStyle: 'solid'
		},
		'.moDi > .right.pane': {
			left: 485,
		},
		'.moDi input, .moDi textarea': {
			backgroundColor: '#D6CD93',
			width: 435,
			borderWidth: 0,
			padding: 0,
			margin: '0px 0px 20px 0px'
		},
		'.moDi input': {
			height: 25,
			lineHeight: 25
		},
		'.moDi textarea': {
			height: 150
		},
		'.moDi p': {
			margin: '20px 0px 20px 0px',
			padding: 20,
			backgroundColor: '#D6CD93',
		},
		'.moDi table': {
			width: '80%',
			marginLeft: '10%',
			borderCollapse: 'separate',
			borderSpacing: '2px',
		},
		'.moDi table td': {
			lineHeight: 25,
			padding: '0px 20px',
			backgroundColor: '#D6CD93',
		},
		'.moDi .button, .moDi h2': {
		   display: 'block',
		   background: '#D49297',
		   color: '#6E181E',
		   cursor: 'pointer',
		   height: 30,
		   lineHeight: 30,
		   fontSize: '12px',
		   fontWeight: 'bold',
		   textAlign: 'center',
		   margin: 0,
		   padding: 0,
		   borderWidth: '2px 0px 0px 0px',
		   borderStyle: 'solid',
		   borderColor: '#6E181E',
		},
		'.moDi .button:hover': {
		   textDecoration: 'underline',
		},
		'.spinner': {
			backgroundColor: '#000000',
		   position: 'absolute',
		   opacity: '0.9',
		   filter: 'alpha(opacity=90)',
		   '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)',
		   zIndex: 999,
		},
		'.spinner-msg': {
		   textAlign: 'center',
		   fontWeight: 'bold',
		},
		'.spinner-img': {
		   background: "url('/modx/assets/acbs/img/spinner.gif') no-repeat",
		   width: 24,
		   height: 24,
		   margin: '0 auto',
		}
	}
});