import jet
import jet.websites.jeffandmere as jeffandmere



script_text = """

<script>
<!--

var is_chrome   = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_safari   = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var is_firefox  = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_ie       = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
var is_iPhone       = navigator.userAgent.toLowerCase().indexOf('iPhone') > -1;
var is_iPad         = navigator.userAgent.toLowerCase().indexOf('iPad') > -1;
var is_ios          = is_iPad || is_iPhone;
if (is_chrome) {
	is_safari   = false;
	is_firefox  = false;
	is_ie       = false;
}

var has_dragDrop = ('draggable' in document.createElement('span')) && !is_ios;


function setUp(){
	var dropContainer = document.getElementById('container');
	if (dropContainer.addEventListener) {
		dropContainer.addEventListener('dragenter', dragOver, false);
		dropContainer.addEventListener('dragover', dragOver, false);
		dropContainer.addEventListener('drag', dragOver, false);
		dropContainer.addEventListener('ondrag', dragOver, false);
		dropContainer.addEventListener('ondragover', dragOver, false);

		dropContainer.addEventListener('dragleave', dragLeave, false);
		dropContainer.addEventListener('dragexit', dragLeave, false);
		dropContainer.addEventListener('ondragleave', dragLeave, false);

		dropContainer.addEventListener('ondrop', dropHandler, false);
		dropContainer.addEventListener('drop', dropHandler, false);
		dropContainer.addEventListener('dragdrop', dropHandler, false);
	}
	else {
		if (dropContainer.attachEvent) {
			dropContainer.attachEvent ('ondragenter', dragOver);
			dropContainer.attachEvent ('ondragover', dragOver);
			dropContainer.attachEvent ('ondragleave', dragLeave);
			dropContainer.attachEvent ('ondrop', dropHandler);
		}
	}
}




function debugNotice(text) {
	var debugBox = document.getElementById('debugBox');
	debugBox.innerHTML = debugBox.innerHTML + text + '<br>';
}



function dragLeave(event) {
	var container = document.getElementById('container');
	container.style.backgroundColor = '#CCDDFF';
	debugNotice('foobar');
}



function dragOver(event) {
	var container = document.getElementById('container');
	container.style.backgroundColor = '#BB2222';
	if (event.stopPropagation) {
		event.stopPropagation();
	}
	if (event.preventDefault) {
		event.preventDefault();
	}
}



function dropHandler(event){
	var container = document.getElementById('container');
	container.style.backgroundColor = '#CCDDFF';
	if (event.stopPropagation) {
		event.stopPropagation();
	}
	if (event.preventDefault) {
		event.preventDefault();
	}
	var files   = event.dataTransfer.files;
	if (files) {
		var count   = event.dataTransfer.files.length;
		var form    = new FormData();
		for(var i= 0;i<count;i++){
			form.append('file'+i, files[i]);
		}
		sendData(form);
	}
	else {
		alert('The browser you are using does not support drag and drop.');
	}
}



function getResult(){
	var req = new XMLHttpRequest();
	req.addEventListener('load', requestComplete, false);
	req.open('GET','{{uploadTo}}&uploadId=');
	req.send();
}



function requestComplete(event){
	var completionNotice = document.getElementById('completionNotice');
	completionNotice.innerHTML = event.target.responseText;
}



function sendData(form){
	var xhr = new XMLHttpRequest();
	document.xhr = xhr
	xhr.upload.addEventListener('progress', uploadProgress, false);
	xhr.addEventListener('load', uploadComplete, false);
	xhr.addEventListener('readystatechange', uploadStateChange, false);
	xhr.addEventListener('error', uploadFailed, false);
	xhr.open('POST', '{{uploadTo}}&uploadId=' + Math.floor(Math.random()*2000000000));

	xhr.send(form);

	var progressBar             = document.getElementById('progressBar');
	progressBar.style.display   = 'block';
	progressBar.style.width     = '0px';
}



function uploadComplete(event){
	document.getElementById('percent').innerHTML='';
	document.getElementById('percent').innerHTML = 'Upload Complete';
	document.getElementById('progressBar').style.width = '0px';

	var completionNotice = document.getElementById('completionNotice');
	completionNotice.innerHTML = '{{jss:completionNotice}}';
}



function uploadFailed(event){
	var percent = document.getElementById('percent');
	percent.innerHTML = 'Server Error 2'
}



function uploadProgress(event){
	var percentComplete;
	if(event.lengthComputable){
		percentComplete = Math.round(event.loaded * 100 / event.total);
	}
	document.getElementById('progressBar').style.width = percentComplete.toString() + '%';
	document.getElementById('percent').innerHTML     = percentComplete+'%';
}



function uploadStateChange(event) {
	if (document.xhr.readyState >= 2) {
		if (document.xhr.status != 200) {
			document.xhr.abort();
			var percent = document.getElementById('percent');
			percent.innerHTML = 'Server Error'
		}
	}
}


var g_count = 0;
var g_uploading = false;

function ieSubmit() {
	var uploadId = Math.floor(Math.random()*2000000000);
	document.uploadForm.action = '{{uploadTo}}&uploadId=' + uploadId;
	document.uploadForm.uploadButton.disabled = true;
	document.uploadForm.submit();
	document.uploadId = uploadId;
	ieRequestProgress();
}


function ieRequestProgress() {
	var req = new XMLHttpRequest();
	req.addEventListener('load', ieSetProgress, false);
	req.open('GET', '{{uploadTo}}&uploadId=' + document.uploadId + '&count=' + g_count);
	g_count += 1;
	req.send();
}


function ieSetProgress(event) {
	document.getElementById('percent').innerHTML       = 'xxxxxx' + new Date().getTime();
	var ratio            = parseFloat(event.target.responseText);
	var percentComplete  = Math.round(ratio * 100);
	document.getElementById('progressBar').style.width = percentComplete + '%';
	document.getElementById('percent').innerHTML       = percentComplete + '%';
	if (percentComplete != 100) {
		ieRequestProgress();
	}
}



window.addEventListener('load',setUp,false);

-->
</script>

"""

container_text = """
	<div id='container' style='width:100%; height:160px; border-radius:5px;
								 -moz-border-radius:5px; -webkit-border-radius:5px;
								 background-color:#CCDDFF; text-align:center;
								 font-size:14px; padding-top:20px;'>
		<script>
			<!--
			if (has_dragDrop) {
				document.write('<p class=center>Drop (multiple) files here to upload (one group at a time).</p>');
			}
			if (!has_dragDrop) {
				if ({{didIeUpload}}) {
					document.write('{{jss:ieUploadedHtml}}');
				}
				document.write('<p class=center>Choose a file to upload:</p>\\n');
				document.write('<form name='uploadForm' method='post' action='' enctype='multipart/form-data'>\\n');
				document.write('  <input name='ieUpload' type='file' size='70'><br>\\n');
				document.write('  <input type='button' name='uploadButton' value='Upload' onclick='ieSubmit()'>');
				document.write('</form>\\n');
			}
			-->
		</script>
		<div id='progressBar' style='height: 12px; width: 0%; background-color:#AA4444;'></div>
		<div id='percent' style='font-size:20px; color:#333377; height:50px;'></div>
	</div>
	<div id='completionNotice'>
		<script>
			<!--
			if ({{didIeUpload}}) {
				document.write('{{jss:completionNotice}}');
			}
			-->
		</script>
	</div>

	<script>
		<!--
		if (!has_dragDrop) {
			document.write('<p>(Use a new version of Firefox, Chrome, or Safari for ');
			document.write('multi-file drag-and-drop uploads.)</p>\\n');
		}
		-->
	</script>

"""


def yield_data(psp_directory, path, root_directory, request_handler, **kwargs):
	# Determine first, last, and album name.
	parameters      = request_handler.header.parameters
	first_name      = parameters.get('first_name', '').strip()
	last_name       = parameters.get('last_name', '').strip()
	album_name      = parameters.get('album_name', '').strip()
	full_name       = first_name + ' ' + last_name

	# Determine where to upload.
	relative_path   = jet.path.get_relative_path(root_directory, path)
	relative_path   = relative_path.replace('\\', '/')
	parent_dir      = jet.path.get_parent_directory(relative_path)
	wedding_dir     = jet.path.get_parent_directory(parent_dir)
	album_dir       = '/' + jet.path.unix_join(wedding_dir, 'Album') + '/'
	this_album_dir  = jet.path.unix_join(album_dir, 'Uploads', full_name, album_name) + '/'
	this_album_dir  = jet.http.encode_url_path(this_album_dir)
	upload_to       = jet.path.join(parent_dir, 'upload.psp').replace('\\', '/')
	upload_to       = jet.http.encode_url(request_handler.get_requested_machine_name(),
	                                      upload_to,
	                                      first_name  = first_name,
	                                      last_name   = last_name,
	                                      album_name  = album_name)

	problem = jet.string.contains_any_of(album_name, ':\\/%*?"<>|')
	problem = problem or jet.string.contains_any_of(last_name, ':\\/%*?"<>|')
	problem = problem or jet.string.contains_any_of(first_name, ':\\/%*?"<>|')

	# Handle album not specified.
	if len(album_name) == 0 or len(last_name) == 0 or len(first_name) == 0 or problem:
		text =  '<p>Hi.  Thanks for taking the time to upload your album.  If you are using\n'
		text += 'Internet Explorer, we recommend you put all your pictures into a zip file first,\n'
		text += 'and upload the zip file, as you can only upload one file at a time in IE.</p>\n'
		text +=  '<p>Let\'s get started (you must enter text in each box):</p>\n'
		if problem:
			text += '<p class=center>NOTICE: The names below cannot contain '
			text += 'any of these characters: :\\/%*?"<>|.</p>'
		text += '<form method=get action="/' + relative_path + '">\n'
		text += '<table><tr>'
		text += '    <td><p>First Name</p></td>'
		text += '    <td><input type="text" name="firstName" value="' + first_name + '"></td>\n'
		text += '  </tr><tr>\n'
		text += '    <td><p>Last Name</p></td>'
		text += '    <td><input type="text" name="lastName" value="' + last_name + '"></td>\n'
		text += '  </tr><tr>\n'
		text += '    <td><p>Album Name</p></td>'
		text += '    <td><input type="text" name="albumName" value="' + album_name + '"></td>\n'
		text += '  </tr><tr>\n'
		text += '    <td></td>'
		text += '    <td><input type="submit" value="Start Uploading..."></td>\n'
		text += '</tr></table>\n'
		text += '</form>\n'

	else:
		completion_notice   =  '<p>The file(s) you uploaded should momentarily be available '
		completion_notice   += jeffandmere.get_link(this_album_dir, 'here') + '.</p>\n'
		completion_notice   += '<p>There should now be a link to this album on the '
		completion_notice   += jeffandmere.get_link(album_dir, 'album page') + '.</p>\n'

		# For ie, notify that the submit completed.
		did_ie_upload = str(parameters.get('uploading', None) == 'done').lower()
		if did_ie_upload:
			ie_uploaded_html = '<p class=center>(The previous upload completed)</p>'
		else:
			ie_uploaded_html = ''

		text =  '<p><b>' + first_name + ' ' + last_name + '</b>, you can now upload to your album,'
		text += ' <b>' + album_name + '</b>.</p>\n'
		text += '<p>If you upload a zip file, all of the files in '
		text += 'the zip file will be extracted.</p>'
		text += '<p><b>Note:</b> If you leave this page or drop more files '
		text += 'before the upload is complete, the '
		text += 'upload will fail.</p>'

		substitutions = {'completion_notice' : completion_notice,
		                 'upload_to'         : upload_to,
		                 'ie_uploaded_html'  : ie_uploaded_html,
		                 'did_ie_upload'     : did_ie_upload}
		text += jet.string.substitute(script_text, **substitutions)
		text += jet.string.substitute(container_text, **substitutions)

	# Yield the page.
	for data in jeffandmere.yield_page('Upload', jeffandmere.yield_standard_page,
	                                   text=text, root_directory=root_directory, path=path,
	                                   **kwargs):
		yield data