var PageListItem = function(plugIn, indeks, text, clickHandler)
{
    this.clickHandler = clickHandler;
    // create canvas
    var _str =    '<Canvas Canvas.Left="0" Width="232" Height="20" Background="#CCFFFFFF" ></Canvas>';
    this.canvasElement = plugIn.content.createFromXaml(_str, true);
    this.canvasElement['Canvas.Top'] = indeks * 20;
    
    // create canvas
    _str = '   <TextBlock Canvas.Top="0" Canvas.Left="6" Width="220" Height="20" FontSize="12" Foreground="#9A000000" />';
    this.TextblockElement = plugIn.content.createFromXaml(_str, true);
    this.TextblockElement.text = text;
    
    this.canvasElement.children.add(this.TextblockElement);
    
    this.canvasElement.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
    this.canvasElement.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
    this.canvasElement.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
    
    if (indeks > 0)
    {
        indeks += 4;
    }
    this.jumpHere = indeks - ((indeks + 1)% 2);
}

PageListItem.prototype.handleMouseEnter = function (s,e){
    this.canvasElement.background = "#EEFFFFFF";
    this.TextblockElement.foreground = "#FF000000";
}

PageListItem.prototype.handleMouseLeave = function (s,e){
    this.canvasElement.background = "#CCFFFFFF";
    this.TextblockElement.foreground = "#9A000000";
}

PageListItem.prototype.handleMouseDown = function (s,e){
    if (this.clickHandler) {
        this.clickHandler(this.jumpHere);
    }
}