﻿$.fn.cSlide = function(videoArr)
{
    return this.each(function()
    {
        $("#"+this.id).html($.fn.cSlide.Render(videoArr));
        $(".slider,.handle",this).ifixpng();
        $('div.sliderGallery').each(function () {
            var ul = $('ul', this);
            var productWidth = 90 * videoArr.length;
            
            var slider = $('.slider', this).slider({ 
                handle: '.handle',
                minValue: 0, 
                maxValue: productWidth, 
                slide: function (ev, ui) {
                    ul.css('left', ui.value * -1 );
                }, 
                stop: function (ev, ui) {
                    ul.animate({ 'left' : ui.value * -1 }, 500, 'linear');
                }
            });
        });
    });
};   
$.fn.cSlide.Render = function(videoArr)
{
    var html = $("<div class=\"sliderGallery\"><ul class=\"items\"></ul><div style=\"clear:left;\">&nbsp;</div><div class=\"slider\"><div class=\"handle\"></div></div></div>");
    for(var i=0;i<videoArr.length;i++)
    {
        var img = $("<img src=\"http://www.googalz.com/v/image.aspx?r=1&s=thumb&vid="+ videoArr[i][0] + ".jpg\" alt=\""+videoArr[i][1]+"\" title=\""+videoArr[i][1]+"\" class=\"reflect\" width=\"120\" id=\"slide_id_"+i+"\" />");
        img.hide();
        img.load(function()
        {
            $(this).fadeIn('fast')
            .css({ cursor: 'pointer' })
            .click(function()
            {
                var c = this.id.replace('slide_id_','');
                
//                var container = $("<div id=\"_slideVideo\" style=\"padding:5px; background-color:#DDD;cursor:default;\">&nbsp;</div>");
//                var close = $("<div style=\"width:300px;overflow:hidden;height:20px;float:left;color:#333;font-size:12pt;font-family:Tahoma;padding:2px;text-align:left;\">"+videoArr[c][1]+"</div><div style=\"float:right;width:100px;text-align:right;\"><a href=\"javascript:void(0);\" onclick=\"javascript:$(document.body).unblock();\">close</a></div>");
//                container.append(close);
//                container.append("<div>&nbsp;</div><div id=\"_slideVideoShow\" style=\"width:425px;height:355px;\"></div>");
//                $.blockUI(container,{width: 435,top: Math.ceil((parseInt($(document.body).innerHeight()) /2 )), left:Math.abs(Math.ceil((parseInt($(document.body).innerWidth()) / 2 )) - 80) });
                var vid = videoArr[c][0];
                window.location = '/home/clip/ViewClip.aspx?videoid='+vid;
//                var str = "<object><param name=\"movie\" value=\"http://www.googalz.com/v/l.swf?vid="+vid+"&image=http://www.googalz.com/v/image.aspx?vid="+vid+".jpg&autostart=false&shownavigation=true&repeat=false&width=425&height=355&showstop=true\"><embed src=\"http://www.googalz.com/v/l.swf?vid="+vid+"&image=http://www.googalz.com/v/image.aspx?vid="+vid+".jpg&autostart=false&shownavigation=true&repeat=false&width=425&height=355&showstop=true\" type=\"application/x-shockwave-flash\"  width=\"425\" height=\"355\" allowfullscreen=\"true\"></object>";
//                $("#_slideVideoShow").append(str);
            });
        });
        
        $('ul',html).append($("<li></li>").append(img));
    }
    return html;
};