var hkh = hkh || {};
hkh.ActionBar = hkh.ActionBar || {};

hkh.ActionBar = function (config)
{
	var me = this;
	
	this.container = { main:null };
	this.config = {
		container_selector: '.action-bar-wrapper',
		container_selector_prefix: '.action-bar-wrapper-',
		data_container_selector: '.action-bar-data',
		
		img_dir: '',
		is_hide: true
	};
	
	this.setConfig = function (config)
	{
		$.extend(true, this.config, config);
	};
	
	this.init = function ()
	{
		if (this.config.myhomes_keeper)
			this.myhomes_keeper = this.config.myhomes_keeper;
		else
			return false;
		
		if (this.config.container)
		{
			this.container.main = this.config.container;
		}
		else
		{
			// this.container.main = $('div[id^="'+this.config.default_container_selector_prefix+'"]');
			this.container.main = $(this.config.container_selector);
		}
		
		this.myhomes_keeper.core.addListener('onItemClipped', $.proxy(this.onItemClipped, this));
		this.myhomes_keeper.core.addListener('onItemUnclipped', $.proxy(this.onItemUnclipped, this));
		this.myhomes_keeper.core.addListener('onItemsChecked', $.proxy(this.onItemsChecked, this));
		
		this.initTpl();
		this.buildBar();
	};

	this.setItemCategory = function (item_cat)
	{
		this.config.item_cat = item_cat;
		
		if (item_cat == 'property')
		{
			this.config.enabled_icons = {
				clip: 1,
				enquiry: 1,
				sharing: 1
			};
		}
		else if (item_cat == 'featured_article')
		{
			this.config.enabled_icons = {
				clip: 1
			};
		}
		else
		{
			this.config.enabled_icons = {
				clip: 1,
				sharing: 1
			};
		}
	};
	this.setAsProperty = function ()
	{
		this.setItemCategory('property');
	};
	this.setAsDirectory = function ()
	{
		this.setItemCategory('directory');
	};
	this.setAsArticle = function ()
	{
		this.setItemCategory('featured_article');
	};
	this.setAsProduct = function ()
	{
		this.setItemCategory('goods_and_services');
	};
	
	this.showAll = function ()
	{
		this.container.main.each(function () {
			$(this).find('.action-bar').show();
		});
	};
	
	this.show = function (ele)
	{
		$(ele).find('.action-bar').show();
	};
	
	this.hide = function (ele)
	{
		$(ele).find('.action-bar').hide();
	};
	
	this.clipItem = function (ele)
	{
		var data = this.getDataFromContainer(ele);
		var info = {
			item_id: data.item_id,
			item_type: data.item_type,
			item_cat: this.config.item_cat
		};
		
		this.myhomes_keeper.core.clipItem(info);
	};
	this.onItemClipped = function (resp)
	{
		if (resp.clip_item_id)
		{
			var bar = $(this.config.container_selector_prefix+resp.item_id);
			bar
				.data('clip_item_id', resp.clip_item_id)
				.find('.action-bar .action-bar-item-clip').each(function () {
					me.toggleClipIcon(this, true);
				})
			;
		}
	};
	
	this.unclipItem = function (ele)
	{
		this.myhomes_keeper.core.unclipItem(ele.data().clip_item_id);
	};
	this.onItemUnclipped = function (resp)
	{
		if (resp.result == 1)
		{
			var bar = $(this.config.container_selector_prefix+resp.item_id);
			bar
				.removeData('clip_item_id')
				.find('.action-bar .action-bar-item-clip').each(function () {
					me.toggleClipIcon(this, false);
				})
			;
		}
	};
	
	this.toggleClipIcon = function (ele, is_clipped)
	{
		ele = $(ele);
		ele.unbind('click');
		if (is_clipped)
		{
			ele.addClass('action-bar-item-unclip');
			ele.one('click', function () {
				me.unclipItem($(this).parents(me.config.container_selector));
			});
		}
		else
		{
			ele.removeClass('action-bar-item-unclip');
			ele.one('click', function () {
				me.clipItem($(this).parents(me.config.container_selector));
			});
		}
	};
	
	this.getDataFromContainer = function (ele)
	{
		var data  = {};
		var data_ele = ele.find(me.config.data_container_selector);
		
		data.item_type = data_ele.find('.item-type').val();
		data.item_id = data_ele.find('.item-id').val();
		data.enquiry_link = data_ele.find('.enquiry-link').val();
		data.sharing_link = data_ele.find('.sharing-link').val();
		
		return data;
	};
	
	this.initTpl = function ()
	{
		var tpl = '\
			<div class="action-bar{{if is_hide}} hide{{/if}}">\
				{{if is_enable_clip}}\
				<div class="action-bar-item action-bar-item-clip" title="${__save_this_prop_to_myhome}"></div>\
				{{/if}}\
				{{if is_enable_sharing}}\
				<div class="action-bar-item action-bar-item-sharing"><img title="${__share_with_fds}" src="${img_dir}/common/email.gif"></div>\
				{{/if}}\
				{{if is_enable_enquiry}}\
				<div class="action-bar-item action-bar-item-enquiry"><img title="${__enq_this_prop}" src="${img_dir}/common/enquiry.gif"></div>\
				{{/if}}\
				<div class="clear"></div>\
			</div>\
		';
		$.template('action-bar', tpl);
	};
	
	this.buildBar = function ()
	{
		var tpl_data = {
			img_dir: this.config.img_dir,
			is_hide: this.config.is_hide,
			is_enable_clip: this.config.enabled_icons.clip,
			is_enable_sharing: this.config.enabled_icons.sharing,
			is_enable_enquiry: this.config.enabled_icons.enquiry
		};
		
		this.container.main.each(function () {
			var self = $(this);
			var data = me.getDataFromContainer(self);
			
			var bar = $.tmpl('action-bar', tpl_data).appendTo(self);
			bar
				.parents(me.config.container_selector)
					.data({
						'item_id': data.item_id,
						'item_type': data.item_type
					})
				.end()
				
				.find('.action-bar-item-clip')
					.one('click', function () {
						me.clipItem($(this).parents(me.config.container_selector));
					})
				.end()
					
				.find('.action-bar-item-enquiry')
					.data('link', data.enquiry_link)
					.click(function () {
						openEnquiryBox($(this).data('link'));
					})
				.end()
				
				.find('.action-bar-item-sharing')
					.data('link', data.sharing_link)
					.click(function () {
						openSharingBox($(this).data('link'));
					})
			;
		});
		
		this.checkClipStatus();
	};
	
	this.checkClipStatus = function ()
	{
		var item_ids = [];
		var item_types = {};
		this.container.main.each(function () {
			var data = $(this).data();
			item_ids.push(data.item_id);
			
			if (!item_types[data.item_type])
				item_types[data.item_type] = true;
		});
		
		var item_type_str = [];
		$.each(item_types, function (k, v) {
			item_type_str.push(k);
		})
		item_type_str.join(',');
		
		var info = {
			item_ids: item_ids,
			item_type: item_type_str,
			item_cat: this.config.item_cat
		};
		this.myhomes_keeper.core.checkItems(info);
	};
	this.onItemsChecked = function (resp)
	{
		if (resp.items && resp.items.length > 0)
		{
			$.each(resp.items, function () {
				var bar = $(me.config.container_selector_prefix + this.item_id);
				bar.data('clip_item_id', this.clip_item_id);
				me.toggleClipIcon($(' .action-bar .action-bar-item-clip', bar), true);
			})
		}
	};
	
	// pre-init
	this.setConfig(config);
	this.setAsProperty();
};