jQuery.fn.grafico = function(t,ct){
    this.each(function(){
        //alert(data);
        grafico(this,t,ct,data);
    });
}

function grafico(c,t,ct,data){
    jQuery(c).html('\n\
        <div style="width: 244px; color:#FFF; " class="ui-state-highlights" align="center" id="divContenedor">\n\
            <table>\n\
                <tr>\n\
                    <td>\n\
                        <p align="center"  style="color:#FFF; font-size:12px; font-weight:bold; line-height:normal">' + t + '<br/><span style="color:#FFF; font-size:10px; font-weight:bold; line-height:normal;" align="center" id="tituloProducto"></span></p>\n\
                    </td>\n\
                </tr>\n\
                <tr>\n\
                    <td height="150px">\n\
                        <div id="grafico" style="width:235px;height:150px"></div>\n\
                    </td>\n\
                </tr>\n\
            </table>\n\
            <table id="tablaDetalle" width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:6px; background-color:#FFF;">\n\
                <thead align="center">\n\
                    <tr style="background-color:#3366ff; color:#FFF; height:24px; ">'
                        + (ct?'<td width="5%" class="lineaAbajo">&nbsp;</td>':'') +
                        '<td width="25%" class="lineaAbajo" align="center" style="font-family:Verdana; font-size:10px; padding-left:13px;">Name</td>\n\
                        <td width="15%" class="lineaAbajo" align="center" style="font-family:Verdana; font-size:10px; padding-left:2px;">Date</td>\n\
                        <td width="22%" class="lineaAbajo" align="center" style="font-family:Verdana; font-size:10px; ">Price</td>\n\
                        <td width="20%" align="center" class="lineaAbajo" style="font-family:Verdana; font-size:10px; ">UOM</td>\n\
                    </tr>\n\
                </thead>\n\
                <tbody>\n\
                    <tr>\n\
                        <td colspan="5" align="center">\n\
                            <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"></table>\n\
                        </td>\n\
                    </tr>\n\
                </tbody>\n\
            </table>\n\
        </div>\n\
    ');
    var s = [],contenido='';
    var meses = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var productos = ['WTI','HEAT','RBOB','Brent','Gasoil'];
    var uom = ['USD/BBL','USC/GAL','USC/GAL','USD/BBL','USD/MT'];
    for (i=1;i<=5;i++){
        eval ('var product' + i + ' = [], xEtiquetas' + i + ' = []; xEtiquetas' + i + '.push(0);')
    }

    //jQuery.post('widgetfiles/csvfiles/Formato.csv',{},function(data){
        data = data.split('\n');
        
        for(i=1;i<=5;i++){
            contenido +='<tr>';
            if(ct){
                contenido += i==1?'<td width="2%" rowspan="3" class="lineaAbajo" align="center" style="background-color:#3366ff; font-weight:bold;">\n\
                    <span style="color:#FFF;"><img src="widgetfiles/imagenes/nymex.jpg" width="39" height="73" /></span>\n\
                </td>':i==4?'<td width="2%" rowspan="2" class="lineaAbajo" align="center" style="background-color:#3366ff; font-weight:bold;">\n\
                    <span style="color:#FFF;"><img src="widgetfiles/imagenes/ice.jpg" width="39" height="48" /></span>\n\
                </td>':''
            }
            contenido +='<td width="95%" class="lineaAbajo">\n\
                    <div width="100%" class="ui-corner-all ui-state-not-active" r=' + i + '>\n\
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" style="font-size:9px;">\n\
                            <tr style="' + (i%2==0?'background-color:#eeeeee;':'') + ' height:24px;">\n\
                                <td width="25%" categoria="' + (i<=3?'NYMEX':'ICE') + '" class="fpint2"><strong>' + productos[i-1] + '</strong></td>\n\
                                <td width="20%" align="center" class="fpint">' + data[1].split(',')[0].split('-')[1] + '-' +  data[1].split(',')[0].split('-')[2] + '</td>\n\
                                <td width="25%" align="center" class="fpint">' + data[1].split(',')[i] + '</td>\n\
                                <td width="30%" align="right" class="fpint" style="padding-right:3px;">' + uom[i-1] + '</td>\n\
                            </tr>\n\
                        </table>\n\
                    </div>\n\
                </td>\n\
            </tr>';
        }

        for (i=1,j=8;i<=8;i++){
            fila = data[i].split(',');
            fecha = fila[0].split('-');
            for(k=1;k<=5;k++){
                eval('product' + k + '.push([' + j + ',' + fila[k] + ']);');
                eval('xEtiquetas' + k + '.push([' + j + ',"' + fecha[2] + '" + " " + meses[' + fecha[1] + '-1]]);');
            }
            j--;
        }
        //jQuery(document).ready(listo);
        listo(c);
    //});

    function listo(contenedor){
        window.setTimeout(function(){
            darEfecto(jQuery('#tablaDetalle div:eq(0)',contenedor));
            crearGrafico(1,jQuery('#grafico',contenedor));
        }, 500);

        jQuery('#tablaDetalle tbody tr td table',contenedor).html(contenido);
        jQuery('.fpint2').css('color','#195eab')
        jQuery('#tablaDetalle div:first',contenedor).addClass('ui-state-active').removeClass('ui-state-not-active');
        jQuery('#tablaDetalle .ui-state-active .fpint2',contenedor).css('color','#fff');
        jQuery('#tituloProducto',contenedor).html(jQuery('#tablaDetalle div:first table tr td:first',contenedor).attr('categoria') + ' ' + jQuery('#tablaDetalle div:first table tr td:first',contenedor).html() + ' IN ' + jQuery('#tablaDetalle div:first table tr td:last',contenedor).html());

        var inter,c=2,to3,todos = jQuery('#tablaDetalle td div',contenedor).length;
        jQuery('#tablaDetalle div',contenedor).click(function(){
            window.clearInterval(inter);
            jQuery('#tablaDetalle div.ui-state-active').removeClass('ui-state-active').addClass('ui-state-not-active');
            jQuery(jQuery(this),contenedor).addClass('ui-state-active').removeClass('ui-state-not-active');
            jQuery('.fpint2',jQuery(this)).css('color','#fff');
            //alert(jQuery(this).parent().html());
            darEfecto(jQuery(this));
            window.clearTimeout(to3);
            to3 = window.setTimeout(function(){
                var temp=1;
                jQuery('#tablaDetalle tbody tr td div',contenedor).each(function(){
                    if((jQuery(this).attr('class')).indexOf('ui-state-active')>-1) c = temp+1;//+1 para que vaya al sgte
                    temp++;
                });
                encenderReloj();
            }, 5000);
        });
        
        function encenderReloj(){
            inter = window.setInterval(function(){
                if(c == todos + 1) c=1;
                jQuery('#tablaDetalle div.ui-state-active',contenedor).removeClass('ui-state-active').addClass('ui-state-not-active');
                darEfecto(jQuery('#tablaDetalle div:eq(' + (c - 1) +  ')',contenedor));
                c++;
            }, 5000);
        }
        encenderReloj();

        function darEfecto(fila){
            var to = window.setTimeout(function(){
                crearGrafico(jQuery(fila).attr('r'),jQuery('#grafico',contenedor));
                jQuery('#tituloProducto',contenedor).html(jQuery('table tr td:first',fila).attr('categoria') + ' ' + jQuery('table tr td:first',fila).html() + ' IN ' + jQuery('table tr td:last',fila).html());
                window.clearTimeout(to);
            },900);

            var to1 = window.setTimeout(function(){
                jQuery('#grafico',contenedor).fadeIn(1000,function(){});
                jQuery('#tituloProducto',contenedor).fadeIn(1000,function(){});
                jQuery(fila,contenedor).addClass('ui-state-active').removeClass('ui-state-not-active');
                jQuery('#tablaDetalle div.ui-state-active .fpint2',contenedor).css('color','#fff');
                window.clearTimeout(to1);
            }, 1000);

            jQuery('#grafico',contenedor).fadeOut(1000,function(){});
            jQuery('#tituloProducto',contenedor).fadeOut(1000,function(){});
            //jQuery('#tablaDetalle div.ui-state-active',contenedor).removeClass('ui-state-active',1000)
            jQuery('#tablaDetalle div.ui-state-not-active .fpint2',contenedor).css('color','#195eab');
        }

        function crearGrafico(r,g){
            eval ("s = product" + r + "; xEtiquetas = xEtiquetas" + r + ";");
            colorDe = 'transparent';
            colorA = 'transparent';
            if(navigator.appName == 'Microsoft Internet Explorer'){
                colorDe = '#c1d7ff';
                colorA = '#3366ff';
            }

            min = max = s[0][1];
            for(k in s){
                if(s[k][1] < min ) min = s[k][1]
                if(s[k][1] > max ) max = s[k][1]
            }
            divGrafico = g;
            datos = [{data: s}];
            opciones = {
                //colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
                colors: ["#FFF", "#FFF", "#cb4b4b", "#4da74d", "#9440ed"],
                legend:{show:false},
                series: {
                    lines: {
                        show: true,
                        fill:true,
                        lineWidth:1
                    },
                    points: {show: false}
                },
                grid: {
                    hoverable: false,
                    clickable: false,
                    color:"#fff",
                    backgroundColor: {colors: [colorDe,colorA]}
                },
                xaxis: {
                    ticks: xEtiquetas
                },
                yaxis: {
                    min: min,
                    max: max
                }
            }

            var plot = jQuery.plot(divGrafico,datos,opciones);
            /* jQuery('.tickLabel:contains(-)').addClass('giro');*/

            var previousPoint = null;
            jQuery("#graficos").bind("plothover", function (event, pos, item) {
                jQuery("#x").text(pos.x.toFixed(2));
                jQuery("#y").text(pos.y.toFixed(2));

                if (true) {
                    if (item) {
                        if (previousPoint != item.datapoint) {
                            previousPoint = item.datapoint;
                            jQuery("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);
                            showTooltip(item.pageX, item.pageY,y);
                        }
                    }
                    else {
                        jQuery("#tooltip").remove();
                        previousPoint = null;
                    }
                }
            });

            jQuery("#graficos").bind("plotclick", function (event, pos, item) {
                if (item) {
                    //alert("X = " + item.datapoint[0] + "\nY = " + item.datapoint[1]);
                    plot.highlight(item.series, item.datapoint);
                }
            });
        }

        function showTooltip(x, y, contents) {
            jQuery('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                fontSize:'12px',
                top: y + 10,
                left: x + 10,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
    }
}