(function($){
	//bug fix for ie 
	Element.implement({
		getComputedStyle: function(property){
			if (this.currentStyle) return this.currentStyle[property.camelCase()];
			if('getDocument' in this) {
			var defaultView = this.getDocument().defaultView;
			var computed = defaultView && defaultView.getComputedStyle(this, null);
			return (computed) ? computed.getPropertyValue([property.hyphenate()]) : null;
			}
		}
	});
	
	this.Scroller = new Class({
		Extends: Slider,
		options: {/*
			onTick: $empty(intPosition),
			onComplete: $empty(strStep),*/
			onChange: function(step){
				if(this.options.mode == 'horizontal') this.scrollable.setStyle('left', '-'+step+'px')
				else this.scrollable.setStyle('top', '-'+step+'px')
			},
			onTick: function(position){
				if (this.options.snap) position = this.toPosition(this.step);
				this.knob.setStyle(this.property, position);
			},
			snap: false,
			offset: 0,
			range: false,
			wheel: false,
			steps: 100,
			mode: 'horizontal',
			container: 'scroll-content',
			scrollable: 'phones',
			uplink: 'lnk-up',
			downlink: 'lnk-down',
			track: 'track',
			items: 'div.handset'
		},
		initialize: function(element, knob, options){
			this.setOptions(options)
			this.knob = document.id(knob);
			this.element = document.id(element);
			this.element.setStyle('display','block')
			this.container = document.id(this.options.container);
			this.scrollable = document.id(this.options.scrollable);
			this.uplink = document.id(this.options.uplink) || false;	
			this.downlink = document.id(this.options.downlink) || false;		
			this.items = this.scrollable.getElements(this.options.items);
			this.isHorizontal = (this.options.mode == 'horizontal');
			this.scrollable.setStyle((this.isHorizontal) ? 'width' : 'height', this.items[(this.isHorizontal) ? 'getWidth' : 'getHeight']().sum())
			this.initKnob();
			this.parent(element, knob, options);
			this.steps = (this.isHorizontal ? (this.container.getScrollSize().x - this.container.getSize().x) : (this.container.getScrollSize().y - this.container.getSize().y));

			this.element.setStyle('display', (this.steps > 0) ? 'block' : 'none');
	
			this.clicked = 0;

			this.drag.addEvent('complete', function(element){
				this.clicked = Math.round(this.toPosition(this.step))
			}.bindWithEvent(this));

			if(this.uplink){
				this.uplink.setStyle('display', (this.steps > 0) ? 'block' : 'none'); 
				this.uplink.addEvent('click', function(event){
					event.stop();
					if(this.clicked >= 0) { this.clicked -= 20; } 
					else { this.clicked = 0; }

					var dir = this.range < 0 ? -1 : 1;
					var position = this.clicked
					position = position.limit(-this.options.offset, this.full -this.options.offset);
						
					this.step = Math.round(this.min + dir * this.toStep(position));
					this.checkStep();
					this.fireEvent('tick', position);
					this.end();
			
				}.bindWithEvent(this));	
			}
			
			if(this.downlink){
				this.downlink.setStyle('display', (this.steps > 0) ? 'block' : 'none'); 
				this.downlink.addEvent('click', function(event){
					event.stop();									 
					if(this.clicked <= this.full) {	this.clicked += 20;	} 
					else { this.clicked = this.full; }
			
					var dir = this.range < 0 ? -1 : 1;
					var position = this.clicked
					position = position.limit(-this.options.offset, this.full -this.options.offset);
					
					this.step = Math.round(this.min + dir * this.toStep(position));
					this.checkStep();
					this.fireEvent('tick', position);
					this.end();

				}.bindWithEvent(this));
			}
		},
		initKnob: function(){
			var ch = this.container.getScrollSize()[(this.isHorizontal) ? 'x' : 'y'];
			var mh = this.container.getSize()[(this.isHorizontal) ? 'x' : 'y'];
			var th = this.container.getSize()[(this.isHorizontal) ? 'x' : 'y'];
			
			this.knobsize = Math.floor((th * mh) / ch);
			this.knob.setStyle((this.isHorizontal) ? 'width' : 'height', this.knobsize - 4);
			
			this.knob.setStyles({
				'cursor':'pointer',
				'opacity': 0.6
			});
			
			this.knob.set('tween',{
				duration:'short',
				transition:'quad:in:out'
			});
			
			this.knob.addEvents({
				'mouseover':function(){
					this.knob.tween('opacity',1);
				}.bindWithEvent(this),
				'mouseout': function(){
					this.knob.tween('opacity',0.6);
				}.bindWithEvent(this)
			});
		}
	});
	
	
})(document.id)			

window.addEvent('domready', function(){

	var horizontal = new Scroller('track', 'knob',{
		snap: true,
		mode: 'horizontal',
		container: 'scroll-content',
		scrollable: 'phones',
		track: 'track',
		items: 'div.handset'
	});

	$(document.body).addEvent('mouseleave',function(){
		horizontal.drag.stop()
	});

	$$('.drop-area').setStyle('opacity',0.75);
	
	var handsetData = $$('div.handset-data');
	var droppableArea = $$('div.drop-area');
	
	var tariffTable = $('tariff');
	var specsTable = $('specs');
	
	var tariffs = $$('div.tariff');
	var specs = $$('div.spec');
	var emptyLinks = $$('a.empty-content');
	
	var loader = $('loading');
	var warning = $('warning');

	loader.set('tween',{
		'link':'chain'	   
	});
	
	warning.set('tween',{
		'link':'chain'	   
	});
	
	tariffTable.getElements('tr').addEvent('mouseover', function(){
		this.getElements('th').highlight('#e6ebcb');
		this.getElements('td').highlight('#e6ebcb');
	});
	
	specsTable.getElements('tr').addEvent('mouseover', function(){
		this.getElements('th').highlight('#e6ebcb');
		this.getElements('td').highlight('#e6ebcb');
	});
	
	tariffs.setStyle('opacity',0);
	
	
	$$('a.tab').addEvent('click', function(event){
		event.stop();

		this.getParent('ul').getElements('li').removeClass('activestyle');
		this.getParent('li').addClass('activestyle');

		if(this.hasClass('tariff')){
			tariffs.tween('opacity', 1);
			specs.tween('opacity',0)
		} else {
			tariffs.tween('opacity', 0);
			specs.tween('opacity',1)
		}
		
	});

	$$('img.draggable').addEvent('mousedown', function(event){
		var clone = this.clone();						   
		var parent = this.getParent('div.handset')
		
		this.ondragstart = clone.ondragstart = function(){return false;}						   
	
		var drag = new Drag.Move(clone, {
			droppables: '.drop-area',
			onSnap: function(el){ 
				el.setStyle('opacity',0.75); 
				parent.setStyle('background','url(/eshop/content/redesign-img/blackberry/phone-blank.gif) no-repeat 35px 0px');
				parent.getElement('img').setStyle('visibility','hidden');
			},
			onComplete: function(el){ el.setStyle('opacity',1); },
			onEnter: function(element, droppable){ droppable.addClass('hoverstate'); },
			onLeave: function(element, droppable){ droppable.removeClass('hoverstate');	},
			onDrop: function(element, droppable, event){
				element.set('morph',{
					onComplete: function(){
						//element.destroy();	
					},
					'link':'chain'
				});	
				
				var calls = [false, false];
				
				var reqHeader = new Request.HTML({
					onFailure: function(xhr){
						warning.setStyle('display','block')
						loader.tween('opacity',0);
						warning.tween('opacity',1);
					},
					onSuccess: function(html){
						droppable.set('html','');
						droppable.setStyle('opacity', 1);
						droppable.adopt(html)
						
						droppable.getElement('a.empty-content').addEvent('click', function(event){
							event.stop();
							var index = droppableArea.indexOf(this.getParent('div.drop-area'));
							
							droppableArea[index].set('html','<p>Drag phones here to compare...</p>');
							droppableArea[index].addClass('inactive');
							droppableArea[index].store('handset','');
						
							tariffTable.getElements('tr').each(function(element, ind){
								element.getElements('td')[index].set('html','');
							}, this);
							
							specsTable.getElements('tr').each(function(element, ind){
								element.getElements('td')[index].set('html','');
							}, this);	
							
							parent.setStyle('background','');
							parent.getElement('img').setStyle('visibility','visible');							
							
						});
						
						calls[0] = true;
						
						if(!calls.contains(false)){
							loader.tween('opacity',0);
						}
						
					},
					url: '/request/html-comparison-head/'
				});
				
				var reqSpec = new Request.JSON({
					onFailure: function(xhr){
						warning.setStyle('display','block')
						loader.tween('opacity',0);
						warning.tween('opacity',1);
					},
					onSuccess: function(json, txt){
						var specsData = $H(json.data.specs);
						var tariffData = $H(json.data.tariff);
						
						specsData.each(function(value, key){
														
							var tableCell = specsTable.getElement('.' + key).getElements('td')[droppableArea.indexOf(droppable)];
							
							tableCell.set('html', '');

							if(key=='buy-link' && value != 'false'){
								tableCell.adopt(
									new Element('a',{'href': value,	'class':'rdbtn btn-magenta-small'}).adopt(
										new Element('span',{'class':'btn-corner-br'}).adopt(
											new Element('span',{'class':'btn-corner-bl'}).adopt(
												new Element('span',{'class':'btn-corner-tr'}).adopt(
													new Element('span',{'class':'btn-corner-tl'}).adopt(
														new Element('span',{'class':'padding','html':'Select and choose plan'})
													)
												)
											)
										)
									)
								);
								
							} else if(key=='buy-link' && value == 'false') {
								tableCell.adopt(new Element('span', {
									'html':'Out of stock',
									'class':'highlight'
								}));
							} else {
								tableCell.set('html', value);
							}
						});
						
						tariffData.each(function(value, key){
							var tableCell = tariffTable.getElement('.' + key).getElements('td')[droppableArea.indexOf(droppable)];
							tableCell.set('html', '');
							
							if(key=='buy-link' && value != 'false'){
								tableCell.adopt(
									new Element('a',{'href': value,	'class':'rdbtn btn-magenta-small'}).adopt(
										new Element('span',{'class':'btn-corner-br'}).adopt(
											new Element('span',{'class':'btn-corner-bl'}).adopt(
												new Element('span',{'class':'btn-corner-tr'}).adopt(
													new Element('span',{'class':'btn-corner-tl'}).adopt(
														new Element('span',{'class':'padding','html':'Buy this phone'})
													)
												)
											)
										)
									)
								);
								
							} else if(key=='buy-link' && value == 'false') {
								tableCell.adopt(new Element('span', {
									'html':'Out of stock',
									'class':'highlight'
								}));
							} else {
								tableCell.set('html', value);
							}
						});
						
						calls[1] = true;
						
						if(!calls.contains(false)){
							loader.tween('opacity',0);
						}
						
					},
					secure: false,
					url: '/request/html-comparison-specs/'
				});
				
				var arrDropped = [false, false, false];
				droppableArea.each(function(drop, index){
					if(drop.retrieve('handset') == element.get('alt') + '/' + element.get('title'))	{
						arrDropped[index] = true;
					}					
				});
				
				if (!droppable || droppable.retrieve('handset') == element.get('alt') + '/' + element.get('title') || arrDropped.contains(true)){ 

					parent.setStyle('background','');
					parent.getElement('img').setStyle('visibility','visible');
					
					element.morph({
						'top':parent.getElement('img').getTop(), 
						'left':parent.getElement('img').getLeft(),
						'opacity':0
					});
					
					return; 
				} else {

					if(droppable.retrieve('handset') != element.get('alt') + '/' + element.get('title') && droppable.retrieve('handset') != null && droppable.retrieve('handset') != ''){
						var previousParent = $('phones').getElement('img[title*=' + droppable.retrieve('handset').split('/')[1] + ']').getParent('div.handset');
						previousParent.setStyle('background','');
						previousParent.getElement('img').setStyle('visibility','visible');
					}

					loader.setStyles({
						'opacity':0,
						'display':'block'
					});
					
					loader.tween('opacity',1);

					element.morph({
						'top':droppable.getTop() + 14, 
						'left':droppable.getLeft() + 7,
						'opacity':0
					});
					
					droppable.store('handset', element.get('alt') + '/' + element.get('title'));

					droppable.set('html','');
					droppable.removeClass('inactive');
					droppable.removeClass('hoverstate');
					reqSpec.send({
						method:'post',		 
						data:'manufacturer='+ element.get('alt') +'&model='+ element.get('title') + '&business=' + $('isbusiness').get('value')
					});
					reqHeader.send({
						method:'post',		 
						data:'manufacturer='+ element.get('alt') +'&model='+ element.get('title') + '&business=' + $('isbusiness').get('value')
					});
				}
			}
		 
		});
		
		clone.set('class','')
		clone.setStyles({
			'top':this.getTop(),
			'left':this.getLeft(),
			'position':'absolute'
		});
		$(document.body).adopt(clone);
		drag.start(new Event(event))
	
	});

})