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

	ViewMediaScrollItem.MIN_WIDTH = 147;
	ViewMediaScrollItem.MIN_HEIGHT = 205;
	
	ViewMediaScrollItem.INACTIVE = 0;
	ViewMediaScrollItem.ACTIVE = 1;

	ViewMediaScrollItem.MOVE_LEFT = 0;
	ViewMediaScrollItem.MOVE_RIGHT = 1;
	
	this.nState = ViewMediaScrollItem.INACTIVE;
	if (this.options.bActive) {
	  this.nState = ViewMediaScrollItem.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.elemImage);
    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 ViewMediaScrollItem.INACTIVE:
 		this.elemItem.style.width = ViewMediaScrollItem.MIN_WIDTH  + 'px';
 		this.elemItem.style.height = ViewMediaScrollItem.MIN_HEIGHT + 'px';
 		this.elemItem.style.left = (ViewMediaScrollItem.MAX_WIDTH - ViewMediaScrollItem.MIN_WIDTH) / 2 + 'px';
 		this.elemItem.style.top = (ViewMediaScrollItem.MAX_HEIGHT - ViewMediaScrollItem.MIN_HEIGHT) / 2 + 'px';
	  	break;
		
	  case ViewMediaScrollItem.ACTIVE:
		this.elemItem.style.width = ViewMediaScrollItem.MAX_WIDTH  + 'px';
		this.elemItem.style.height = ViewMediaScrollItem.MAX_HEIGHT + 'px';
		this.elemItem.style.left = '0px';
		this.elemItem.style.top = '0px';
	  	break;
    }
  },

  getContent: function() {
	return this.options.elemContent;
  },

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

  hide: function() {
	if (this.nState == ViewMediaScrollItem.ACTIVE) {
	  this.contentTitleFade.hide();	
	}	
    this.image.hide();
    this.options.elemContent.style.visibility = "hidden";
  },
  
  moveLeft: function(nMove, bActive) {
	this.move(ViewMediaScrollItem.MOVE_LEFT, nMove, bActive);
  },
	  
  moveRight: function(nMove, bActive) {
	this.move(ViewMediaScrollItem.MOVE_RIGHT, nMove, bActive);
  },

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