/**
 * ViewCollectionScrollItem
 */
var ViewCollectionScrollItem = Class.create({
  /**
   * Init ViewCollectionScrollItem
   */	
  initialize: function() {
	this.options = Object.extend({
	  elemContent : null,
	  elemTitleContent : null,
	  nX		  : 0,
	  bActive     : false,
	  nPos		  : 0
	}, arguments[0] || { });		
	
	ViewCollectionScrollItem.MAX_WIDTH = 446;
	ViewCollectionScrollItem.MAX_HEIGHT = 512;

	ViewCollectionScrollItem.MIN_WIDTH = 223;
	ViewCollectionScrollItem.MIN_HEIGHT = 256;
	
	ViewCollectionScrollItem.INACTIVE = 0;
	ViewCollectionScrollItem.ACTIVE = 1;

	ViewCollectionScrollItem.MOVE_LEFT = 0;
	ViewCollectionScrollItem.MOVE_RIGHT = 1;
	
	this.nState = ViewCollectionScrollItem.INACTIVE;
	if (this.options.bActive) {
	  this.nState = ViewCollectionScrollItem.ACTIVE;
	}
    this.moveElemEffect = null;
    this.moveImgEffect = null;
	
    this.contentTitleFade = new EggFade({elemContent:this.options.elemTitleContent});    
    
    this.elemItem = this.options.elemContent.down('.scrollitem');    
    this.elemImage = this.options.elemContent.down('.image');
    this.elemImg = this.options.elemContent.down('img');
    this.options.elemContent.style.left = this.options.nX + "px";

	this.image = new EggImage(this.options.elemContent.down('.image'));
	this.options.elemContent.observe('eggimage:loaded', this.imageLoaded.bind(this));			
    this.image.load();    
    
    this.options.elemContent.down('.btn').observe('click', this.imageClick.bind(this));				      	    
    this.options.elemContent.down('.btn').observe('mouseover', this.imageOver.bind(this));
    
	switch (this.nState) {
	  case ViewCollectionScrollItem.INACTIVE:		  
		this.elemItem.style.width = ViewCollectionScrollItem.MIN_WIDTH  + 'px';
		this.elemItem.style.height = ViewCollectionScrollItem.MIN_HEIGHT + 'px';
		this.elemItem.style.left = (ViewCollectionScrollItem.MAX_WIDTH - ViewCollectionScrollItem.MIN_WIDTH) / 2 + 'px';
		this.elemItem.style.top = (ViewCollectionScrollItem.MAX_HEIGHT - ViewCollectionScrollItem.MIN_HEIGHT) / 2 + 'px';
		break;
		
	  case ViewCollectionScrollItem.ACTIVE:
		this.elemItem.style.width = ViewCollectionScrollItem.MAX_WIDTH  + 'px';
		this.elemItem.style.height = ViewCollectionScrollItem.MAX_HEIGHT + 'px';
		this.elemItem.style.left = '0px';
		this.elemItem.style.top = '0px';
		break;
	}
  },

  getID: function() {
	return this.options.elemContent.readAttribute('datafld');;
  },
  
  getContent: function() {
	return this.options.elemContent;
  },

  show: function() {
	if (this.nState == ViewCollectionScrollItem.ACTIVE) {
	  this.contentTitleFade.show();	
	}		  
    this.options.elemContent.style.visibility = "visible";
    this.image.show();
  },

  hide: function() {
	if (this.nState == ViewCollectionScrollItem.ACTIVE) {
	  this.contentTitleFade.hide();	
	}	
    this.image.hide();	
    this.options.elemContent.style.visibility = "hidden";
  },

  moveNow: function(nMove, bActive) {
	if (bActive) {
	  if (this.nState != ViewCollectionScrollItem.ACTIVE) {
		this.nState = ViewCollectionScrollItem.ACTIVE;
		this.contentTitleFade.show();
	  }
	}
	else {
	  if (this.nState != ViewCollectionScrollItem.INACTIVE) {
	    this.nState = ViewCollectionScrollItem.INACTIVE;		
	    this.contentTitleFade.hide();
	  }
	}
			
	var nMoveX = -ViewCollectionScrollItem.MAX_WIDTH * nMove;
	this.options.nX += nMoveX; 
		
    this.options.elemContent.style.left = this.options.nX + "px";
		
	if (bActive) {			
	  this.elemItem.style.width = ViewCollectionScrollItem.MAX_WIDTH  + 'px';
	  this.elemItem.style.height = ViewCollectionScrollItem.MAX_HEIGHT + 'px';
	  this.elemItem.style.left = '0px';
	  this.elemItem.style.top = '0px';
	}
	else {
	  this.elemItem.style.width = ViewCollectionScrollItem.MIN_WIDTH  + 'px';
	  this.elemItem.style.height = ViewCollectionScrollItem.MIN_HEIGHT + 'px';
	  this.elemItem.style.left = (ViewCollectionScrollItem.MAX_WIDTH - ViewCollectionScrollItem.MIN_WIDTH) / 2 + "px";
	  this.elemItem.style.top = (ViewCollectionScrollItem.MAX_HEIGHT - ViewCollectionScrollItem.MIN_HEIGHT) / 2 + "px";
	}		  
  },
  
  moveLeft: function(nMove, bActive) {
	this.move(ViewCollectionScrollItem.MOVE_LEFT, nMove, bActive);
  },
	  
  moveRight: function(nMove, bActive) {
	this.move(ViewCollectionScrollItem.MOVE_RIGHT, nMove, bActive);
  },

  move: function(nDirection, nMove, bActive) {
	if (bActive) {
	  if (this.nState != ViewCollectionScrollItem.ACTIVE) {
		this.nState = ViewCollectionScrollItem.ACTIVE;
		this.contentTitleFade.show();
	  }
	}
	else {
	  if (this.nState != ViewCollectionScrollItem.INACTIVE) {
	    this.nState = ViewCollectionScrollItem.INACTIVE;		
	    this.contentTitleFade.hide();
	  }
	}
		
	var nMoveX = ViewCollectionScrollItem.MAX_WIDTH * nMove;
	if (nDirection == ViewCollectionScrollItem.MOVE_LEFT) {
	  nMoveX = -ViewCollectionScrollItem.MAX_WIDTH * nMove;
	}
	this.options.nX += nMoveX; 
	
	if (css3Transition) {
	  this.options.elemContent.addClassName('css3_move');
	  this.options.elemContent.style.left = this.options.nX + "px";
	}
    else {      
	  this.moveElemEffect = new Effect.Morph(this.options.elemContent, {duration: 1, style: {left: this.options.nX + 'px', top: '0px'}});
	}
	
	if (bActive) {			
	  if (css3Transition) {
		this.elemItem.addClassName('css3_size');
		this.elemItem.style.width = ViewCollectionScrollItem.MAX_WIDTH  + 'px';
		this.elemItem.style.height = ViewCollectionScrollItem.MAX_HEIGHT + 'px';
		this.elemItem.style.left = '0px';
		this.elemItem.style.top = '0px';
	  }
	  else {
	    this.moveImgEffect = new Effect.Morph(this.elemItem, {duration: 1, style: {
	    	width: ViewCollectionScrollItem.MAX_WIDTH  + 'px', 
			height: ViewCollectionScrollItem.MAX_HEIGHT + 'px', 
			left: '0px', 
			top: '0px'}});				   	    														   		  
	  }
	}
	else {
	  if (css3Transition) {
		this.elemItem.addClassName('css3_size');
		this.elemItem.style.width = ViewCollectionScrollItem.MIN_WIDTH  + 'px';
		this.elemItem.style.height = ViewCollectionScrollItem.MIN_HEIGHT + 'px';
		this.elemItem.style.left = (ViewCollectionScrollItem.MAX_WIDTH - ViewCollectionScrollItem.MIN_WIDTH) / 2 + "px";
		this.elemItem.style.top = (ViewCollectionScrollItem.MAX_HEIGHT - ViewCollectionScrollItem.MIN_HEIGHT) / 2 + "px";
	  }
	  else {
		this.moveImgEffect = new Effect.Morph(this.elemItem, {duration: 1, style: {
			width: ViewCollectionScrollItem.MIN_WIDTH  + 'px', 
			height: ViewCollectionScrollItem.MIN_HEIGHT + 'px', 
			left: (ViewCollectionScrollItem.MAX_WIDTH - ViewCollectionScrollItem.MIN_WIDTH) / 2 + "px", 
			top: (ViewCollectionScrollItem.MAX_HEIGHT - ViewCollectionScrollItem.MIN_HEIGHT) / 2 + 'px'}});
	  }
	}	
  },  
  
  imageOver: function(evt) {
    evt.element().setStyle({cursor:"pointer"});
  },
	    
  imageClick: function(evt) {
	var bActive = false;
	if (this.nState == ViewCollectionScrollItem.ACTIVE) {
	  bActive = true;
	}
    // fire event
	this.options.elemContent.fire("item:click", { nPos: this.options.nPos, bActive: bActive });
  },
  
  imageLoaded: function(evt) {
  }  
  
});