Dvintage.ListSortHandlerDirectionimage = new Element('img').setStyle({position:'relative', top:'3px', left:'8px'});
Dvintage.ListSortHandler = Class.create({
	initialize: function (node, column, type, base) {
		this.direction = 'DESC';
		this.defaultimage = new Element('img', {src:'images/main/sortbig.png'}).setStyle({position:'relative', top:'3px', left:'8px'});
		this.descimageurl = 'images/main/sortbig1.png';
		this.ascimageurl = 'images/main/sortbig0.png';
		this.node = node; this.column = column; this.type = type; this.base = base;

		this.node.insert(this.defaultimage);
		this.node.observe('click', this._handleClick.bind(this));
		this.node.observe('custom:click', this._handleClick.bind(this));
	},

	_handleClick: function () {
		this.base.doSort(this.column, this.direction, this.type);
		if (this.base.getActiveListSortHandler()) {
			this.base.getActiveListSortHandler().showDefaultImage();
		}
		this.hideDefaultImage();
		this.base.setActiveListSortHandler(this);

		Dvintage.ListSortHandlerDirectionimage.src = (this.direction == 'DESC')? this.descimageurl:this.ascimageurl;
		this.node.insert(Dvintage.ListSortHandlerDirectionimage);

		this.direction = (this.direction == 'DESC')? 'ASC':'DESC';
	},

	showDefaultImage: function(){
		this.defaultimage.show();
	},

	hideDefaultImage: function(){
		this.defaultimage.hide();
	}

})

Dvintage.ListSort = Class.create({
	initialize: function () {
		this.list = null;
		this.activeListSortHandler = null;
		this.handlers = [];
	},

	setList: function (list){
		this.list = list;
	},

	setActiveListSortHandler: function(listSortHandler){
		this.activeListSortHandler = listSortHandler;
	},

	getActiveListSortHandler: function(){
		return this.activeListSortHandler;
	},

	setHandler: function (node, column, type) {
		node.setStyle({cursor:'pointer'});
		this.handlers.push(new Dvintage.ListSortHandler(node, column, type, this));
	},

	doSort: function(column, direction, type){


		var returnvalue = (direction == 'DESC')? -1:1;

		if (type == 'alphanum') {

			this.list.sort(function(a, b){

				avalue = (typeof a[column] != 'undefined')? a[column]:0;
				bvalue = (typeof b[column] != 'undefined')? b[column]:0;
				if (avalue > bvalue)
					return returnvalue;
				if (avalue < bvalue)
					return -returnvalue;
				return 0;

			})

		}

		if (type == 'bool') {

			this.list.sort(function(a, b){
				if (a[column] && !b[column])
					return returnvalue;
				if (!a[column] && b[column])
					return -returnvalue;
				return 0;

			})

		}

		this.callback(this.list)

	},

	setCallBack: function (callback) {
		this.callback = callback;
	}

})







Dvintage.SortBlock = Class.create({
    initialize: function(){

        var sortUL = new Element('ul', {className:'sortblock'});

        var labelLI     = new Element('li').addClassName('label')
        var justInLI    = new Element('li').setStyle({fontFamily:'Georgia', fontStyle: 'italic', color:'#fff', border:'0', background:'#ADA5A3', marginLeft:'10px', marginRight:'10px'}).writeAttribute('id', 'justinli');
        var dateLI      = new Element('li')
        var priceLI     = new Element('li');
        //var countryLI   = new Element('li');
        var vintageLI   = new Element('li');
        //var conditionLI = new Element('li').setStyle({padding:'0 0 0 9px'});

		var sortArrow = new Element('img').setStyle({position:'absolute',top:'0px',right:'0px',marginLeft:'0'});

		var activeElement = null;

        justInLI.observe('click', function() {
			this.direction = 1;
			this.direction = (this.direction+1)%2;
			sortArrow.src = '../images/main/sort' + this.direction + '.png'

			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color: (activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
			sortArrow.setStyle({right:'-8px'}); // This has an extra margin to create space around the background color, so we need to correct that margin.
            Dvintage.advertisements.sortOn('createdOn', this.direction);
            Dvintage.advertisements.filterOld(true);
            Dvintage.advertisements.doRequest();
        });

        dateLI.observe('click', function() {
			if (!this.direction)
				this.direction = 0;
			this.direction = (this.direction+1)%2;
			sortArrow.src = 'images/main/sort' + this.direction + '.png'
			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color:(activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
			sortArrow.setStyle({right:'2px'});
            Dvintage.advertisements.sortOn('displayDate', this.direction);
            Dvintage.advertisements.filterOld(false);
            Dvintage.advertisements.doRequest();
        });
        priceLI.observe('click', function() {
			if (!this.direction)
				this.direction = 0;
			this.direction = (this.direction+1)%2;
			sortArrow.src = 'images/main/sort' + this.direction + '.png'
			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color:(activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
			sortArrow.setStyle({right:'2px'});
            Dvintage.advertisements.sortOn('indexedPrice', this.direction);
            Dvintage.advertisements.filterOld(false);
            Dvintage.advertisements.doRequest();
        });
        /* countryLI.observe('click', function() {
			if (!this.direction)
				this.direction = 0;
			this.direction = (this.direction+1)%2;
			sortArrow.src = 'images/main/sort' + this.direction + '.png'
			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color:(activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
            Dvintage.advertisements.sortOn('country', this.direction);
            Dvintage.advertisements.filterOld(false);
            Dvintage.advertisements.doRequest();
        }); */
        vintageLI.observe('click', function() {
			if (!this.direction)
				this.direction = 0;
			this.direction = (this.direction+1)%2;
			sortArrow.src = 'images/main/sort' + this.direction + '.png'
			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color:(activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
			sortArrow.setStyle({right:'2px'});
            Dvintage.advertisements.sortOn('vintageness', this.direction);
            Dvintage.advertisements.filterOld(false);
            Dvintage.advertisements.doRequest();
        });
        /* conditionLI.observe('click', function() {
			if (!this.direction)
				this.direction = 0;
			this.direction = (this.direction+1)%2;
			sortArrow.src = 'images/main/sort' + this.direction + '.png'
			if (activeElement && activeElement!=this) {
				activeElement.setStyle({color:(activeElement.id == 'justinli') ? '#fff' : '#ADA5A3'});
			}
			activeElement = this;
			this.setStyle({color:'#000'});
			this.insert(sortArrow);
            Dvintage.advertisements.sortOn('condition', this.direction);
            Dvintage.advertisements.filterOld(false);
            Dvintage.advertisements.doRequest();
        }); */

        labelLI.update("SORT BY:");
        justInLI.update("JUST&nbsp;&nbsp;&nbsp;IN&nbsp;")
        dateLI.update("DATE&nbsp;");
        priceLI.update("PRICE&nbsp;");
        //countryLI.update("COUNTRY&nbsp;");
        vintageLI.update("VINTAGE&nbsp;");
        //conditionLI.update("CONDITION&nbsp;");


        sortUL.appendChild(labelLI);
        sortUL.appendChild(justInLI);
        sortUL.appendChild(dateLI);
        sortUL.appendChild(priceLI);
        //sortUL.appendChild(countryLI);
        sortUL.appendChild(vintageLI);
        //sortUL.appendChild(conditionLI);

        $('sorting').appendChild(sortUL);
    }
});