/**
 * This will allow the store to easily create a group of attribute thumbs and
 * then apply event listeners to them so the end user can see larger views
 * and choose which attribute they like in a nice JS way.
 * @param {string} imageEl  Attribute image id
 * @param {string} selectEl Attribute select id
 * @param {string} thumbsEl Attribute thumbs container div
 */
function Swapper (imageEl, selectEl, thumbsEl) {

	this.attributeImage = document.getElementById(imageEl);
	this.attributeSelect = document.getElementById(selectEl);
	this.attributeThumbs = document.getElementById(thumbsEl);

	YAHOO.util.Event.on(this.attributeSelect, 'change', this.selectChange, this.attributeSelect, this);
	
    this.previousTitle = null;
    this.previousSrc = null;
    this.prevImgObj = null;
	
	// object of value -> position key values for resolving a position
	// based on a key so we know image 12 is position 3 in the select
	// dropdown
	this.opts = {};

}

Swapper.prototype.selectChange = function (eventObj, selectObj) {
	this.setById(selectObj.value);
};


/**
 * Parse the image object and return the attribute id
 * @param {object} event
 * @param {object} image element
 * @return int
 */
Swapper.prototype.getId = function (img) {
    var id = img.id.split('_');
    return id[1];
};


/**
 * Handle on mouse over
 * @param {object} event
 * @param {object} image element
 */
Swapper.prototype.over = function (eventObj, img) {
    var id = this.getId(img);

    this.previousTitle = this.attributeSelect.selectedIndex;
    this.attributeSelect.selectedIndex = this.opts[id];

    this.previousSrc = this.attributeImage.src;
    this.attributeImage.src = img.src;
};


/**
 * Handle on mouse out
 * @param {object} event
 * @param {object} image element
 */
Swapper.prototype.out = function (eventObj, img) {
    var id = this.getId(img);

    if (this.previousTitle !== null) {
        this.attributeSelect.selectedIndex = this.previousTitle;
	}

    if (this.previousSrc !== null) {
        this.attributeImage.src = this.previousSrc;
	}
};


/**
 * Handle on click
 * @param {object} event
 * @param {object} image element
 */
Swapper.prototype.set = function (eventObj, img) {
    var id = this.getId(img);

	// set the title and image
    this.previousTitle = this.attributeSelect.selectedIndex;
    this.attributeSelect.selectedIndex = this.opts[id];

    this.attributeImage.src = img.src;
    this.previousSrc = img.src;

	// set the image clicked border
	if (this.prevImgObj !== null) {
		//this.prevImgObj.style.border = '';
		this.prevImgObj.className = 'attrOut';
	}

	this.prevImgObj = img;
    //img.style.border = '1px solid red';
	img.className = 'attrOver';
};

Swapper.prototype.parseOptions = function () {
    var selectOptions = this.attributeSelect.options;
    for (var x=0; x < selectOptions.length; x++) {
        this.opts[selectOptions[x].value] = x;
    }
};

Swapper.prototype.setById = function (id) {
    var img = document.getElementById('thumb_'+ id);
    this.set(null, img);
};

Swapper.prototype.setInitial = function () {
    var id = this.attributeSelect.options[0].value;
    this.setById(id);
};

Swapper.prototype.init = function () {
	// loop thru image set and add listeners
	var attributeImages = YAHOO.util.Dom.get(this.attributeThumbs).getElementsByTagName('img');
	for (var x=0; x < attributeImages.length; x++) {
		YAHOO.util.Event.on(attributeImages[x], 'mouseover', this.over, attributeImages[x], this);
		YAHOO.util.Event.on(attributeImages[x], 'mouseout', this.out, attributeImages[x], this);
		YAHOO.util.Event.on(attributeImages[x], 'click', this.set, attributeImages[x], this);
	}

	this.parseOptions();
	this.setInitial();
};