var data = {
	local: [
		{id: 101, title: '女装 两翻领T恤 UNIQLO优衣库', img: '', price: 59.00},
		{id: 102, title: 'F91563 热卖女装09韩版夏新品新款人气V领紧身毛衣...', img: '', 'price': 69.00},
		{id: 103, title: '女装 亨利领T恤 UNIQLO优衣库', img: '', price: 79.00},
		{id: 104, title: 'a8a8a8a8a8', img: '', price: 89.00},
		{id: 105, title: '女装 两翻领T恤 UNIQLO优衣库', img: '', price: 59.00},
		{id: 106, title: 'F91563 热卖女装09韩版夏新品新款人气V领紧身毛衣...', img: '', 'price': 69.00},
		{id: 107, title: '女装 亨利领T恤 UNIQLO优衣库', img: '', price: 79.00},
		{id: 108, title: 'a8a8a8a8a8', img: '', price: 89.00}
	],
	external: [
		{id: 201, title: 'notiemfdsf', img: '', price:18.00},
		{id: 202, title: '女装 两翻领T恤 UNIQLO优衣库', img: '', price:59.00},
		{id: 203, title: 'F91563 热卖女装09韩版夏新品新款人气V领紧身毛衣...', img: '', price:69.00},
		{id: 204, title: 'a8a8a8a8a8', img: '', price:18.00},
		{id: 205, title: 'notiemfdsf', img: '', price:18.00},
		{id: 206, title: '女装 两翻领T恤 UNIQLO优衣库', img: '', price:59.00},
		{id: 207, title: 'F91563 热卖女装09韩版夏新品新款人气V领紧身毛衣...', img: '', price:69.00},
		{id: 208, title: 'a8a8a8a8a8', img: '', price:18.00}
	]
};

var GoodsSyncManager = new Class({
	
	Implements: [Options, Events],
	
	options: {
		data: null
	},
	
	initialize: function(el, options){
		this.setOptions(options);
		this.el = $(el);
		if(!this.el) return false;
		this.data = $H(this.options.data);
		this.dataCache = {};
		this.matched = [];
		this.viewports = this.el.getElements('.app-gsync-viewport');
		this.addSides().addCache();
		this.data.each(function(data, sideLabel){
			this.addItems(sideLabel, data);
		}, this);
		this.sides.each(function(side){
			side.addEvent('click', this.onSelect.bindWithEvent(this, [side]));
		},this);
		this.el.getElements('.app-gsync-sort-price').each(function(el, index){
			var side = el.getParent('.app-gsync-wrapper').getElement('.app-gsync-viewport');
			var sideLabel = this.sides.keyOf(side);
			var type = [];
			el.className.clean().split(' ').each(function(el){
				type.push(el.replace(/app-gsync-sort-/, ''));
			});
			type = type.join('-');
			el.addEvent('click', this.updateItems.bind(this, [sideLabel, type]));
		},this);
		this.fireEvent('initialize');
	},
	
	addCache: function(){
		this.data.getValues().flatten().each(function(data){
			this.dataCache[data.id] = $merge({}, data);
			delete this.dataCache[data.id]['id'];
		}, this);
		return this;
	},
	
	addSides: function(){
		this.sides = $H(this.viewports.associate(this.data.getKeys()));
		this.viewports.each(function(viewport){
			viewport.addClass('app-gsync-viewport-'+this.sides.keyOf(viewport));
		},this);
		return this;
	},
	
	addItem: function(sideLabel, data){
		var item = new Element('div', {'class': 'app-gsync-item', 'price': data.price, 'pid': data.id});
		var html = [
			new Element('div', {'class': 'app-gsync-goods-img', 'html':'<img src="'+data.img+'" />'}),
			new Element('div', {'class': 'app-gsync-goods-title', 'html':'<a href="#">'+data.title+'</a>'}),
			new Element('div', {'class': 'app-gsync-goods-info', 'html':'价格：'+data.price}),
			new Element('div', {'class': 'app-gsync-goods-index'})
		].each(function(div){
			div.inject(item);
		});
		this.sides[sideLabel].adopt(item);
		return this;
	},
	
	addItems: function(sideLabel, data){
		this.sides[sideLabel].empty();
		data.each(function(item){
			this.addItem(sideLabel, item);
		}, this);
		this.reset();
		return this;
	},
	
	updateItems: function(sideLabel, type){
		var sortFn = '';
		switch(type){
			case 'price-asc':
				sortFn = function(a, b){
					return a.getProperty('price') - b.getProperty('price');
				};
				break;
			case 'price-desc':
				sortFn = function(a, b){
					return b.getProperty('price') - a.getProperty('price');
				};
				break;
			default: sortFn = $lambda(false);
		}
		var items = this.sides[sideLabel].getElements('.app-gsync-item');
		items.sort(sortFn).each(function(item){
			item.inject(this.sides[sideLabel]);
		}, this);
	},
	
	onSelect: function(e, side){
		e.stop();
		side.focus();
		var item = e.target.hasClass('app-gsync-item') ? e.target : e.target.getParent('.app-gsync-item');
		if(this.matchItems.hasValue(item)){
			this.cancel(item);
			return;
		}else if(this.currentSide == side){
			return;
		}
		this.onMatching(item, side);
	},
	
	getMatched: function(item){
		var ret = this.matched.filter(function(matched){
			return matched.hasValue(item);
		});
		return (ret && ret.length > 0) ? ret[0] : false;
	},
	
	unMatch: function(matched){
		matched.each(function(item){
			this.cancel(item);
		}, this);
		this.matched.erase(matched);
		this.updateIndex();
		this.fireEvent('unmatch').fireEvent('complete', [this.matchItems, this.matched]);
	},
	
	cancel: function(item){
		item.removeClass('app-gsync-item-active');
		this.reset();
	},
	
	onMatching: function(item, side){
		var matched = this.getMatched(item);
		if(matched){
			if(!this.matching) this.unMatch(matched);
			return;
		}
		var itemIndex = item.getElement('.app-gsync-goods-index');
		item.addClass('app-gsync-item-active');
		itemIndex.set('html', this.matched.length);
		this.matchItems.set(this.sides.keyOf(side), item);
		this.currentItem = item;
		this.currentSide = side;
		this.matching = (this.sides.getKeys().length != this.matchItems.getKeys().length) ? true : false;
		if(!this.matching){
			this.matched.push(this.matchItems);
			this.reset().fireEvent('match', [this.matchItems, this.matched]).fireEvent('complete', [this.matchItems, this.matched]);
		}
	},
	
	reset: function(){
		this.matchItems = $H();
		this.currentSide = null;
		this.matching = false;
		return this;
	},
	
	/*undo: function(){
		if(this.matching || this.matched.length == 0) return false;
		this.tempMatched = this.matched.pop();
		this.unMatch(this.tempMatched);
	},
	
	redo: function(){
		if(this.matching || !this.tempMatched) return false;
		this.reset();
		this.tempMatched.each(function(item, sideLabel){
			this.onMatching(item, this.sides[sideLabel]);
		}, this);
		this.tempMatched = null;
	},*/
	
	updateIndex: function(){
		this.matched.each(function(matched, index){
			matched.each(function(item, side){
				item.getElement('.app-gsync-goods-index').set('html', index);
			});
		});
		return this;
	}
});


window.addEvent('domready', function(){
	goodsSyncManager = new GoodsSyncManager('app-gsync', {
		data: data,
		onComplete: function(matched, matchedItems){
			var html = [];
			matchedItems.each(function(item){
				var piece = [];
				item.getValues().each(function(el){
					piece.push(JSON.encode(this.dataCache[el.getProperty('pid')]));
				}, this);
				html.push(piece.join('<br> '));
			}, this);
			html = html.join('<hr>');
			$('log-box').set('html', html);
		}
	});
});