/**
 * @author Sjors
 */
var Card = new Class({
	Implements: [Options],
	options: {},

	initialize: function (element, container, options) {
		this.setOptions(options);

		this.element   = document.id(element);
		this.container = document.id(container);

		this.id          = this.element.get('id');
		this.typeId      = this.element.get('id').split('-')[0];
		this.sortIndex   = this.element.get('id').split('-')[1];
		this.inDom       = true;
		this.isOpen      = false;
		this.openHeight  = 0;
		this.previewNode = this.element.getElement('.preview');
		this.headerNode  = this.element.getElement('.header');
		this.redistributed = false;

		if (this.element.getElement('.detail')) {
			this.detailNode = this.element.getElement('.detail').dispose();
		} else {
			this.detailNode = null;
		}

		this.animation = new Fx.Morph(this.element, {
			duration: 1050,
			unit: 'px',
			fps: 30,
			transition: 'quint:in:out',
			onComplete: this.detailHeightMonitor.bind(this)
		});

		var readmoreLink = this.element.getElement('.readmore a');

		this.request = new Request({
			url: readmoreLink ? readmoreLink.get('href') : '',
			method: 'get',
			async: false,
			evalScripts: true
		});

		this.element.store('instance', this);
 	},

	/*
	 * REPOSITIONS AND/OR OPENS THE CARD
	 */
	position: function (options) {
		options         = options || {};
		options.animate = options.animate || true;

		var currentWidth = parseInt(this.element.getStyle('width'));
		var newWidth     = parseInt(options.width);

		this.transitions = newWidth != currentWidth;

		if (newWidth == currentWidth) {
			this.isOpen = this.element.hasClass('open');
		} else if (newWidth > currentWidth) {
			this.isOpen = true;
		} else if (newWidth < currentWidth) {
			this.isOpen = false;
		}

		var transitionParams = {
			'top': options.top,
			'left': options.left,
			'width': options.width,
			'height': options.height}

		if (options.animate == true && !$$('body')[0].hasClass('csstrans')) {
			this.animation.start(transitionParams);
		} else {
			this.animation.set(transitionParams);

			if (this.isOpen)
				this.detailHeightMonitor.delay(1050, this);

      // Stupid fix for stupid bug in stupid Safari 5
      if (Browser.Engine.webkit) {
        window.setTimeout(function () {
          $('container').setStyle('opacity', 0.9);
          window.setTimeout(function () {
            $('container').setStyle('opacity', 1);
          }, 1);
        }, 1200);
      }
		}

    if (this.isOpen) {
      this.showDetail();
      this.element.scrollIntoView(true);
    } else {
      this.showPreview();
    }

		if (this.transitions) {
			this.headerNode.appendChild(new Element('img', {'src': '/images/header-icon-close.gif', 'class': 'close-btn'}));
		}
	},

	/*
	 * RETURNS THE AMOUNT OF PIXELS THE OPEN CARD WOULD TAKE
	 */
	getOpenHeight: function (width) {
		if (this.openHeight > 0) {
			return this.openHeight;
		}

		if (this.detailNode) {
			this.element.grab(this.detailNode);
		} else {
			this.request.send(); //fetches the detail content and places that in the card element
		}

		if (this.previewNode)
			this.previewNode.addClass('hide');

		var CSSDimensions = this.element.getStyles('width', 'height');

		this.element.setStyles({'height': 'auto', 'width': width});

		if (!this.detailNode) {
			var responseText = this.request.xhr.responseText;

			var insertDomNode;
			insertDomNode = document.id(Denham.config.insertDomId);
			insertDomNode.innerHTML = this.request.xhr.responseText.replace(/id="card-[0-9]+"/, 'style="display:none"');			

			var detailNode = insertDomNode.getElement('.detail');
			this.detailNode = detailNode.dispose();
			this.element.grab(detailNode);

			insertDomNode.empty();
		}

		this.openHeight  = parseInt(this.element.getElement('.header').getHeight());
		this.openHeight += parseInt(this.detailNode.getHeight());
		this.openHeight += parseInt(this.element.getElement('.footer').getHeight());

		this.element.setStyles(CSSDimensions);

		if (this.previewNode)
			this.previewNode.removeClass('hide');

		this.detailNode.dispose();

		return this.openHeight;
	},
	
	/*
	 * RECALCULATE AND SET THE HEIGHT OF THE OPEN CARD, BASED ON THE CONTENT
	 */
	recalculateOpenHeight: function() {
		this.openHeight  = parseInt(this.element.getElement('.header').getHeight());
		this.openHeight += parseInt(this.element.getElement('.detail').getHeight());
		this.openHeight += parseInt(this.element.getElement('.footer').getHeight());

		return this.openHeight;
	},

	/*
	 * TAKES THE CARD NODE OUT OF THE DOM TO IMPROVE PERFORMANCE
	 */
	removeFromDom: function () {
		this.inDom = false;
		this.element.dispose();
	},

	/*
	 * PLACES THE CARD IN THE DOM
	 */
	placeInDom: function () {
		this.inDom = true;
		this.container.grab(this.element);
	},

	/*
	 * PLACES THE DETAIL NODE IN AND THE DOM AND TAKES THE PREVIEW OUT
	 */
	showDetail: function () {
		this.element.grab(this.detailNode);

		if (this.previewNode)
			this.previewNode.dispose();

		this.element.addClass('open');

		if (this.element.hasClass('garment-library'))
			this.element.addClass('garment-library-open');

    if (addthis) {
      addthis.toolbox(this.element.getElement('.addthis_toolbox'), {ui_click: true});
    }
	},

	/*
	 * PLACES THE PREVIEW NODE IN AND THE DOM AND TAKES THE DETAIL OUT
	 */
	showPreview: function () {
		if (this.detailNode) {
			this.element.grab(this.previewNode);
			this.detailNode.dispose();
		}
		this.element.removeClass('open');
		this.element.removeClass('garment-library-open');
	},


	/*
	 * FUNCTION THAT MONITORS THE HEIGHT OF THE DETAIL PORTION (makeshift onload handler)
	 */
	detailHeightMonitor: function () {
		// if the content is still loading wait until everything is loaded then redistribute
		if (this.isOpen && this.redistributed === false) {
			var noChangeCount = 0;
			var interval = (function () {
				if (!this.isOpen) {
					$clear(interval);
					return;
				}

				var currentHeight = this.openHeight;
				var actualHeight  = this.recalculateOpenHeight();

				if (currentHeight == actualHeight) {
					noChangeCount++;
				} else {
					noChangeCount = 0;
				}

				if (noChangeCount == 5) {
					$clear(interval);
					Denham.gridManager.distribute();
					this.redistributed = true;
				}
			}).periodical(500, this)
		} else {
			this.redistributed = false;
		}
	}
});